Font scale, spacing system and css grid

February 12, 2020

In part 2 we talk about font scale by using a system and how to use it for a visual hierarchy.

It’s a lot simpler when you have system and you don’t have to think too hard because it will usually be 7 different sizes and the web by default has 6 headings and paragraph.

Speed up version 16 MB size, watch part 2 on Youtube full version

Again we use CSS grid for the layout and you will see why it’s easy to use rather than the old float left and using width percentages.

Why are we different?

There is so much competition and how can you quickly convey how you are different? You could show it or just write it.

What do we actually do?

Sometimes landing on a page for the first time, it’s not obvious what the website is providing or solving.


With a lot of templates or landing pages, testimonials is a good section to include because if you plan to sell an item or provide a service, it would be great to include some proof or even social proof.

Depending on the type of website, the core design can be down to typography and layout. Using a font scale and spacing system will help your designs feel more consistent especially when you build more pages.


Learn → Make → Inspire