Typography in responsive web design - part 3: technical implementation with CSS
In the first part of our series on responsive typography, we outlined the importance of designing a responsive typography. In this section, the technical elements take center stage as we examine responsive web design’s inner workings and run through the process of finding the perfect web font and implementing it with CSS.
$1 Domain Names
Register great TLDs for less than $1 for the first year.
Why wait? Grab your favorite domain name today!
Which fonts are ideal for responsive web design?
To ensure that the text on your website is optimized for every screen, you should use responsive fonts based on vectors. You can rely on pre-made web fonts, such as those found on Google Fonts and FontSquirrel, which both offer a good selection of fonts free of charge. When selecting the typography, make sure the font is legible and that it has the desired effect. You can get away with using playful fonts for large headlines, but when it comes to the main text, you should always stay away from typefaces that make reading unnecessarily difficult.
It’s also crucial that the combination of font color and background color results in the optimum contrast; if it’s too pale, it undermines the text’s readability. If you’re unsure about the contrast, you can use browser tools like Colour Contrast Check, which shows the interaction of font and background color, and allows you to experiment with different tones.
Integrating a responsive font with CSS media queries
The introduction of media queries in CSS3 has created an entirely new way of implementing responsive fonts. Media queries recognize specific characteristics of a device like the screen resolution, the width and height of the browser window, and whether the display is in portrait or landscape format. This information is used to align the content display on the users’ devices.
Since pixels have a fixed size, optimal responsive typography can’t be created in CSS by specifying pixel values. Only the application of a flexible unit generates an optimal, responsive typography, so you should determine the size of a web font with relative units like em, rem, or percentage values.
The following CSS declarations can be used for updating and adjusting responsive typography with media queries:
- Start by referencing a font on your page with @font-face
- The media query is needed to adjust the font to a particular device, using @media. The dimensions of the browser window or viewport are also relevant for device-specific display. Combining @media with screen and adding either min-width or max-width allows you to specify the font size for particular widths of the viewport, i.e. @media screen and (min-width: 800px). This way, you can specify when a different font should be used depending on the size of the browser window.
- The property font-size defines the display size of the font – in pixels or relative units like em (character width depends on the font size). em is determined by the pre-specified size of the element whose size is represented by the em value. If the font size is defined solely by em, the value complies with the font size of the parent element.
Find out how to use the CSS commands in the following section.
Create responsive headings with media queries
With the unit em, different relative display sizes can be allocated to h2 headlines. The following sample shows how to display the first headline (h1) in several sizes relative to its h1 full-size (font-size: 100%):
body {font-size: 100%}
h1 {font-size: 3em;}
@media screen and (max-width: 64em) {
h1 {
font-size: 2.5em;
}
}
@media screen and (max-width: 50em) {
h1 {
font-size: 2em;
}
}
@media screen and (max-width: 30em){
h1 {
font-sitze: 1.5em;
}
}
In this example, 4 different display variations for h1 are defined: 3em; 2.5em; 2em; 1.5em. The font size called into action depends on the width of the browser window in use, which is determined by the max width. In this example, the max-width is defined by the unit em. Since no fixed text size was defined in advance, the value of em is defined by the standard settings of the browser used (generally 16 pixels.) In this case, 1em = 16px. This allows a calculation of different widths, to which the font size can be adjusted; the number of pixels in the window width are simply divided by 16. In our example, the h1 display size is defined by 4 different window widths:
- over 1024 pixels
- up to 1024 pixels (1024 : 16 = 64em)
- up to 800 pixels (800 : 16 = 50em)
- up to 480 pixels (480 : 16 = 30em)
Needless to say, you can insert many more of these breakpoints, to realign the typeface, enabling you to adjust your headline perfectly.
In small browser windows, longer headlines can be wrapped across lines. If this is the case, you should adjust the line spacing in relation to the headline. Find out how to do this in the next section.
Using em to create a responsive main text
Just as with the headline, the font size for main text should be set to 100%. The size here is also defined by the unit em. The implementation of different font sizes, based on the four pre-defined window sizes, using CSS looks as follows:
body {font-size: 100%}
p {font-size: 1.5em;}
@media screen and (max-width: 64em) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 50em) {
body {
font-size: 75%;
}
}
@media screen and (max-width: 30em) {
body {
font-size: 50%;
}
}
As the font size defined in the body declaration has the value of 100%, it is equivalent to 16 pixels on most browsers, so the standard font size (font-size: 1.5em) is 24 pixels in our example (1.5 x 16 = 24). And with the font-size property, (90%, 75%, 50%) in relation to the body, the font size adjusts to the window width. After entering these small commands, your font will become responsive.
As soon as you design a responsive body text for your web page, it’s crucial to remember to adjust not only the font size, but also the line spacing. There‘s a typographical principle that states that the wider the lines, the more the vertical spacing increases. According to another rough guideline, the line spacing within the body text should be between 120% and 140% of the font size used (1.2em to 1.4em). But remember, the value is always dependent on the font used.
With the use of the unit em, you can adequately adjust the line spacing to the size of the characters. You can do this with the property line-height:
body {font-size: 100%}
p {
font-size: 1.5em;
line-hight: 1.3 em;
}
h1, h2, h3 {line-height: 1.2em;}
Using rem for responsive main text
em also lends itself to the relative unit rem (‘root em’) for the creation of responsive text. This is because rem is based on the root element html (and not on the respective element like the em unit). The effect of this is that the font size adjusts in direct relation to the complete root element content, which is particularly advantageous when using em for a complex nesting of elements
The CSS declarations for responsive typography using rem look like this:
html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5 rem;}
h3 {font-size: 2rem;}
Unfortunately, not all of the older web browsers support the rem unit. Browsers like Firefox, Chrome, Safari, Edge, or Opera, shouldn’t still be using their outdated versions anyway. Old versions of Microsoft Internet Explorer do not support rem, however, and this can lead to problems, so Explorer users should ensure that they are using at least version 9 of the browser. To ensure that your design also looks attractive to those using outdated browsers, you should use pixels to create a fallback image. A fallback for browsers that do not support rem looks as follows:
html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}
h1 {
font-size: 48px;
font-size: 3rem;
}
h2 {
font-size: 40px;
font-size: 2.5rem;
}
h3 {
font-size: 32px;
font-size: 2rem;
}
Integrating responsive typography with a CSS Viewport
An alternative means of implementing responsive typography is the use of CSS Viewport units. In web design, a viewport is understood as the size of the browser window. CSS also enables the page content to react to the width of the window and scale itself accordingly. The quick adjustment to new window sizes is a great advantage of using media queries.
The CSS viewport units vw (‘viewport width’) and vh (‘viewport height’) define the width and height in relation to the size of the browser window. Similarly, the units vmax (‘viewport maximum’) and vmin (‘viewport minimum’) determine the size in relation to either the height or width of the window. The measure used for adjustment depends on the unit: vmin determines the smaller and vmax the larger values that define the viewport. All 4 viewpoint units are represented by percentage values (i.e. 10vw = 10% of the window width). For a viewport of 640 x 480 by pixels, vmax refers to 640, as the larger value. With a browser window of this size the value 10vmax = 64px (640 : 10).
Again, not every browser supports viewport units. In fact, even fewer browsers are compatible with viewport units than rem units, so be sure to check if your system supports viewpoints here.
Creating responsive headlines and body text with CSS Viewport
Using the viewport unit, you can adjust headlines as well as body text. Implementing viewport commands follows a similar process to the use of rem units with media queries – both units are relative. In the following snippet of code, the main text (p) and the headlines (h1, h2, h3) would be displayed as responsive text:
p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}
This CSS declarations determine that the body text (p) occupies 2% of the window width or height, depending on which value is smaller (font-size: 2vmin). This ensures that the font retains the same ratio to the browser window, even with smaller browser windows.
The size of the first headline (h1) is always 5% of the window width (font-size: 5vw), while the second (h2) amounts to 4% of the window height (font-size: 4vh). The value 3vmin determines that the third and final headline (h3) is always 1% bigger than the main text, since this has the value of 2vmin. As long as the browser window’s proportions stay the same, these 4 CSS commands establish the same size ratio between the font and three headlines – regardless of the size of the browser window.
The website builder from IONOS
MyWebsite is the turnkey solution for your professional web presence, including a personal consultant!
Summary: don’t ignore typography in responsive web design
Using just a few CSS declarations will ensure that your typography will be responsive when displayed on different devices. However, it is advisable to test the results on as many devices (or emulators) as possible before publishing the changes. That way, improvements can be made with as few disruptions on your website as possible.
Media queries and CSS viewport have unique advantages and disadvantages, so the choice of which one is best suited to your project depends largely on your situation and personal taste. While media queries are somewhat slower to resize than viewport units, they are supported by more browsers. Moreover, there are many more ways to generate responsive typography, for example using element queries or a jQuery plugin. All these methods meet the requirements of a responsive typography; in responsive web design, the font should always automatically align itself with the visible display window. Many factors, like adjusting font size or line spacing as well as using webfonts based on vector graphics, all affect the display. Learn more in the second part of our series on responsive typography, where we introduce several free sources for responsive web fonts and explain how you can use them on your web page.
Related articles
Responsive typography - part 1: the basics
The evolution of responsive web design has had a huge effect on typography, and the appearance of a text now needs to be adjustable to any device. Responsive typography therefore needs flexible, adaptable fonts to ensure maximum readability. Learn more in our overview of font in responsive web design.
Icon Fonts
Use icon fonts for integrating vector-based pictograms into your website. In contrast to pixel images, vector graphics have the advantage that they can be scaled up or down without sacrificing quality. With the help of CSS (cascading style sheets) web designers can also integrate other code-based design features. There are many different open source projects available that boast large icon…
How to integrate Icon Fonts
Icons can be easily included in HTML through CSS classes. One of the most popular icon fonts is Font Awesome, which offers more than 600 vector-based pictographs. This open source toolkit has proved popular with its easy use and regular updates. The installation kit contains a pre-configured CSS file, which makes starting out with this toolkit much easier.
The best Web Fonts
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: finding the perfect font
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.…