Thoughts

Typography on the web – from Verdana to variable fonts

Typography on a website is a crucial part of the overall impression. Previously, technical limitations caused frustration, but now there is finally light at the end of the tunnel.

Roman stone with carved letters.

Typography in the early days of the web

When the World Wide Web was introduced to the public in the early 1990s, web typography was very simple and limited. The first web pages were largely text-based. The browser determined which font would be displayed and used the few standard fonts available on users' computers. This resulted in a web where typography was dull and uniform, with very limited design possibilities.

The introduction of CSS

A significant milestone for web typography was the introduction of Cascading Style Sheets (CSS) in the late 1990s. This allowed designers to specify which fonts should be displayed on a page. However, it still required that users had the font installed on their computers, which was often not the case. As a result, it did not gain widespread adoption until about 10 years later.

Text images and new solutions

With increased web traffic in the early 2000s, there was a significant rise in demand for more sophisticated text design. Websites began using text images to incorporate various fonts. A major issue with this approach was that the text could not be highlighted or searched. Additionally, creating images for all the text that required a specific font was time-consuming.

At the end of the 2000s, font services like Google Fonts and Adobe Typekit (now Adobe Fonts) emerged. These services made it possible to easily load external fonts onto websites. This finally allowed websites to use fonts that were previously unavailable on the web in a smooth manner, and they met all accessibility requirements (as long as the chosen font was legible).

Typography on the web today

Today, there are hardly any limitations left when it comes to using typography on the web. The biggest challenge now is complicated licensing models, which often vary significantly between different font vendors. Some fonts, especially classic ones, can become prohibitively expensive. As a result, large companies with substantial web traffic often create their own custom fonts to retain ownership of the license. Despite the complexities of licensing, the possibilities for typography are nearly unlimited, allowing businesses and organizations to achieve a complete and cohesive brand experience across all channels, including digital platforms.

Five tips for choosing fonts for your website

If you're about to choose fonts for your website, these are things to keep in mind:

1. Readability

The most important thing is that the fonts are actually readable and compliant with digital accessibility standards. Therefore, choose a simple and clear typeface. Conduct tests with different users to ensure high readability.

2. Hierarchy

Eyes are naturally drawn to areas with vibrant colors. Therefore, it can be effective to use a bolder typeface for headings and a lighter one for body text. This helps clearly indicate where a section begins and ends for the reader.

3. Consistency

Avoid using too many different typefaces. Typically, two fonts are sufficient. Also, try to stick to a maximum of five or six different sizes or styles consistently throughout the website.

4. Branding

Of course, you should use the typeface included in your company's or organization's graphic profile, if possible. Sometimes, however, the typeface might be too expensive or not suitable for screen readability. In such cases, it might be worth updating the graphic profile to choose a typeface that works well both in print and on screen for a cohesive brand experience.

5. Trends

Like many other design elements, typography trends come and go. Unless you’re running a fashion site, it’s better to choose a typeface that suits your brand, meets your needs, and stands the test of time. Trendy fonts often become overused quickly and can quickly become outdated.


Want to know more?

Johan Söderberg

Johan Söderberg

Head of Design & Strategy

johan.soderberg@esatto.se