In the first part of our series on re­spon­sive ty­pog­ra­phy, we outlined the im­por­tance of designing a re­spon­sive ty­pog­ra­phy. In this section, the technical elements take center stage as we examine re­spon­sive web design’s inner workings and run through the process of finding the perfect web font and im­ple­ment­ing it with CSS.

$1 Domain Names – Register yours today!
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

Which fonts are ideal for re­spon­sive web design?

To ensure that the text on your website is optimized for every screen, you should use re­spon­sive fonts based on vectors. You can rely on pre-made web fonts, such as those found on Google Fonts and FontSquir­rel, which both offer a good selection of fonts free of charge. When selecting the ty­pog­ra­phy, 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 un­nec­es­sar­i­ly difficult. It’s also crucial that the com­bi­na­tion of font color and back­ground color results in the optimum contrast; if it’s too pale, it un­der­mines the text’s read­abil­i­ty. If you’re unsure about the contrast, you can use browser tools like Colour Contrast Check, which shows the in­ter­ac­tion of font and back­ground color, and allows you to ex­per­i­ment with different tones.

In­te­grat­ing a re­spon­sive font with CSS media queries

The in­tro­duc­tion of media queries in CSS3 has created an entirely new way of im­ple­ment­ing re­spon­sive fonts. Media queries recognize specific char­ac­ter­is­tics of a device like the screen res­o­lu­tion, the width and height of the browser window, and whether the display is in portrait or landscape format. This in­for­ma­tion is used to align the content display on the users’ devices.

Since pixels have a fixed size, optimal re­spon­sive ty­pog­ra­phy can’t be created in CSS by spec­i­fy­ing pixel values. Only the ap­pli­ca­tion of a flexible unit generates an optimal, re­spon­sive ty­pog­ra­phy, so you should determine the size of a web font with relative units like em, rem, or per­cent­age values.

The following CSS de­c­la­ra­tions can be used for updating and adjusting re­spon­sive ty­pog­ra­phy with media queries:

  • Start by ref­er­enc­ing a font on your page with @font-face
  • The media query is needed to adjust the font to a par­tic­u­lar device, using @media. The di­men­sions 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 par­tic­u­lar 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 de­ter­mined by the pre-specified size of the element whose size is rep­re­sent­ed 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 re­spon­sive 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 vari­a­tions 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 de­ter­mined 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 cal­cu­la­tion 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 break­points, 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 re­spon­sive 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 im­ple­men­ta­tion 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 de­c­la­ra­tion has the value of 100%, it is equiv­a­lent 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 re­spon­sive.

As soon as you design a re­spon­sive 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 ty­po­graph­i­cal 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 ad­e­quate­ly adjust the line spacing to the size of the char­ac­ters. 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 re­spon­sive main text

em also lends itself to the relative unit rem (‘root em’) for the creation of re­spon­sive text. This is because rem is based on the root element html (and not on the re­spec­tive 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 par­tic­u­lar­ly ad­van­ta­geous when using em for a complex nesting of elements

The CSS de­c­la­ra­tions for re­spon­sive ty­pog­ra­phy 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;}

Un­for­tu­nate­ly, 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 at­trac­tive 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;
}

In­te­grat­ing re­spon­sive ty­pog­ra­phy with a CSS Viewport

An al­ter­na­tive means of im­ple­ment­ing re­spon­sive ty­pog­ra­phy is the use of CSS Viewport units. In web design, a viewport is un­der­stood as the size of the browser window. CSS also enables the page content to react to the width of the window and scale itself ac­cord­ing­ly. The quick ad­just­ment 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 ad­just­ment depends on the unit: vmin de­ter­mines the smaller and vmax the larger values that define the viewport. All 4 viewpoint units are rep­re­sent­ed by per­cent­age 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 com­pat­i­ble with viewport units than rem units, so be sure to check if your system supports view­points here.

Creating re­spon­sive headlines and body text with CSS Viewport

Using the viewport unit, you can adjust headlines as well as body text. Im­ple­ment­ing 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 re­spon­sive text: 

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

This CSS de­c­la­ra­tions 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 de­ter­mines 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 pro­por­tions stay the same, these 4 CSS commands establish the same size ratio between the font and three headlines – re­gard­less of the size of the browser window.

Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI as­sis­tance
  • Create cap­ti­vat­ing images and texts in seconds
  • Domain, SSL and email included

Summary: don’t ignore ty­pog­ra­phy in re­spon­sive web design

Using just a few CSS de­c­la­ra­tions will ensure that your ty­pog­ra­phy will be re­spon­sive when displayed on different devices. However, it is advisable to test the results on as many devices (or emulators) as possible before pub­lish­ing the changes. That way, im­prove­ments can be made with as few dis­rup­tions on your website as possible. Media queries and CSS viewport have unique ad­van­tages and dis­ad­van­tages, 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 re­spon­sive ty­pog­ra­phy, for example using element queries or a jQuery plugin. All these methods meet the re­quire­ments of a re­spon­sive ty­pog­ra­phy; in re­spon­sive web design, the font should always au­to­mat­i­cal­ly 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 re­spon­sive ty­pog­ra­phy, where we introduce several free sources for re­spon­sive web fonts and explain how you can use them on your web page.

Go to Main Menu