Coding for Beginners: CSS Basics #66— Font Size
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Now that we understand the different ways to bring in fonts to your website, we now need to review how to adjust those fonts. There are several properties that affect the typography for web. These properties can be divided into two main categories: font styles and text layout styles.
Font styles are those properties that affect the font itself such as the selection of the font (i.e. font-family), size, weight, style (ex. italic), and color.
Text layout styles are properties that affect the spacing either between characters, words, and letters and text alignment.
The first property we will review is font-size. In previous videos, we reviewed different ways that you can express units of length and size. Font-size can take values measured in pixels (px), ems, rems and percentages.
Pixels (px) is the number of pixels high the text should be. It is an absolute unit.
When using ems, 1 em is equal to the font size set on the parent element of the current element that you are styling. Ems are named because they were equivalent to the width of the capital letter "M." For example, if the parent element is set to a font-size of 16 px then the child element having a font-size equal to 0.75 em means that the font-size is 12 px (0.75 * 16 = 12). This method can get complicated if you have many elements nested in one another so it becomes difficult to keep track of the "parent" element.
Using rems is similar to using ems except that 1 rem is equal to the font size set on the root element of the document rather than the parent element. This method is simpler because it becomes easier to work out the different relative font sizes. So if the font size on the root element, html, is 16 px then any element set to 0.75 rem will display as 12 px. Rem is not supported by Internet Explore (IE) 8 or older.
When using percentages, if your parent element is set to 16 px and the child element is set to 75% then the result is the font displayed at 12px. You may want a heading to be at 150% or 24 px.
If not specified, understand that the font-size of an element is inherited from the parent element starting from the root element.
The standard font-size is set to 16px across browsers.
However, sometimes it is easier to set the root element, html, to 10px so that the math is easier to compute.
So if the html has a font-size of 10 px, an h1 with a font-size of 3rem is 30 px, and paragraph text with a font-size of 1.6 rem is 16 px.
#HTML #CSS #coding #web #accessibility #typography #webtypography #websitetypography #fontsize #rem #em #rems #ems #responsivedesign #responsivetypography #csstutorialfullcourse #fontsizecss #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse