IT Best Practices

What You Should Know about Web Typography

Typography has become an important part of creating a successful website layout. But typography itself means so much more than just finding the right font. Figuring out how to properly lay out a text to a reader is how you’ll be able to create a legible, hierarchical text. In an article for Business 2 Community, Tyler Keenan gives the basics of how to excel at web typography.

Fast Track to Fantastic Typography

The first step to creating a cohesive text is to figure out which kind of font to use. The key here is to pick fonts with large x-heights (literally the height of the letter x on screen) so they will show up better on digital displays. The character set you’ll decide on will depend on how local or international your text will be. If there’s a good chance it will be translated, a larger character set will ensure the font can be retained across countries.

With fonts that come in families (roman, bold, italic, etc.), keep your font usage simple. The more fonts used, the more a site will have to process when loading a page. With that in mind, web fonts provided by Google can be used to ensure a wide variety of fonts are at your disposal.

The next step is to set the digital type so you can have a text that is easily readable. Here are Keenan’s tips for this:

  1. When setting the body type on the web, the ideal point size is usually around 16 or 18 pixels, depending on the font.
  2. The ideal line length is usually around 65 characters (including spaces), though anything between 45 and 85 or so is probably fine as well.
  3. The space between lines should be 120-150% the point size. Note: Contrary to what you might think, smaller type should have more space between lines, not less. This is so that the eye can easily distinguish one line from the next.

The next step is to create hierarchy within your text. Basically, it’s a way of creating meaning between elements by their proximity and similarity. An example would be the title of this article being a different size and font to show that it’s the title. The paragraphs are closer together to show that they are related ideas that link into a single article.

Web typography is ultimately a component of editorial design, which includes how pictures are inserted, how headlines are grouped, and so on and so forth. For additional information and some examples, you can view the original article here:

Show More

Leave a Reply


We use cookies on our website

We use cookies to give you the best user experience. Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.