font-poster

I began my career as a print designer and when I transitioned into the world of digital design, one of the most obvious differences was the treatment of typography on the web.

It makes sense. A screen emits light and what we see is created by thousands of flickering pixels, our eyes are going to work harder.

Print has more leeway, you can set the base font-size at about 9 points and still have a legible document. That is the typical size seen in magazine articles. This means that you set the primary text, which is commonly the body of the article, at 9 points and size all other fields of text accordingly.

On the web we compensate by making text bigger. Bigger text means less strain on the eyes.

But the question is, how much bigger? Remember, we are setting the base size first, everything else will be sized accordingly.

Note: In digital we use pixels and not points. While it is a more complex topic that could have its own post, it is safe to say that 1 pixel is equivalent to 0.75 points.

Data speaks louder than opinion.

Google recommends that you set your base font-size at 16 pixels. They’ve done the research. Popular web browsers like Chrome and Firefox have their default base font-size set to 16px.

Screen Shot 2016-09-26 at 8.36.36 PM

This is the current industry standard and the size you should use to give your users the ultimate experience by providing content in a way that is easy to read and understand.

Code nerds: your stylesheet should look like this:

body {font-size: 16px;} 
p {font-size: 1em;}

Whereas 1em is equivalent to the base font-size. In this case 1em = 16px.

What about the rest of the text?

Now that we have our base size set, we need a formula to size all other text, i.e. h1-h4.

First thing’s first, I like to use the em unit of measurement when it comes to my font-size. Why ems? Because they are relative, there is no set size. Instead, an em depends on the size of it’s parent element.

In our case 16px. 1em = 16px while 2em = 32px, etc. Changing sizes all across the board is as easy as changing the base font-size.

Jason Pamental wrote a great article detailing his formula for setting font-sizes. He goes in-depth, including sizing for mobile devices. A recommended read.  

Not all fonts are the same.

Every font has its own characteristics.

While most fonts will look the same at 16px, this is not true for all. Calibri is a good example. Set at 16px it is visually smaller than Roboto. This is a rare case and I recommend changing the base font-size.

In this situation, you can set Calibri at 18px, which visually matches Roboto at 16px.

Screen Shot 2016-09-26 at 1.20.19 PM

Changing the size until it visually matches a font that you know is standard at 16px is the right approach.

I can think of no better candidate than Google’s Roboto. They’ve done the research and I am willing to bet they based it off of their own typefaces.  

Lastly

Let’s go back to the basics. Words serve a functional purpose. They tell people things. Chances are that a great majority of information on your site will be delivered using words. So readability and comprehension is key.

People, or users, have to understand what you are trying to tell them in order for your site to have met its primary goal, right?

Good design is human-centered. As a designer, my job is to make sure that above anything else your product is functional.

I accomplish this by following rules that have been tried and tested by many great designers before my time. Why fight the data?