Typographic Scale Calculator: Find Perfect Font Size Ratios

Typographic scale is an ordered set of font sizes, where every size relates to the other by a fixed ratio. Choosing font sizes from such a scale helps to create harmony, consistency and contrast in typographic work It is a key concept of design, that allows a systematic way to set the sizes of the text. Basically, it is a set series of sizes, that works to create visual hierarchy in a design.

The main idea is, that the sizes follow a mathematical scale. Typographic scale starts with a base size, and then you use a ratio to define the bigger levels. Occasionally you dump messy values and keep only the whole numbers that the formula gives, or simply round them up.

What is a typographic scale

The first value is the base size. Later comes that base value multiplied by the ratio, and later again multpiled, and so on.

Most scales base on the size of the body text and expand from here. The classic scale from “The Elements of Typographic Style” is known to many designers, and those values commonly serve as starting points for new offers. In a normal scale, the relative proportions stay permanent between every level.

You should understand the contrast between the various levels when you choose a scale for a project.

You can choose the ratios carefully and with sense, searching inspiration in the history or the character of the source. Some popular scales include the “Major Third” and the “Perfect Fourth“. Bigger jumps between the sizes create stronger contrast, which usually gives a more dramatic impact.

The amount of contrast depends on how legible the main source is and how much difference you want between the titles and the body text.

Creating a responsive typographic scale can be a difficult task. Also the difference between website and printed paper alter the causes. One useful trick is to use “rem” units in CSS.

You can set up a scale, where every step is multiplied by the ratio. Then, instead of altering dozens of statements for every breakpoint, the whole scale moves up or down only by changing the font size in the html element. That makes the management of responsive design much more easy.

Using abstract concepts as the Golden Ratio for sizing type could sound modern, but that does not always help the text be more understandable. It only sounds fine when you say to others, that the scale is “Perfect Fourth”. More important is, that the text be legible and accomplish its goal.

In design, scale always helps to show the hierarchy. Every element on the page is connected, and thinking about them as separate items is commonly a mistake, because you forget how the visual information is consumed.

The height of the line should be a multiple of the text size, usually around 1.5 times. Grid typography is basically a chart or scale. A typographic point is one seventy-second part of an inch, and twelve points form a pica.

That value of one pica, that matches twelve points, is the standard size used in printed typography.