When it comes to web design, the correct use of fonts plays a huge role. This is par­tic­u­lar­ly true of re­spon­sive 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­spon­sive ty­pog­ra­phy, explain how to implement this using CSS, and give sources for re­spon­sive web fonts. To kick things off, we start with a run-down of the basics of ty­pog­ra­phy and font in re­spon­sive web design. 

What is ty­pog­ra­phy?

The term ty­pog­ra­phy orig­i­nal­ly 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­ducible text. Since the birth of in­for­ma­tion tech­nol­o­gy, the term has grown to encompass further aspects of writing. Ty­pog­ra­phy 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­pog­ra­phy can be split into two cat­e­gories: mi­croty­pog­ra­phy and macroty­pog­ra­phy. The term mi­croty­pog­ra­phy relates to the design of the font as well as the character and word spacing. Macroty­pog­ra­phy, 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­pog­ra­phy in digital media and online

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­pog­ra­phy. This is rooted in tra­di­tion­al ty­pog­ra­phy, as the read­abil­i­ty 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­sal­ly com­pat­i­ble, 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­po­rary texts are almost ex­clu­sive­ly 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­spon­sive web design

Since its be­gin­nings, web ty­pog­ra­phy has evolved massively, but re­spon­sive design still presents web designers with new chal­lenges. Re­spon­sive web design is a commonly used web design technique whereby the display of a website’s image details are com­pat­i­ble with all devices and optimized for the size of the re­spec­tive 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­te­grat­ed into the overall com­po­si­tion. The typeface should therefore be adaptable to all screen sizes. Here are some more factors that should be con­sid­ered when using re­spon­sive ty­pog­ra­phy:

  • The font size should not only fit the display size, but also co­or­di­nate 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­o­lu­tion.

  • The line spacing should always be adapted to the screen window, and should be con­sid­ered in relation to line length for optimum read­abil­i­ty.

  • It is also necessary to in­cor­po­rate adequate space for the ty­pog­ra­phy in the page format in order to create a smooth and ef­fort­less reading ex­pe­ri­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­spon­sive font size in web design

In re­spon­sive ty­pog­ra­phy, 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­mate­ly read as pixelated graphics. In re­spon­sive web design, using vector fonts guar­an­tees the read­abil­i­ty 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­ize the text by in­te­grat­ing CSS into the site. For help with finding the perfect font and technical im­ple­men­ta­tion with CSS, check out the rest of our series!

Go to Main Menu