How to implement ty­po­graphy in re­spons­ive web design with CSS

Re­spons­ive fonts ensure that text remains easy to read on any device. Instead of using fixed pixel values, the ty­po­graphy adapts dy­nam­ic­ally to the screen width. In CSS, re­spons­ive web design fonts can be im­ple­men­ted easily using flexible units or modern functions.

Which font is suitable for re­spons­ive web design?

To ensure the text on your website is displayed optimally on every screen, use a font based on vectors in re­spons­ive web design. For example, you can use ready-made web fonts. When choosing ty­po­graphy, make sure the font is legible and matches your intended effect. For headings, the typeface can be a bit more playful—but you should def­in­itely avoid that in body text, as it makes reading un­ne­ces­sar­ily difficult over time.

Your font colour should create a suitable contrast with the website back­ground. It shouldn’t be too pale; otherwise, legib­il­ity will suffer. If you’re unsure about contrast, browser tools like Colour Contrast Check or the WebAIM Contrast Checker can help you preview how a font colour and back­ground colour work together and ex­per­i­ment with different shades.

In­teg­rat­ing re­spons­ive fonts via Media Queries

Since the in­tro­duc­tion of CSS Media Queries in CSS3, you have a useful option for im­ple­ment­ing a re­spons­ive web design font and adaptive ty­po­graphy. Media Queries detect certain char­ac­ter­ist­ics of a device, which are used to adjust the display of your website’s texts to the users’ end devices. These char­ac­ter­ist­ics include:

• Screen res­ol­u­tion
• Width and height of the browser window
• Screen ori­ent­a­tion

Truly re­spons­ive ty­po­graphy in CSS doesn’t work well with fixed pixel values, because a pixel is a static unit. To make type scale smoothly across devices, you need flexible meas­ure­ments. That’s why font sizes should be defined using relative units such as em, rem, or per­cent­ages.

To implement and fine-tune re­spons­ive ty­po­graphy with media queries, you typically use these CSS de­clar­a­tions:

• Use @font-face to embed a web font on your page.
• Use @media queries to adapt ty­po­graphy to different screen widths, e.g., @media screen and (min-width: 800px).
• Use font-size to set the font’s display size—either in pixels or, prefer­ably, in relative units like em.

Create re­spons­ive headings with Media Queries

Headings are styled in CSS using the tags h1, h2, h3, etc. You can assign different relative display sizes to a heading using the em unit. The example below demon­strates how to display the first heading (h1) in multiple relative sizes, starting from a font size of 100% (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-size: 1.5em;
}
}

In this example, four different display vari­ations are set for h1. Which of these four font sizes is used depends on the width of the browser window, which is de­term­ined by the maximum width (max-width).

The width in the example is specified using the em unit. Since no fixed text size was defined be­fore­hand, the value is based on the standard setting of the browser used—typically 16 pixels. Since 1em equals exactly 16px, you can easily calculate the desired widths by dividing the pixel number by 16. In the example, the h1 font size responds to four window widths:

• over 1024 px,
• up to 1024 px (64em),
• up to 800 px (50em) and
• up to 480 px (30em).

For a longer headline, it may break into multiple lines in smaller viewports. In that case, you should also adjust the line spacing of the headline re­l­at­ively—how to implement this will be explained in the next section.

Re­spons­ive body text with em

As with the headlines, set the font size for a text paragraph (p) to 100 percent. Here, the font size is also defined using the em unit. The im­ple­ment­a­tion of different font sizes based on the four pre­vi­ously defined viewport widths in CSS looks like this:

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%;
}
}

Since a body value of 100 percent cor­res­ponds to 16 pixels in most browsers, the base font size of the text (font-size: 1.5em) in our example is 24 pixels (1.5 × 16 = 24). You implement re­spons­ive ty­po­graphy using the font-size de­clar­a­tions; relative to the body, the font size adapts to the window width.

