Contents  >

Introduction to Fluid Typography

Learning Goals

At the end of this Tutorial you will be able to:

You can view finished versions of the three sample web pages you will update with fluid typography in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.

You created these three sample web pages and their linked stylesheets in the previous Working with Sections Tutorial and made them responsive with the Introduction to Media Queries Tutorial

Sample image page-10.html
Sample image page-11.html
Sample image page-12.html

Contents

About fluid typography

Minimum (320px) and maximum (1600px) viewport widths

Fluid typography: browser resets

The fluid typography equation

Updating your style-10.css stylesheet

Updating your style-11.css stylesheet

Updating your style-12.css stylesheet

Uploading your CSS files to GitHub

About fluid typography

Fluid typography means that the font sizes of text – headings, paragraphs, bulleted lists, menu items – on a web page ‘scale’ (shrink or expand) smoothly according to the width of the user’s viewport (screen).

The animated gif below is taken from an article on the CSS Tricks website that features the widely-used implementation of the fluid typography approach developed by Australian web designer Mike Riethmuller.

fluid typography

Minimum (320px) and maximum (1600px) viewport widths

To use fluid typography in your web pages, you need to decide on two values:

You will use both the 320px and 1600px values in the so-called fluid typography equation when setting fluid values for the font-size rule in CSS.

Fluid typography: browser resets

When using the fluid typographic equation, it is best to update the web browser resets in your stylesheet file as follows:

/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none; box-sizing: border-box }
html { height: 100% }
body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }  
img { width: 100%; height: auto; display: block }

You can see that this new browser reset block includes the maximum (1600px) viewport width.

The fluid typography equation

You are now ready to use the fluid typography equation from Mike Riethmuller.

At first sight, the fluid typography equation looks complex. But it becomes easy to work with if you remember the following two points:

For example, in the case of paragraph text, you might:

Your fluid typography equation for text paragraphs would then be as shown below.

p {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) /(1600 - 320)));
}

As for the other values in the equation:

As you can see from the four examples of fluid font sizes below, you only ever need to change the smallest and largest font size values.

fluid type examples

Here are some examples of web pages that did not use fluid typography to scale font sizes correctly for mobile phone screens.

fluid type examples

In the remainder of this Tutorial, you will update with fluid font-size values in the stylesheet files for the page-10.html, page-11.html and page-12.html sample web pages you created previously.

Updating your style-10.css stylesheet

Follow these steps to add fluid font-size values to the stylesheet for the page-10.html sample web page you created in a previous Tutorial.

  1. In VS Code, open the style-10.css stylesheet file.
  2. At the top of the stylesheet file, replace the current web browser resets by copying and pasting the following:
    /*  ============= WEB BROWSER RESETS ============ */
    * { margin: 0; padding: 0; border: none; box-sizing: border-box }
    html { height: 100% }
    body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }  
    img { width: 100%; height: auto; display: block }
    
  3. For the h1 main heading selector, update the font-style property from the fixed value of 84px by copying-and-pasting this fluid value:
      font-size: calc(44px + (84 - 44) * ((100vw - 320px) / (1600 - 320)));
    
  4. For the h2 sub-heading selector used to style the introduction text, update the font-style property from the fixed value of 28px by copying-and-pasting this fluid value:
      font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (1600 - 320)));
    
  5. For the h3 sub-heading selector, update the font-style property from the fixed value of 48px by copying-and-pasting this fluid value:
      font-size: calc(26px + (48 - 26) * ((100vw - 320px) / (1600 - 320)));
    
  6. And for the text paragraphs styled with the p selector, update the font-style property from the fixed value of 20px by copying-and-pasting this fluid value:
      font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1600 - 320)));
    
  7. Save the style-10.css stylesheet and view your page-10.html page in your web browser.   Use your browser’s viewport resizing feature to check the font sizes display correctly down to a minimum viewport width of 320 pixels.

Click page-10.html to view a finished sample of this web page in a new tab of your web browser.

Updating your style-11.css stylesheet

Follow these steps to add fluid font-size values to the stylesheet for the page-11.html sample web page you created in a previous Tutorial.

  1. In VS Code, open the style-11.css stylesheet file.
  2. At the top of the stylesheet file, replace the current web browser resets by copying and pasting the following:
    /*  ============= WEB BROWSER RESETS ============ */
    * { margin: 0; padding: 0; border: none; box-sizing: border-box }
    html { height: 100% }
    body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }  
    img { width: 100%; height: auto; display: block }
    
  3. For the h1 main heading selector, update the font-style property from the fixed value of 84px by copying-and-pasting this fluid value:
      font-size: calc(32px + (84 - 32) * ((100vw - 320px) / (1600 - 320)));
    
  4. For the h2 sub-heading selector used to style the introduction text, update the font-style property from the fixed value of 32px by copying-and-pasting this fluid value:
      font-size: calc(22px + (32 - 22) * ((100vw - 320px) / (1600 - 320)));
    
  5. For the h3 sub-heading selector, update the font-style property from the fixed value of 48px by copying-and-pasting this fluid value:
      font-size: calc(28px + (48 - 28) * ((100vw - 320px) / (1600 - 320)));
    
  6. And for the text paragraphs styled with the p selector, update the font-style property from the fixed value of 21px by copying-and-pasting this fluid value:
      font-size: calc(19px + (21 - 19) * ((100vw - 320px) / (1600 - 320)));
    
  7. Save the style-11.css stylesheet and view your page-11.html page in your web browser.   Use your browser’s viewport resizing feature to check the font sizes display correctly down to a minimum viewport width of 320 pixels.

Click page-11.html to view a finished sample of this web page in a new tab of your web browser.

Updating your style-12.css stylesheet

Follow these steps to add fluid font-size values to the stylesheet for the page-12.html sample web page you created in a previous Tutorial.

  1. In VS Code, open the style-12.css stylesheet file.
  2. At the top of the stylesheet file, replace the current web browser resets by copying and pasting the following:
    /*  ============= WEB BROWSER RESETS ============ */
    * { margin: 0; padding: 0; border: none; box-sizing: border-box }
    html { height: 100% }
    body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }  
    img { width: 100%; height: auto; display: block }
    
  3. For the h1 main heading selector, update the font-style property from the fixed value of 84px by copying-and-pasting this fluid value:
      font-size: calc(48px + (84 - 48) * ((100vw - 320px) / (1600 - 320)));
    
  4. For the h2 sub-heading selector used to style the introduction text, update the font-style property from the fixed value of 28px by copying-and-pasting this fluid value:
      font-size: calc(22px + (28 - 22) * ((100vw - 320px) / (1600 - 320)));
    
  5. For the h3 sub-heading selector, update the font-style property from the fixed value of 48px by copying-and-pasting this fluid value:
      font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1600 - 320)));
    
  6. And for the text paragraphs styled with the p selector, update the font-style property from the fixed value of 21px by copying-and-pasting this fluid value:
      font-size: calc(17px + (21 - 17) * ((100vw - 320px) / (1600 - 320)));
    
  7. Save the style-12.css stylesheet and view your page-12.html page in your web browser.   Use your browser’s viewport resizing feature to check the font sizes display correctly down to a minimum viewport width of 320 pixels.

Click page-12.html to view a finished sample of this web page in a new tab of your web browser.

Uploading your CSS files to GitHub

Upload the following three stylesheet files to your account on GitHub:

style-10.css
style-11.css
style-12.css

Your updated web pages with the fluid font sizes will be published at web addresses similar to the following:

https://username.github.io/page-10.html
https://username.github.io/page-11.html
https://username.github.io/page-12.html

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.