Web designers and developers can use the responsive typographic scale tool to give your website strong visual hierarchy and responsive font sizes.

Simply select the typographic scale of your choice and you are presented with the scale in visual form. The scale can be tweaked by amending the base font size, unit measurement and screen width range.

Once a scale is selected, a visualisation is provided where each step is displayed in proportion and the scale can be examined.

Web developers are provided with the CSS code for each step in the typographic scale. Each font size is provided with CSS clamp which means the font sizes are responsive and cater for all device types. In addition, we provide the code in SCSS format for more advanced developers.

A typographic scale is a collection of font sizes that can be used to create a strong visual hierarchy and guide a user through various stages of a user interface.

A typographic scale can be created by repeatedly multiplying the body font size by a specific decimal figure to create progressively larger font sizes. The largest font sizes can be used for the main headings of an application and the base font size can be used for body copy.

The mathematics behind the collection of font sizes allows the text elements of the page to work together and bring order to the design.

For example, using the major third scale multiplies each step by 1.25. So starting with a base font size of 18px, the headings would be H6 23px, H5 28px, H4 35px, H3 44px, H2 55px, H1 69px. Please note that the pixel values were rounded for simplicity.

The typographic scale tool offers a collection of various type scales that suit a range of different situations and use cases. The small-contrast type scales are best suited to documents or text-heavy webpages such as blogs. Alternatively, the medium-contrast type scales are best for web pages that require headings to stand out but work in harmony with the body text. On the other hand, high-contrast type scales are best for luxury websites or large posters.

The typographic scales that are available in our tool include:

Small Contrast – 1.067 Minor Second, 1.1125 Major Second

Moderate Contrast – 1.2 Minor Third, 1.25 Major Third, 1.333 Perfect Fourth

Large Contrast – 1.414 Augmented Fourth, 1.5 Perfect Fifth, 1.618 Golden Ratio

Each typographic scale is slightly different and can be used in various contexts.

1.067 – Minor Second and 1.1125 Major Second
The minor second and major second are the smallest scales that our tool provides. The small font contrast can be used in settings where space is at a premium such as documents and academic papers. In terms of web design, it can be used on content-heavy pages such as blogs or instructions.

1.2 Minor Third 1.25 Major Third
The minor third and major third scales have a moderate contrast and can be used in websites and documents with diverse content such as headings, subheadings as well as standard body text. Also, the scales can be used to distinguish between navigation items and complex form labels.

1.333 Perfect Fourth
The perfect fourth provides a moderate contrast that enables content to stand out whilst working together in harmony. This scale is great for websites with varied content such as blogs and news websites.

1.414 Augmented Fourth
The augmented fourth scale provides a large contrast between each of the steps. It can be used in media that relays important information such as posters and other promotional content. In web design, the scale can be used in landing pages as well for important calls to action.

1.5 Perfect Fifth
The perfect fifth scale provides a large contrast between each of the steps. Due to the large contrast, it is best used for attention-grabbing posters and advertisements. In terms of web design, the perfect fifth can be used for infographics.

1.618 Golden Ratio
The golden ratio is the largest scale that our tool provides. The larger font contrast is suitable for print designs such as in magazines and brochures. A larger font contrast can be used in websites with a striking visual appeal such as high-end fashion and luxury products and services.

The mobile size of each step in the typographic scale is calculated by dividing the maximum font size by the step number in the typographic scale.

The number of the step is calculated as 1.1 for the body copy and then adding 0.1 for each step in the scale. For example, H6 would be 1.2, H5 would be 1.3 and so on.

For example, the H1 in the 1.2 Minor Third scale is a maximum of 54px (with a body font of 18px). If the body text has a decimal of 1.1, the H1 step in the scale has a decimal of 1.7. 54px divided by 1.7 equals 31.76px, which would be rounded to 32px.

This means the largest font size on desktop would be 54px and the font size on the smallest smartphone would be 32px.

Fluid typography is a responsive web design method where the font size gradually increases from a minimum size to a maximum size, depending on the screen size.

For example, a heading could be 40px on mobile and 69px on desktop and fluid typography would gradually transition between the two values. This means that every user will have fonts sized specifically to the width of the device – a tailored, optimised experience for each user.

CSS clamp is a front-end development method that allows your website to have fluid typography by transitioning between two font sizes.

CSS clamp uses three values, the first and third of which are the minimum and maximum font sizes. The middle value is set to a dynamic value that will change with the width of the screen, such as viewport width (vw).

For example, font-size: clamp(39.04px, 1.38vw + 34.624px, 61.12px);