The font-size property's purpose is fairly self-explanatory—it is used to set the size of your font. In web design, the way a font's size is measured presents some options to consider for the designer. Font sizes can be set as exact measurements or as comparative measurements. Click through the tabs below to learn about different units of measure for the web.
If you want your font set to an exact size, you use pixels. By default, browsers have fonts set to 16 pixels (16px). To give you a rough idea of font size, this is how big your text has been in your webpage-building assignments so far. Pixels can be a great option since they're precise, and you know exactly what size they'll be. This can better allow for very specific, controlled designs.
If you had set these same paragraphs specifically to a font-size of 12px, they would stay that size, no matter how big or small the webpage's default font is.
<p style="font-size:12px;">This is how the paragraph
displays with the page's font size set to 16px.</p>
<p style="font-size:12px;">This is how the paragraph
displays with the page's font size set to 24px.</p>
This is how the paragraph displays with the page's font size set to 16px.
This is how the paragraph displays with the page's font size set to 24px.
In modern web layouts, fixed sizes are less common. This is because of the use of responsive design, which allows your website to be accessible on any screen size. This doesn't mean pixel widths are dead, though. They are still used to set a base line for fonts and to set a hard line minimum and maximum size on key layout items. (You will learn more about this in a future lesson on responsive web layouts.)
Percentage-based sizing is a comparative measurement approach, which allows you more flexibility in your design. If your webpage's font is set to a default of 16px, setting the font-size property to 100% on a paragraph will result in 16px font. But if you set the font-size property to 150% on a paragraph, you'll get 24px font (16 times 1.5 = 24).
For Example: If you have several paragraphs marked with a font-size of 75%, and the webpage's normal font size is 16px, those marked paragraphs will display as 12px (16 times .75 = 12). Then, if you change the webpage's font to 24px, these paragraphs will stay in proportion and will now display at 18px.
<p style="font-size: 75%;">This is how the paragraph
displays with the page's font size set to 16px.</p>
<p style="font-size: 75%;">This is how the paragraph
displays with the page's font size set to 24px.</p>
This is how the paragraph displays if the page's font size set to 16px.
This is how the paragraph displays if the page's font size set to 24px.
Much like a human child inherits physical traits from their birth parents, comparative measurements rely on information from a parent element to determine their value. If you have a paragraph tag that contains a span tag, the span tag is considered a child element of the p-tag. This means that the span tag (the child-element) will inherit the properties of the parent element (the p-tag).
Another comparative measurement is em, which is similar to percent. An em is essentially the decimal representation of a percent value. 1em of a 16px font will be 16px. If you change that to 1.5em, you'll get a font sized at 24px (16 times 1.5 = 24).
To explain, let's use the webpage default of 16px again. Say you have a paragraph with the font-size property set to 200%. That paragraph will now display at 32px. However, what if one sentence in the paragraph is contained by a tag, which you've also set to a font size of 200%?
Since the span is nested inside the paragraph, the span's 200% is now applied to the paragraph's current display of 32px. Therefore, the text in the span will increase to 64px. So, keep track of where you apply comparative sizes, or you may get some unexpected results.
<p style="font-size:1.5em;">This is what happens when
<span style="font-size:1.5em;">em units are compounded.</span></p>
This is what happens when em units are compounded.
Some designers find the em unit of measure easier to read and shorter to type, which makes their code appear cleaner and more concise. Ultimately though, it comes down to the needs of the project and personal preference.
You Try!
Using your own text editor or the coding space below, try each unit of measure and see how they react. Instead of using a simple paragraph tag, try using a more complex layout, like a table, and see how style inheritance works. Apply a style to the parent (table) element and each child element within the table. How does this impact the styles you have set?
