Web Typography 101

Web typography, like design and images, plays an important role in having an appealing website. The fonts you use for your website reflect the site’s tone and visual impact. A great and effective typography is when it communicates the designer’s ideas, when the text is readable, and when there is visual appeal. Typography allows for web pages to come to life. This article gives an introduction to typography and talks about some guidelines to web typography in terms of its fundamental elements.


What is web typography?

Web typography is how the text in a website is arranged and displayed. It is the art of arranging and designing letters and has a big influence on how the message is presented and interpreted.


Typeface vs. Font

Some designers are uncertain about the difference between typeface and font, and most of the time interchange them or use the terms for the same thing. Typeface is a font family, and font is the weight or style within the family. For example, Arial is a typeface while Arial Bold and Arial Narrow are fonts. In choosing a typeface for web typography, use web safe typefaces. Web safe typefaces are a set of fonts that will display on all browsers.


The generic typefaces include Serif, Sans-serif, Monospace, and Script. The most common among these font families are Serif and Sans-serif. Serif fonts are more traditional fonts distinguished by decorative markings, or serifs, on the end of character strokes and stems. Serif fonts include Times New Roman, Baskerville, and one of the most popular web fonts, Georgia. Sans-serif fonts, on the other hand, do not have serifs on their characters and are considered as modern fonts. Sans-serif fonts include Helvetica and Arial. Sans-serif fonts are more preferred in web typography than serif fonts because they are often more readable especially on smaller devices.


Four Elements of Web Typography

Other than distinguishing typefaces and choosing a font, there are four elements that construct effective web typography.

  1. Contrast
    Even though a certain color of text matches this certain color of the background, it is still important to check if the text is readable. In order for the text to become legible, there should be enough contrast. If you are not sure about the contrast, print screen your web page and put it to grayscale.
  2. Size
    Websites can now be accessed through different devices and platforms. What’s readable on a big screen might not be legible on a smaller one. The ideal font size of a body text should not be lower than 12px.
  3. Hierarchy
    Important elements of the web page can be identified through hierarchy.  Using different font sizes consistently will help readers pick out the important details and get a gist of the message. Hierarchy can also be achieved by using varying typefaces and font styles to break the monotony.
  4. Space
    Spaces in between letters, sections, and lines of text are important to keep the web design balanced and the typography legible.  The white space is as important as the text. Leading is the vertical spacing between the lines of the text. When the paragraph’s line height CSS property is at least 140% of the text size, the web typography has achieved enough leading. The ideal line width, on the other hand, should be 40 to 80 characters in one column.


Web typography is crucial to a good design and effective communication. Conforming to all the four elements of good web typography will have a positive effect on the readability and visual appeal of your web page.