When it comes to web design, the correct use of fonts plays a huge role. This is par­tic­u­larly true of re­spons­ive web design, in which the font has a strong influence over a user’s per­cep­tion of a website. In our three-part series, we outline the basics of re­spons­ive ty­po­graphy, explain how to implement this using CSS, and give sources for re­spons­ive web fonts. To kick things off, we start with a run-down of the basics of ty­po­graphy and font in re­spons­ive web design. 

What is ty­po­graphy?

The term ty­po­graphy ori­gin­ally 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 re­pro­du­cible text. Since the birth of in­form­a­tion tech­no­logy, the term has grown to encompass further aspects of writing. Ty­po­graphy is now un­der­stood as font design and its uses in all written forms, including digital texts presented on websites and in computer programs.  

Ty­po­graphy can be split into two cat­egor­ies: mi­cro­ty­po­graphy and mac­ro­ty­po­graphy. The term mi­cro­ty­po­graphy relates to the design of the font as well as the character and word spacing. Mac­ro­ty­po­graphy, 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).

Ty­po­graphy 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 ty­po­graphy. This is rooted in tra­di­tion­al ty­po­graphy, as the read­ab­il­ity 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 con­sid­er­a­tion file format and display tech­niques.

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 uni­ver­sally com­pat­ible, 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, con­tem­por­ary texts are almost ex­clus­ively 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 re­spons­ive web design

Since its be­gin­nings, web ty­po­graphy has evolved massively, but re­spons­ive design still presents web designers with new chal­lenges. Re­spons­ive web design is a commonly used web design technique whereby the display of a website’s image details are com­pat­ible with all devices and optimised for the size of the re­spect­ive screen. A website’s content must be adaptable to different screen sizes for optimal display on all devices, including smart­phones, tablets, laptops, and desktops. This has a direct impact on font size, which should be smoothly in­teg­rated into the overall com­pos­i­tion. The typeface should therefore be adaptable to all screen sizes. Here are some more factors that should be con­sidered when using re­spons­ive ty­po­graphy:

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

  • Font size also depends on screen res­ol­u­tion.

  • The line spacing should always be adapted to the screen window, and should be con­sidered in relation to line length for optimum read­ab­il­ity.

  • It is also necessary to in­cor­por­ate adequate space for the ty­po­graphy in the page format in order to create a smooth and ef­fort­less reading ex­per­i­ence.

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 con­di­tions. It is crucial that text remains legible not only on small displays, but also in strong and dim lighting, or with re­flec­tions on the screen, and a strong font will do this.

Re­spons­ive font size in web design

In re­spons­ive ty­po­graphy, 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 con­ver­sion, since these screens are built for raster graphics. Vectors therefore should go through a screening where vector fonts are ul­ti­mately read as pixelated graphics. In re­spons­ive web design, using vector fonts guar­an­tees the read­ab­il­ity 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 per­son­al­ise the text by in­teg­rat­ing CSS into the site. For help with finding the perfect font and technical im­ple­ment­a­tion with CSS, check out the rest of our series!

Go to Main Menu