Font sizing is another typographical way to convey meaning about the text on your page. In this video, look at font-sizing in CSS.
- [Instructor] In CSS there are different units for specifying the font size. Some are relative values and some are absolute values. When a relative unit is used, it is calculated in relation to the parent or nearest ancestor's font size. Absolute values are not affected by ancestor elements. Both relative and absolute font sizes are inherited by descendant elements. Let's take a look at how to use some common font sizing values. Screens are measured in pixels, so this is a common and straightforward way to define measurements in CSS.
Pixels are absolute values and is great for accuracy and gives you fine grain control over your design. Different browsers interpret decimal values inconsistently. Some round up, some round down, this mostly effects older browsers but it's convention not to use decimal points when using pixels. The default size of body text like paragraphs and lists are equivalent to 16 pixels. Headings are bigger or smaller depending on which heading level you use.
Named after the letter M the em unit has historically been used to measure horizontal widths. But now refer to the height of the font. Em is a relative unit, so that means it's sized in relation to its closest ancestor's font size. One em is equal to its inherited font-size. Declaring a font size value to an ancestor element will change that, but if no font size is declared anywhere, then one em is equal to the default browser font size.
Let's take a look at an example. If no font size is declared in the parent element, then adding one em to the paragraph will equal the browser default. There will be no difference when I add this style. If I change it to 1.5 em then it'll be one and a half times the size of the inherited font size and we comment this out and add this one in. If a font size is declared in the ancestor or parent element, the paragraph will then be sized relative to its parent, let me add in two em in this div selector.
Now the paragraph is one and a half times the size of the div element. You can actually mix sizing units as well. Instead of two em's in the div, if I add a font size of 20 pixels here, the paragraph is now one and a half times the size of 20 pixels. If you want the font size to be smaller, use values that are less than one. For example, .5 ems just means that I'll be half the size of its inherited font size.
It can get a little tricky using em's but unlike pixels since it's common to use decimal points for em values, this will help you calculate a more precise font sizing. Introduced around 2011, rem is a newer unit than em, that's similar in usage. One rem is equal to one em. The one key difference is rem is only relative to the root element, which is the HTML element. When this unit was first introduced, older browsers like Internet Explorer 8 was still in use and didn't support it, but now all browsers do.
Let's take a look at an example. In this example, I've already set up a base font size in the root element, the HTML. If I set the paragraph to one em it will equal its inherited font size, right now it's equal to the 30 pixels set in the HTML selector. Now if I set a font size in the div, which is a closer ancestor element than HTML, the em will be sized relative to that.
Now if I change one em to one rem instead, it will be sized relative to the root element, which is the HTML. So this is the one main difference between em's and rem's with rem even though there's a font size here declared in its parent element, it will always be relative only to the HTML. There are quite a few more length values that can be used for font sizing, these same values can also be used for other properties that require a sizing value such as width and height.
Codrops has an extensive write up of all the length measurements, usage, syntax, browser support, pros and cons. If you're just getting started with CSS, pixels are a good way to get up and running. I'll be using pixels for font sizing for the remainder of the course exercises.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property