CSS Font Size Basics: Learn How To Use CSS Font Size
The CSS “font-size” property controls the text size rendered in the browser. Just like CSS Italics, CSS font size is not something that you’d think could be tricky, but nonetheless, it has found a way, thanks to the huge number of devices browsing the web in the 21st century. There is no doubt about it: CSS can be difficult. No, it’s not like trying to comprehend “millions of nodes and data points” difficult, but it is tricky to create beautiful, responsive web pages across all devices. Don’t worry — just keep reading, and all your questions will be answered.
Not so long ago, even the most advanced computers had output monitors with very poor resolution. The resolution was so low, in fact, that the pixels could be counted by hand if need be. Therefore, it made plenty of sense to have pixels be the standard default for measuring units across rendered outputs in web development using CSS. Still to this day, pixels set the size of HTML elements by default, including setting the font size. To be precise, the default font size is 16px in web development.
Things got tricky as different browsers came to market, more CSS fonts were released, and society as a whole began moving away from using the internet at home on large desktops and towards browsing the web on their mobile devices. Those mobile devices and tablets have much smaller, touch-sensitive screens that come in a variety of shapes, which gives us different viewport widths. As the shape of devices changed, CSS moved away from absolute font-size values and toward relative font-size values.
Devices with internet connectivity continue to become more widely available, so front-end developers must constantly adapt to the changing landscape to best deliver professional applications online.
Today, absolute CSS font sizes are considered antiquated and best avoided, while relative font sizes are favored for many reasons. Keep reading below to find out why!
Absolute CSS Font Sizes
As we mentioned before, originally, measuring everything in pixels was good enough for word processors, video games, and web pages. Fortunately for everyone, things advanced and got far more visually appealing. For front-end web developers, that meant learning how to deal with an entirely new type of length unit that was different from the absolute units they were already accustomed to.
Absolute units of measurement are units that do not change from one device to the next. Examples include:
- Pixel – “px” – equal to 1 viewport pixel
- Point – “pt” – equal to 1/72 of an inch
- Pica – “pc” – equal to 12 points
These units will render, more or less, the same size on an ultrawide 4K monitor as they would on a Samsung cellular phone or Apple iPad. The best-known example of this might be the heading <h1> tag, which has a default font size of 16 pixels regardless of which device it’s being displayed on. Because of this default absolute value, it’s important to use a CSS selector and give any of your heading elements relative font sizes if they’ll be rendered on many different devices.
One solution for this problem is, of course, media queries that check for viewport size and apply styling as described. In the case above, we might write a media query that checks for an extra-large viewport and then changes from pixel to pica to represent that much larger screen. However, media queries are difficult to write and are typically avoided unless absolutely necessary. The solution was the introduction of relative units of measurement in CSS.
Top courses in CSS
Relative CSS Font Sizes
Using relative units of measurement as a best practice can save you a lot of headaches! Most web developers already take a “mobile first design” approach; they design web applications within a smaller, mobile view first and then refine those elements later for tablets and desktops. The reasoning is that it is much easier to take something small, make it bigger, and still have it look good. But it is difficult to take something large and make it smaller while maintaining the same look — another reason mobile application development is generally regarded as a different field than web development.
Regardless, relative units of measurement are your best friend when styling with traditional CSS. That is true when applying font styling as well as describing the size, shape, and position of other elements on your application’s front end. You’ll only be making things easier on yourself and your users by using relative units which conform to the viewport’s dimensions unless an element must have a precise number of pixels, points, or picas to be rendered properly.
The first relative unit we’ll discuss is the percent “%” used to describe height and width in CSS. This unit is a percentage of the *parent* element. For example, our main <body> element has a default font size of 100%, which is equal to 16px or 12pt — which we’ve already discussed. Creating a child <p> element inside of the <body> and giving it a font size of 50% would make it 8px or 6pt because it is relative to the parent.
Next, we have the “em” units which, like percentages, are relative to their parent element. By default, the <body> tag has 1em and 1rem values for its font size attribute. Unlike the 16px and 12pt, however, these units will scale according to viewport size. Again, that “em” unit scales according to the size of its parent.
Conversely, we also have the “rem” units, which are similar to percentages and em units because they are relative and will scale. However, unlike percent and em, the rem unit references the “root” attribute and value while skipping their parent attributes and values. For example, a <body> tag may contain text at 1rem with an <div> assigned 0.5rem so that it’s half of the root size. To demonstrate, we could create one more element inside of the pre-existing <div> with a font size of 1rem, which would be the full 1rem of the <body> tag and not the 0.5rem of the <div> tag.
CSS font size also takes keywords as values to the font size attribute. Very similar to `color: blue`, we could write `font-size: xx-large`. We have many size keywords for font size, including xx small, x small, small, medium, large, x large, and xx large. As all of these values are relative, they will scale according to the viewport dimensions and the size of their parent element.
We also have “vw” and “vh,” which stand for “viewport width” and “viewport height,” respectively. Each of these units is based on 1/100th of the size of the viewport. These sorts of relative measurements are particularly useful when working with a CSS Grid Layout as all of the elements exist in scalable columns and rows. Finally, there are the “vmin” and “vmax,” which each represent 1/100th of the viewport’s smaller or larger dimensions.
Most of us don’t think about font size too often because we’re so accustomed to how easy it is to operate within word processors and slide presentation software. At one point not long ago, it was much simpler just because we didn’t have the technology to put high-end mobile devices in the pockets of everyone on the planet. Today, however, we do, and that technological advance has only increased.
Today, we did a great job of reviewing how to apply CSS font size in our web development projects. We also discussed the difference between absolute units of measurement as well as relative units of measurement. Furthermore, we even took an opportunity to appreciate the importance of mobile responsive design principles and how they are used to create an optimum browsing experience for everyone on the web.