May 25, 2016
A brief lesson in web typography (and a small change to my own website)
When I first began learning about responsive web design, I was frustrated that I could create a fluid layout, but not have fluid typography. The problem started because for a long time, I used pixels to specify font size.
If we still viewed websites on 800x600 screens and didn’t use tablets or smartphones to view websites, then pixels would still make sense today. But that isn’t the case.
Our web content has to adapt to the numerous devices, displays, and screen resolutions available today. Luckily, there are far more units of measure to choose from when determining font size.
Relative versus absolute units of measure
Generally, the units of measure available today for the web fall into one of two categories: relative units and absolute units.
An absolute unit is a fixed length unit. Pixels fall into this category along with these other units:
When designing for print, using absolute units makes sense because you want your headings and text to print at a fixed size for an optimal reading experience. Of course, with print, you know the output size, such as an 8.5 x 11 inch document or a 3.5 x 2 inch business card.
That’s not the case when it comes to the web. Because display sizes can differ widely, using an absolute unit of measure may not always make sense.
A font size specified in pixels can’t scale either up or down to suit a device display. A 10px font on a tablet device may look great, but when viewed on a 1920 x 1080 screen, the same text may look disproportionately small.
Rather than use absolute units to specify font size, it’s better to use relative units. According to W3.Schools.com,
Relative length units specify a length relative to another length property.
In the past, there were two relative units that I used regularly: em and percent.
Em is named for the capital letter M. The em unit relies on the font and font size that you use. Because the height and width of letters varies from font to font, the em unit varies as well.
For instance, below is the same word written first in Verdana and the second in Georgia, but with the same font size (2em).
Minimum versus Minimum
Notice how the word written in Verdana appears larger than the same word written in Georgia. Both the height and width of the letters in Verdana are bigger and the letter spacing is wider.
Em, along with its close relative rem, is a popular unit of measure on the web because of its scalability. Even the W3C recommends using it. Many site use em not only to specify font size, but other properties, such as margin and padding, as well.
Percent is another relative unit of measure that depends upon the font and font size. I have used percent often in the past to specify font sizes.
There isn’t much difference between em and percent. The article, “How to Size Text in CSS” from A List Apart compares both em and percent if you want to know more.
Just like em, percent is scalable, and both units have extensive browser support. You can use both em and percent in combination with each other or choose one or the other.
While em and percent do not have the same issues as absolute units of measure, neither of them is fluid. When designing sites, I found that it was still necessary to specify different font sizes to accommodate different device displays.
Viewport units: vw and vmin
Just recently I moved from percents on my font sizes to vw and vmin. Vw refers to viewport width, and vmin refers to the minimum viewport height and width. There’s also vh or viewport height and vmax which refers to the maximum viewport height and width.
Viewport, if you’re unfamiliar with the term, refers to the browser window size. If you consider that the viewport is at most 100%, then 1vw is equal to 1% of the viewport width, and 1vh is equal to 1% of the viewport height.
These viewport units of measure are relative units like em and percent. The difference, however, is that these unit are relative to the size of the viewport rather than the font.
The advantage that these units have is that they are fluid. What does that mean? CSS Tricks illustrated it best in the article, “Viewport sized typography.”
The viewport units have been around for some time, but I don’t think the units are used as extensively as em, rem, or percent—at least not for font sizes.
In part, it may be due to browser support. Only IE 9 and later support these units, and the support is spotty. (See the viewport units support table from caniuse.com.) But nearly all modern browsers support the units.
Although I haven’t eliminated the need for media queries in my typography entirely, I have simplified my CSS file by eliminating a few properties.
Part of me wishes that I could go back to older sites that I designed to update the CSS with viewport units now that I better understand how to use them. It certainly influences what I use with future sites.
For those interested in learning more, here’s the Smashing Magazine article that got me started with this small change, “Truly Fluid Typography with vh And vw Units.”