How can we use fonts responsively in our mobile design?

Scaffolding the front end series

Created on: May 17, 2017

Updated on: September 20, 2017

The problem?

How can we improve the mobile experience for our users browsing our website from a device. The font that appear can be hard to read and if you pinch and zoom the font doesn’t scale as best as it could.

What is responsive web design ?

Responsive web design is the development of design techniques that respond to user's behaviour and environment based on the screen size, platform and orientation through the use of css media queries.

We are going to discuss the merits of using differing font types in a mobile design as a means to improving the visual appearance of your mobile screens.

What is a media query?

We will refer to the definition of a media query from the Mozilla Developer Network defines it as:

A media query consists of a media type that limit the style sheets' scope by using media features, such as width, height, and colour.

This allows the content to be tailored to a specific range of output devices without having to change the content itself.

Desktop

Take a look at the following snippet, it consists of a media query that is used on the desktop.

resources/assets/sass/base/typography.scss
@media screen and (min-width: 981px) and (max-width: 1381px) {

p {
  font-family: $lato;
  font-size: 1em;
  font-weight: 200;
  line-height: 18px;
  color: #f9f1dc;
}

h2 {
  font-family: $lato;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 39px;
}

}

As you can see we have different sizes for the paragraphs and headings within our HTML markup.

We can see the rendered page that this media query refers to in the following screenshot:

web development for small business

Tablet

Take a look at the next snippet, it consists of a media query that is used on a tablet.

resources/assets/sass/base/typography.scss
@media screen and (min-width: 481px) and (max-width: 980px)  {

p {
  font-family: $lato;
  font-size: 0.5em;
  font-weight: 200;
  line-height: 18px;
  color: #f9f1dc;
}

h2 {
  font-family: $lato;
  font-weight: 600;
  font-size: 1em;
  line-height: 39px;
}

}

Notice how the heading and paragraphs are of a smaller size.

This is so that the headings and paragraphs scale down proportionally when the viewing area is resized.

Mobile

We will tweak our code, and change the font to Montserrat.

This font is extremely useful for users who are used to viewing text on mobile phones.

This is because of the style, pitch and kerning of the lettering makes it easier to see on your phone.

Take a look at the snippet listed below it consists of a media query for mobile.

resources/assets/sass/base/typography.scss
@media all and (min-width: 100px) and (max-width: 480px) {

    h2 {
    font-family: $montserrat;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 39px;

  }

    p {
    font-family: $montserrat;
    font-weight: 200;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
    padding: 0;
    margin: 0;
  }

}

As you can see the text looks like its bold and it doesn’t strain your eyes when you are looking this font.

This is how we can use fonts to customise the look at feel of a web page on mobile devices.

We can use media queries within a responsive design toolset to alter the font sizes to ensure users can have the best experiences for mobile devices.

We can change the font to Montserrat this has better kerning and spacing and it helps to stop users from using pinch and zoom to view your text on a mobile device.

Lets take a look at a screenshot of the finished mobile screen.

web development for small business

Take a look at the montserrat font and add it to your mobile devices to increase the number of hits on your web application.