Responsive typography - part 1: the basics

When it comes to web design, the correct use of fonts plays a huge role. This is particularly true of responsive web design, in which the font has a strong influence over a user’s perception of a website. In our three-part series, we outline the basics of responsive typography, explain how to implement this using CSS, and give sources for responsive web fonts. To kick things off, we start with a run-down of the basics of typography and font in responsive web design. 

What is typography?

The term typography originally referred to the art of moveable type printing. The concept is thus linked with the evolution of writing and the invention of the printing press to create reproducible text. Since the birth of information technology, the term has grown to encompass further aspects of writing. Typography is now understood as font design and its uses in all written forms, including digital texts presented on websites and in computer programs.  

Typography can be split into two categories: microtypography and macrotypography. The term microtypography relates to the design of the font as well as the character and word spacing. Macrotypography, on the other hand, covers all aspects of page layout: format, type area, font size, line width and spacing, and placement of other graphic elements (i.e. images).

Typography online and in digital media

The term font refers to a digital character set. The design of a font within a digital text document and online is known as web typography. This is rooted in traditional typography, as the readability of an online text depends on font size, line length, and the line spacing, amongst other things. When creating digital texts, it is also important to take into consideration file format and display techniques.

The use of different fonts online has changed a great deal over time. In the past, there were limited ways to present a text in a browser; only a few fonts like Times New Roman or Arial were universally compatible, since they were installed on the majority of computers and could be accessed by websites. Nowadays, many different styles can be used in the form of web fonts. Web fonts are typefaces, which a computer can load from the internet using CSS and the displayed website. Whether they use web fonts or locally installed fonts, contemporary texts are almost exclusively written with vector fonts, which look sharp in all zoom levels and are displayed in the browser via a pixel array. The most common format for vector fonts are TrueType (TTF) and OpenType (OTF).

Font in responsive web design

Since its beginnings, web typography has evolved massively, but responsive design still presents web designers with new challenges. Responsive web design is a commonly used web design technique whereby the display of a website’s image details are compatible with all devices and optimised for the size of the respective screen. A website’s content must be adaptable to different screen sizes for optimal display on all devices, including smartphones, tablets, laptops, and desktops. This has a direct impact on font size, which should be smoothly integrated into the overall composition. The typeface should therefore be adaptable to all screen sizes. Here are some more factors that should be considered when using responsive typography:

  • The font size should not only fit the display size, but also coordinate with the average distance between the viewer and the display. For example, users are normally closer to a smartphone screen than to that of a desktop computer.

  • Font size also depends on screen resolution.

  • The line spacing should always be adapted to the screen window, and should be considered in relation to line length for optimum readability.

  • It is also necessary to incorporate adequate space for the typography in the page format in order to create a smooth and effortless reading experience.

In addition, texts should appear slightly brighter and the contrast should be somewhat stronger on small screens than on a PC monitor. Unlike large displays, people use more compact screens not only indoors but also on the go, so the quality should not be impaired by lighting conditions. It is crucial that text remains legible not only on small displays, but also in strong and dim lighting, or with reflections on the screen, and a strong font will do this.

Responsive font size in web design

In responsive typography, vector fonts should be used to create an optimal display for text on all devices. Vector fonts are freely scalable and do not reduce in quality when enlarged. This feature sets them apart from bitmap fonts, which are simply displayed with pixels. However, as with other vector graphics, vector fonts cannot be displayed on a computer screen without a format conversion, since these screens are built for raster graphics. Vectors therefore should go through a screening where vector fonts are ultimately read as pixelated graphics. In responsive web design, using vector fonts guarantees the readability of a typeface. But it doesn’t have to be a choice of the narrow selection of those all-too-familiar, pre-installed fonts; it is also possible to personalise the text by integrating CSS into the site. For help with finding the perfect font and technical implementation with CSS, check out the rest of our series!

Was this article helpful?