However, once you make the body text on your website re­spons­ive, you need to adjust not only the font size but also the line spacing ac­cord­ingly. According to a basic ty­po­graph­ic principle, line spacing should increase as the lines of text become wider. Another rough guideline is that, for body text, line spacing should be between 120 and 140 percent of the font size (1.2em to 1.4em)—though the ideal value also depends on the typeface used. You implement this with the line-height de­clar­a­tion:

body {font-size: 100%}
p {
font-size: 1.5em;
line-height: 1.3em;
}
h1, h2, h3 {line-height: 1.2em;}

Re­spons­ive main text with rem

As an al­tern­at­ive to em, you can use the relative unit rem (‘root em’) for re­spons­ive body text. The key dif­fer­ence is that rem is based on the root html element (rather than the current element, as with em). This means the font size scales directly in relation to the root element settings, which is es­pe­cially helpful in more complex, deeply nested layouts. CSS rules for re­spons­ive web ty­po­graphy using rem could look like this:

html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2rem;}

The rem unit, however, is not supported by all older versions of web browsers. So, if you want to offer users of older browser versions an appealing design, you should in­cor­por­ate a fallback option using pixels. This might look like the following:

html {font-size: 100%}
p{
font-size: 24px;
font-size: 1.5rem;
}

Integrate re­spons­ive fonts via viewport

Another approach to re­spons­ive web ty­po­graphy is using CSS viewport units. In web design, the viewport refers to the size of the browser window. With viewport-based CSS, you can make page content react to the current window width and scale ac­cord­ingly. Compared with media queries, the ad­just­ment to a new window size can happen more smoothly and quickly.

The following viewport units are available:

• vw (‘viewport width’) – width relative to the browser window
• vh (‘viewport height’) – height relative to the browser window
• vmax (‘viewport maximum’) – the larger of width or height
• vmin (‘viewport minimum’) – the smaller of width or height

All four viewport units are per­cent­age-based values, e.g., 10vw = 10 percent of the window width. With a viewport of 640 × 480 pixels, vmax would refer to 640 pixels (the larger value), so 10vmax would equal 64px (640 ÷ 10).

Create re­spons­ive headlines and body texts via viewport

With the help of viewport units, you can align both the headlines and the main text. The im­ple­ment­a­tion of viewport in­struc­tions is similar to using rem units in media queries—both units are relative:

p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}

Through these CSS commands, you specify, for example, that the char­ac­ters of the body text (p) con­tinu­ously take up 2 percent of the window width or height (font-size: 2vmin)—whichever value is smaller. This ensures that the re­spons­ive web design of the font maintains the same pro­por­tion, even with smaller browser window sections.

Re­spons­ive web ty­po­graphy with clamp()

Another very practical way to create re­spons­ive ty­po­graphy in CSS is through the use of the clamp() function. With clamp(), you can set a font size that auto­mat­ic­ally grows or shrinks with the screen width, yet never becomes smaller or larger than certain limits. The syntax is font-size: clamp(Minimum, Preferred, Maximum);. The following applies:

• Minimum is the smallest font size that is allowed.
• Preferred is the flexible size that dy­nam­ic­ally adapts to the viewport width.
• Maximum is the largest font size that may be achieved.

An example of a headline could look like this:

h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}

The advantage of clamp() over media queries is that the font size scales fluidly without requiring you to define multiple break­points. Therefore, you don’t need separate @media queries for different screen sizes.

Re­spons­ive design starts with ty­po­graphy

Even a handful of CSS rules can make your ty­po­graphy re­spons­ive. After im­ple­ment­ing them, you should still test the result on as many different devices (or emulators) as possible and fine-tune where needed before pub­lish­ing the site.

Whether you rely on media queries or prefer CSS viewport units depends on the situation—and, to some extent, personal pref­er­ence. Media queries tend to scale type a bit more slowly than viewport units, but they’re also supported by more older browsers. On top of that, there are other ways to create re­spons­ive web ty­po­graphy, such as container queries.

No matter which method you choose, the goal is the same which is that ty­po­graphy must adapt to the visible viewport in re­spons­ive web design. That means adjusting font size and line height (usually in relative units) and using vector-based web fonts for crisp rendering.