Web Design II

Web Typography

You might be asking yourself, web fonts are different than printed fonts? Today, I am going to explain why they are both so different!

Both web and print fonts can be based on the same design, however, there are differences in design, spacing and much more. Fonts that are meant for use on the web are optimized and modified to enhance readability onscreen. Some of the design adjustments include taller x-height, more open counters, reduced stroke contrast, wider letterforms, and more. Fonts that are intended for smaller sizes are often adjusted to open more spacing between the letterforms.

One difference in print and web typography are line breaks and justification. Print designers normally make manual breaks to control the rag. Web designers cannot make manual breaks to control the typography rag, if they do, some users will end up with very short lines. Print designers sometimes use justification in their printed typography. Web designers avoid justification because the justification could change on every monitor. Every monitor and device have it’s different defaults, therefore, it is smart not to make manual breaks or to have justified text for web typography. Here is a good website that displays typography mistakes to avoid, it is great for the typography basics.

THE WEB IS INCONSISTENT    The same font might appear differently.

This image above is a great example of what can happen on two different monitors.

Another big difference in print and web typography is type size. For print design, the average body copy type size is 8pts to 12pts. For web designers, they have less control on how fonts display across computers, devices and more. To avoid having a small typeface, the designers chose fonts that display cleanly and are readable fonts. This is also why web designers will choose sans serif body copy over serif body copy. Sans serif fonts are more readable when it comes to web typography. Below is an image explaining how sans serif fonts have even strokes and how they are more simple. Here is an article on how to size text in CSS.


For more information on modern scales for typography, click here.

There is so many difference between print typography and web typography. The main difference in web typography is that ever monitor and device is set to a default, so every person likely sees the typography differently. This is why it is a good idea to choose Web safe fonts. Some popular and free resources are Google Fonts and Typekit. Here is a screenshot of Typekit. If you want the fonts for the web, select the “< >” button for web fonts. If you want fonts for print, select the “cloud” sync button for fonts for print. Typekit also has certain settings that would be helpful for web typography; sans serif, x-height, and another type anatomy.


If you would like to learn more about web typography, visit this link! There are many rules that apply when using type in design, but remembering the differences in web and print typography is very important to have the most professional and beautiful typography.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s