LGC Typographic Scale Calculator

A visual typography tool to help you choose the right font size for your projects


Unit Converter:  16px = 12pt
Generate CSS Quick Preview

The typographic scale is an ordered set of character sizes linked to each other by a common ratio. Choosing font sizes from a type scale is essential for creating consistency, harmony, and contrast in a typographic work. Robert Bringhurst, in his book 'The Elements of Style,' says that no one should compose without it.

Design software usually has such a scale. Adobe InDesign's default sequence is based on the Classic Typographic Scale which is 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72, and so forth. This type scale has historical significance — used by typographers of the early Renaissance; it has remained unchanged for 400 years. 

In the time when types were cut in metal, these font sizes were chosen for practical reasons. The typographers settled with a small range of sizes. And since they needed a greater variety of small fonts, the scaling ratio between the smaller font sizes was smaller than for the larger font sizes. The small sizes would increase by +1 (size 6 to 12), then the next series would increase by +2 (size 12 to 18), then by +3 (size 21 to 24), then by +12 (size 24 to 72), and so on.

If we assume the existence of a mathematical equation, the closest would be a1=round (a × r), where a=12 and r=52. This equation produces the following sequence: 6, 7, 8, 9, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48 and so forth. Very close isn't it? This contains all the numbers of the Classical Typographic chart except 11. This equation uses two defining properties a and r.

Harmonious Proportions

It is believed that certain proportions appeal to our eyes for the same reason that musical harmonies please our ears. Not surprising that they share some attributes. As Owen Gregory notes: "Both have formal qualities or parts that can be abstracted, analysed and discussed, often using the same terminology: composition, harmony, rhythm, repetition, form, theme; even colour, texture and tone."

If we look at a musical scale, we note that it has three defining properties; the root note, the number of note in the scale and the interval ratio. And we take notice that the ratio of frequencies of two notes an octave apart is 2. 

Let's rework the equation so that it resemble the musical scale, with three defining properties, and r=2 to match the ratio of frequencies of the octaves. We will use a=12pt as the fundamental term. In the Classical typographic scale chart, five steps separate the 12 and 24, so we will presume that it is a pentatonic scale (with five notes). Thus, our three properties are r=2, a=12pt and n=5. Using the geometric progression formula, we obtain the following sequence 6, 7, 8, 9, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48, 55 etc. We can see that this is identical to the previous sequence.

Modular Scale Type Tools

Tools like Tim Brown's modularscale.com and Jeremy Church's type tool can generate a sequence of font sizes with a particular geometric incrementation ratio. However, these tools are limited to a simple modular scale with two defining properties. For instance, with a base a=12pt, and r=ϕ, using the equation a1=round(a × r), we obtain the following sequence: 12, 19, 31, 51, 82, ... Nice! However, as we can see, this results in an increase in font sizing with too much amplitude.

Our typographic scale calculator generates a modular scale using three defining properties similar to the musical scale: The initial term (a), the increment ratio (r), and the number of sizes in the type scale (n). With a value of  a=12pt, r=ϕ and n=3, we get more option in the sequence: 12, 14, 17, 19, 23, 27, 31, 37, 43, 51, and so forth. Having these intermediaries, which in music would be equivalent to the notes between the octaves, results in a smoother sizing and more options for the designer. The designer can choose the right font sizing.

Composing

In addition, our type-scale calculator gives the designer the ability to assign different typographic elements (title, subtitle, legend, etc.) to any term in the sequence.

The seasoned users can try to replicate the musical scale, e.g. assigning the value 8 of a chromatic scale to the title would amount to a dominant fifth (+7 semitones) in a musical scale, entering 13 would be equivalent to the perfect octave (+12 semitones), 25 would be a double octave (+24 semitones), and so forth. The sequence 1, 3, 5, 6, 8, 10, 12, 13, 14, 16, 18, 19, 21, 23, 25, etc., would be equivalent to the major scale, and so on.

The rest of us can simply experiment with any interesting growth scale, i.e. the Fibonacci Sequence (1, 2, 3, 5, 8, 13, 21, ...), the Lucas Numbers (1, 3, 4, 7, 11, 18, ...), the Pentagonal number Series (1, 2, 5, 7, 12, 15, 22, ...), or any other fabulous sequences.

 

Type Scale Ratio Increment


Fig. 1. Base (f0)=12pt • Common ratio (r)=1.618 (ɸ)
• No. of elements in scale (n)=3


References & Similar Projects

#type-scale #typography #modular-scale


Ti'kuto Design Studio

T: +230 5 903 7686 (WhatsApp)
Jaylall Lane 3
Avenue Berthaud
Quatre-Bornes
Mauritius

© 2019- Jean-lou Désiré. All rights reserved. www.jeanlou.net.