Typography Series (Part — 2) — Major challenges

Hola folks! This blog series about Typography has two parts

Importance and basic terminology of typography that every frontend developer should know. Check it out here.
Major challenges faced while getting typography right.

If you haven’t already been through basic typography terminology, check it out here. In this blog post, we will be discussing the major challenges we face in order to get the typography right on our websites. So, let’s get started.

Major Challenges

We have been through some terms in Typography world and we are now aware of some fundamentals. Now let’s try to solve some problems we face when we try to set typography of pages of our application.

Let’s see a page with bad typography.

We apply our knowledge step by step to improve the page’s typography and make it look like this.

Different font sizes for different screen sizes

When we move from large desktops to medium screens or tablets or mobile screen which in themselves have a large range of screen sizes, we want our content to adjust and stay readable. To achieve this we can make use of media queries in our CSS files. Adjust font size for different headings and paragraphs to make them look pretty on different screen sizes. But there are hundreds of screen sizes and it’s entirely impossible to make adjustments for each of those.

CSS world has frameworks like bootstrap and gaining knowledge from them, we can try to find a solution to our problem — Breakpoints! Here are some commonly use breakpoints:

xs - 480px - small screen phones
sm - 768px - Tablets and phones
md - 992px - Desktop
lg - 1200px - Wide Desktop

As clearly visible, the second image looks much better for the small screen as compared to the first one. This is the magic of media queries.

Attaining Vertical Rhythm

Firstly, I would like to put some light on what vertical rhythm is. It is a phenomenon of keeping consistent vertical spaces between different elements on the page. Vertical rhythm helps us establish the hierarchy on the page and convey the relation of how different content is connected to each other. It gives a very professional look to our page. To achieve vertical rhythm, we need a base line-height value and compute all our vertical spaces, i.e., margins, paddings, line-heights, as a multiple of that baseline height. To figure out our base line-height, we need to find the value of a vertical space which gets repeated most on our page. For instance, what is the most common margin or line-height or padding we are using in our page? This value would be our base line-height. We will be repeating this value on our page to bring consistency and this repetition has to vary. We definitely don’t want each of our vertical space to be the same. We need to be variable in order to establish hierarchy and relation between different elements of the page. For achieving this variation we will use multiples of our baseline height. We can use either LESS or SASS preprocessor. I am demonstrating using LESS.

@base-line-height: 24px;

p {
line-height: @base-line-height;
margin-bottom: @base-line-height;
}

h2 {
line-height: @base-line-height * 2;
margin-bottom: @base-line-height * 2;
}

h2 {
line-height: @base-line-height * 1.5;
margin-bottom: @base-line-height * 1.5;
}

With help of some CSS, I add these horizontal lines on our page to see how our content is vertically setup. In the first snapshot, you will notice that its pretty bad and there is no hierarchy at all. But as soon as we apply our varying repetition of baseline height, we noticed everything looks pretty good (Snapshot 2).

Update typography throughout the site

Sometimes you decide on your website a typography in terms of font-size for headings and paragraphs, vertical spaces and so on, and you grow your website on that. But at a later stage, you found that something is missing and it’s not fitting the way you presumed. Now you want to change it all through! Wait a minute! Change typography throughout the site, that’s a large amount of work and tedious. Changing each and every page, each and every element throughout the site. But its important you see. You need your work to match your expectation.

Let’s try to think a solution to this. What if we set a base font size for our application and manipulate all other font-sizes and vertical spaces based on that. Now if we think of changing typography to let’s say a bigger font-size or a smaller one, adjust vertical spaces, then all we need to do is to change our base font size and tweak our manipulations around it to handle this scenario.

@base-font-size: 15px;
@base-line-height: 1.6; // Unit less value
@computed-line-height: ceil(@base-font-size * @base-line-height);

p {
font-size: @base-font-size;
line-height: @computed-line-height;
margin-bottom: @computed-line-height;
}

h2 {
font-size: ceil(@base-font-size * 2.15);     // 32px
line-height: @computed-line-height * 2;      // 48px
margin-bottom: @computed-line-height * 2;    // 48px
}

h4 {
font-size: ceil(@base-font-size * 1.6);      // 24px
line-height: @computed-line-height * 1.5;    // 36px
margin-bottom: @computed-line-height * 1;    // 24px
}

Now I want to make things look bigger and all I need to tweak is the following:

@base-font-size: 20px;
@base-line-height: 1.2; // Unit less value
@computed-line-height: ceil(@base-font-size * @base-line-height);

p {
font-size: @base-font-size;
line-height: @computed-line-height;
margin-bottom: @computed-line-height;
}

h2 {
font-size: ceil(@base-font-size * 1.8);      // 36px
line-height: @computed-line-height * 2;      // 48px
margin-bottom: @computed-line-height * 2;    // 48px
}

h4 {
font-size: ceil(@base-font-size * 1.4);      // 28px
line-height: @computed-line-height * 1.5;    // 36px
margin-bottom: @computed-line-height * 1;    // 24px
}

Responsive designs

I know you have stuck too long and I swear this is the last challenge. We have read above that we need different font-sizes for different screens. Along with that, we need our pages to be responsive, to be fluid as we move from different ranges of devices. We need our vertical spaces and paddings to fit in every scenario.

Thinking about this, we have everything we need to beat this up. We will use media queries, we will make computations on base-font and we will use our scalable unit.

Remember, we talked about them just a few minutes before — Em and Rem.

Let’s use REM and we know it is a relative base font size of the root element. If we adjust the font size for our root element for different screens using media queries and make all are manipulations in terms of rem, we are all set :). Let see

html { font-size: 16px; }
@media (max-width: 480px) {
 html { font-size: 16px; }
}

@media (min-width: 480px) and (max-width: 1200px) {
 html { font-size: 18px; }
}

@media (min-width: 1200px) {
 html { font-size: 20px }
}

@line-height: 1.5rem;

.container {
 max-width: 32rem;              // 75 chars per line
 margin: 0 auto;
 padding: @line-height * 2;

 @media (max-width: 480px) {   //smaller screen
   padding: @line-height * 0.8
  }
}

h2 {
 font-size: 2.25rem;
 line-height: @line-height * 2;
 margin: 0 0 @line-height * 2 0;
}

In the above example, we set the different font size for HTML tag under different breakpoints and all our computations are rem based. So now the line-heights, margins will differ for different screens based on the base font size our root element HTML will have. Thus, we achieved responsive layouts.

Typography Tips

Consider size: Currently standard min size is 16px, Very thin weights might not display well in small sizes or vice versa.
Consider contrast: Contrast between text and background should be strong.
Consider space: Give your type some space to breathe.
Consider Hierarchy: Use font size, font weight, line heights to establish a hierarchy and use it throughout your application.

Design Tips

Use professional graphical tools to analyse the designs.
Match your work with given designs as much as possible.
Consider the bigger picture. Your part must be a fit in the bigger picture and shouldn’t look standalone.
Typography is important and we have talked a lot about it throughout.
Consult your designer if you think something is wrong in design before making the change.
Once you are done, take feedback from Designer.

Here I am ending this blog post. Hope this helps and if you like it, please 👏. Thank you so much 😄

Keep dreaming! Keep Learning! Keep Sharing. Have a great day ahead.