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.
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).
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).
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 optimized 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:
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.
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 personalize 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!
Web-safe fonts refer to fonts that can be used on the web without safety concerns. The key factor here is whether the respective fonts can be displayed correctly by as many browsers as possible. Here, we reveal why the list of safe web fonts continues to expand and why web fonts play an important role in a successful online presence for a company.
Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.
Since the introduction of web fonts, designers have enjoyed a massive increase in options for responsive typography. Their scalability means these fonts are displayed perfectly on every device, making these a perfect solution for responsive design. With thousands of free web fonts available from multiple online platforms, it’s now easier than ever before to find the perfect font for your website....
Developing new digital products can easily become an expensive investment. What can help you to make a decision in advance about whether the effort will pay off? Include users in the product development process. This approach, which benefits the company and customers equally, is called user-centered design.
Modern websites are viewed on a large variety of devices, from smartphones with small screens to high-resolution 4K monitors. A responsive design is key to catering to this large range of media. Layout, typography, images, and navigation are designed so that they work smoothly on any device.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
