How can we use fonts responsively in our mobile design?

Responsive pages on mobile devices

Responsive web design is the new default when it comes to the development of website applications across the plethora of devices we use to consume the internet.

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.

In our case we will be using the about page in our gamesstation website to help demonstrate this.

Firstly take a look at the picture below that shows the about page in its desktop view.

resources\views\about.blade.php

About page in desktop mode

We are going to concentrate on the textual elements of the page. Please take a look at the code that is used in the following media query to display the text on the page.

Desktop

resources/assets/sass/base/typography.scss

@media screen and (min-width: 981px) and (max-width: 1381px) {
p {
font-family: $lato;
font-size: 12px;
font-weight: 200;
line-height: 18px;
color: #f9f1dc;
}
h2 {
font-family: $lato;
font-weight: 600;
font-size: 1.5em;
line-height: 39px;
}
}

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 an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Tablets

We will use the exact same css code for tablets:

resources/assets/sass/base/typography.scss

@media screen and (min-width: 481px) and (max-width: 980px) {
p {
font-family: $lato;
font-size: 12px;
font-weight: 200;
line-height: 18px;
color: #f9f1dc;
}
h2 {
font-family: $lato;
font-weight: 600;
font-size: 1.5em;
line-height: 39px;
}
}

Mobile

This is where we will tweak our code to introduce a new font that will make it easier for mobile devices to use.

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

Montserrat font

The montserrat 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.

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

About page in mobile font

As you can see the text looks like its bold and it doesnt 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.

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

Over the next few weeks we will be releasing additional articles from this series and we hope that you have learnt something from our tutorials.

Stay tuned…….

Like what you read? Give Sehinde Raji a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.