The Importance of Typography on the Web

Does this ever happen to you? Peering really close to the screen because the typeface is so small? I often find myself zooming in on web pages because I cannot read the text. It’s extremely annoying.

The readability of text on your website or online communication is instrumental in affecting the way people read it. It is not only your choice of words – a suitable, standard font also has an important role to play in this. The font size, line length, and line spacing also affect how readable your text is.

Online and print typography are not the same

When I first moved from print to online, I have to admit that it took me some time to become accustomed to the fact that everything on the web can be slightly larger. I started out in the world of newspapers, where a font size of 9 or 10 px is quite normal for the main body of the text. I still recall my first online publication: a huge font size for the headings and a tiny font for the main body of the text. That was completely the wrong idea. The main body text should have been twice as big, at least 16 px. And, of course, the headings could also be more subtle. Initially, I found it weird, but have now become totally used to it.

There is logic behind this because the proportions are very different on the web. Just think about it: you often sit further away from your screen than a newspaper, brochure, or magazine. In a web publication, you, therefore, need a larger font size, because the distance makes the font look smaller. But that’s not all. The line length is also important, as is the line spacing. But how do you decide what is the ideal font size, line length, and spacing? I think that this varies depending on the font because they differ quite a lot in terms of their dimensions. I am not sure whether there are any ideal guidelines, but having done some research, I have come up with the following list

Typography Guidelines

Font size: 16px or larger
Line length: 45 to 75 characters
Line spacing: 1.4 times the font size

The above are average sizes, but if your font is on the small or narrow side, you should feel free to opt for a pixel higher.

Processing fluency: attractive or readable?

Time for some science. Our brains are sensitive to changes within a message. You may think I am referring to your choice of vocabulary, but the font you choose also plays an important role. If you want to encourage your reader to read on, make sure you use the right font. Processing fluency, in other words, the ease with which our brains process information, is extremely important in this. Choosing a good font for your online work may seem like a triviality, but it actually affects the way we act, even though we are unaware of it.

A font has an influence on how readable text is. For example, easy-to-read fonts like Helvetica and Verdana can be processed in a split second. The same cannot be said for more creative fonts (such as the handwritten styles) that are more difficult to read.

But choosing a creative, handwritten font actually has another positive impact on how readable a text is. It comes across as more personal and makes the meaning of the message more credible. So should you opt for attractive or readable? Choose the best of both worlds – in other words, a clear, legible font like Arial, Helvetica or Verdana and intersperse it with creative fonts, in a quote, for example.

“A quote can provide a place to rest within the text.”

But this does not even begin to explore all the different fonts that you could use! The emergence of such tools as Typekit and Google Fonts now means that countless new web fonts have begun to appear alongside the classic fonts. They tend to be somewhat fresher than the classic fonts, giving your publication or website a slightly lighter look and feel.

Installing the Skyfonts tool for Windows or Mac OSX makes it possible to download webfonts from Google Fonts at the click of a mouse. It is easy to add fonts by clicking on the plus sign and they will be neatly stored in the tool. The ultimate advantage of Skyfonts is that, after installing them, you can use the fonts immediately in the projects you are working on. You probably know the problem: if you install a new font separately, you have to start by searching for it in downloads before opening it in your font library and saving it. There is also the issue of having to save all the regular, bold and italic versions separately, whereas with Skyfonts, you can save complete font families that work straight away. What could be better? There is the added advantage that the websites Fonts.com, Linotype, Monotype and My Fonts are all affiliated with Skyfonts, enabling you also to add paid-for fonts.

Watch your words!

Finally, your choice of words matters. We probably do not need to tell you this, but not everyone makes sure that the texts they write are actually suitable for the target reader. You should adopt a lighter style for younger readers, but be more elaborate when addressing older readers who require greater depth. Keep your target audience in mind, because those are the people you’re aiming to attract. If you are successful, the reader is likely to come back for more.

Take account of your responsive design

No doubt you have noticed that a change is underway in web design, as a result of which almost all productions, websites and other things on the web have become responsive. This means that all content on a page resizes itself, enabling it also to be viewed equally well on your tablet or smartphone. This has repercussions for the typography in a web design and means you should take account of colors, fonts and font sizes. Creating a responsive design is important, but takes time to achieve.

With the Foleon tool, it is easy to apply it in your online publication. Because it is possible to adapt the colors, font types, and font sizes for mobile in the overall theme style as well as the page style and item style at page level, you can set your pages as responsive in no time at all.

You might also like:

• Inbound Marketing Content Types You Should Be Creating
• Email Marketing Tips for Promoting your eBook
• White Paper Marketing Tips
• How to Promote a Digital Magazine

Author bio

Ritesh is a digital marketing manager with years of experience in driving growth. He’s currently the director of inbound marketing at Foleon. You can find more about him on his LinkedIn profile.

Interesting articles

• Top Graphic Design Trends 2024
• Food Blog Post Title Examples
• YouTube Video Shorts Statistics
• Real Estate YouTube Video Title Examples
• How to Create a Digital Magazine