Typography in Web Design

Typography in Web Design

In 2006, Oliver Reichenstein famously mentioned, “Web Design is 95% Typography.” He referred to the fact that most of the information we see on the web is written.Thus, it is only logical that we, as web designers,know how to control it visually. And businesses should at least know the basics about it. So here are some key points to remember in effectively using typography in web design.


What Is Typography?

Typography is the technique and art of arranging type. This involves the deliberate and thoughtful selection of point size, line length, typefaces, leading, tracking, color, kerning and any element that can affect a design. Therefore, typography in web design helps create an experience for users before even reading a word or clicking any button.

Typography has the capability to go beyond merely narrating a story to its users. It shows the customers what the website is all about, including who is behind it. The treatment of type builds an atmosphere and brings out a response the same way as tone of voice does.

Basically, typography establishes a mode of communication, showing the personality of the website. The careful choice of typeface determines how people will respond to your website. Here is one of the best typography examples with distinct personality established.

Typography Website Example

Elements of Typography

  1. Fonts and Typefaces

    Typefaces are font families such as Helvetica Regular, Helvetica Bold, Helvetica Italic and Helvetica Black. Fonts are one style or weight within that family, for instance Helvetica Bold.

  2. Typeface Classifications

    Sometimes typeface classifications are called “font families”. Based on generic classifications, these are large groupings of typefaces. These are the six types on web pages:

    • 2.1 Serif
    • 2.2 Sans-Serif
    • 2.3 Cursive
    • 2.4 Script
    • 2.5 Mono-Spaced
    • 2.6 Fantasy
  3. Spacing Around Letters

    There are various adjustments that can be made around and in between letters affecting typography.

      • Tracking – space between groups of letters
      • Measure – the length of lines of text
      • Kerning – space between individual letters
      • Leading – space between lines of type
      • Alignment – placing text to the right, left, justified or centered
      • Ligatures – letters moved close together so that their anatomies are combined
  4. Things to Consider with Typography

    Although some websites succeed with the use of typography, they neglect some things to carefully consider on their own advantage. Here are some key points to remember when learning about and applying good typography in your website:

    • 4.1 Read Through the Text of Your Website
      • Before you allow your web designer to just copy and paste a text file, you must read through your content. The advantage is to avoid disconnection between the design and the writing of a website. Another is the more effective integration of the text into the website. Once it is in place in your web design, take note around the letters of the passages. Careful typography can help you get a good an idea on which unusually long or awkward lines can be cut or shortened. At least, reading through your text before and after applying typography can help define the whole look and appeal of the website.
    • 4.2 Why One Width Isn’t Enough
      • On the basic prescription of experts about an ideal typography line length for readability, clarity and proportion in print, here are some recommendations. What designers are aware of is the 66-character rule. Precisely, what is recommended are as follows: for the web it’s 16px (1em) text and a measure of 60–75 characters long, while headings should measure 48px (3em).

        These recommendations are based on factors such as:

          • How People Tend to Read
          • Quickly Understanding the Relative Relevance of Various Heading Levels Between Blocks of Copy
          • Difficulty or Ease in Following a Line to the End then Bringing Your Eye Back to the Beginning of the Next Line
    • 4.3 The Performance and the Speed of the Website
      • Once typography is established, speed and performance are overlooked. Thus, for a good typography to be good and usable, its visual appeal must be complemented by speed. The key is to test the website in many browsers, including old type is possible.
  5. Steps When Checking Your Typography

    Once everything is laid out perfectly, you may check your typography using these simple four points:

      • Carefully select the typefaces by looking at the anatomy of the type and what family of type it is grouped with.
      • Build the web design with the use of placeholder text, but do not approve the final design until you have checked the real text in it.
      • Pay attention to the little typography details.
      • Look at each text block as though it has no words placed in it. Make sure that the shapes carry the entire page design forward.

A responsive web design is important, and your typography is one of the most obvious elements in your web design. Use the tools and the applicable scales available today as according to your own needs. Maintain your intent in every page of your website. Succeed in making your website’s overall content and feel as harmonious with the effective use of typography.

If you need help and wish to speak with any of our Web Designers, feel free to contact us.

A Modern Scale for Web Typography
Typography Websites

Leave a Reply