Fluid responsive typography

All headings, paragraphs, blockquotes, nav links, and everything else scale based on the width of the browser window.

Font Scaling

We use 'perfect-fifth' font scaling to set the scale of h1-h6 and p tags. This creates excellent legibility and visual hierarchy for your content.

On Mobile however that scale is too much, so we drop it to a 'minor-third' scale which is far more suitable for hand held devices.

Spacing

Top margins on headings is double that of the bottom margin which helps to group your content, it's a Gestalt principle which is a very common problem with most websites.

Why do this?

There are so many different size devices these days that breakpoints simply don't cut it any more. By intelligently adapting all the text we can make things look great on all devices.

Plus you'll find you don't need to tweak things for different breakpoints which speeds uup your development.

What's included?

In the assets folder you'll find two styles of section dividers – Ragged and Wave. There are 5 ragged ones and 8 waves. We provide these as top and bottom variants and in both the light and dark background colours. There is also a css based horizontal rule divider which works on both background colours.

‍

Why use SVG's?

Scalable Vector Graphics are widely supported across all browsers, they are simple to make in Sketch, Illustrator, Affinity Design or if you like to live dangerously you can just write them in a text editor.

If you need to change the colour of these to your own branding you can edit the files to set the correct fill-color. Or you could even use the svg code as inline embedded code and change the fill-color with custom css. Which we would do but webflow templates don't allow custom code.

You could use jpg's if you prefer but remember that this theme supports monitors up to 8k and beyond, which svg's scale up to with ease.

‍