Within this chapter you're going to learn how to practically balance your text with well proportioned titles, subtitles, and more.
Very simple math will be required – but don't worry, it will be explained step-by-step. We are going to move through:
- What is a scale?
- How to find its numbers?
- How to apply them with CSS?
- Defining vertical rhythm
We will also make a more complex, responsive structure – mixing the notions of the previous chapter with the upcoming ones.
So, what are we waiting for? Let's start!
Good looking fonts alone won't necessarily make a beautiful, well balanced design.
We'll need a little math to step in to help us so that we'll be able to build a report of values between each element of our text– for it to appear harmonious, rhythmical, and more readable.
You may not know it – but you look and use the classic typographic scale every time you fire up Adobe InDesign, Microsoft Word, or any modern software: the standard point sizes that are given to you are just that.
In a scale, each element answers to the scaling property, meaning that where x is a value, rx or it's ratio must be present inside the scale as well.
That ratio element is the foundation of the scale – and it's the numeric value we are going to work on.
The classic typographic scale is made of these values: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. You recognize it now, don't you?
Another important property of a scale is the number of the notes. Each interval of the classic one encloses five sizes, making it a pentatonic scale.
The last important thing is the frequency – in the classic typographic scale this value is the pica – which is a type unit of measure consisting of 12 points, invented by François-Ambroise Didot in 1785.
It's the baseline value for print, where basic readable text is set at 12 points – the equivalent of 1 pica.
Using a classic formula for the frequency f of every note i as shown in the following image:
We can find out that the classic typographic scale is missing or has misplaced some values: 28, 32, 42 and 55 measures are missing – while 60 and 72 should be 63 and 73 points, to keep the scale on the same frequency.
Probably the values were rounded up to the closest pica multiple value to be easier to use and apply in the old print world. As a final tip, the 11 value doesn't really belong there, thanks to the formula.
Ok, so we learned that the classic typography scale that we've been applying for years is wrong. Don't worry, this won't turn the world upside down, not even the typographical one.
It's more of a general wrongness, given by limitations of the times when it was created. Keep using it with ease; it won't do any damage to your text or your ability to read it easily, the eye and general knowledge have grown used to it during the centuries.
As we know, the web is a different medium from print: different resolution, different reading and writing rules.
Let's see how all of the above easily fit the new medium as well.
There are three methods to change and build a scale – each one is based on the variation of its basic properties. You can change the frequency, adapting an existing scale to a new project. For example, frequency=12pt is the print medium, while frequency=16pt is the web medium. By changing the number of values, you can have more sizes available for your project – but it is not really needed. After all, who needs more than three/four sizes in a real world, text based project?
The third solution – and maybe the more interesting – is to change the ratio of the scale, giving birth to other, completely different values inside it.
Let's start out by defining a scale for the web with one of the most eye pleasing measures you'll find out there: the Golden Ratio. Also known as Phi (Φ), it's an irrational number usually presented as 1.618
To obtain a scale, we must decide a base number to start with. Written content for the web is usually advisable to be written starting from 16 points and up.
Note
The common distance at which we sit from a screen is from 20 to 23 inches (recommended 28"). The optimal readability at this distance, given all factors – like the light that enters the eye, convergence, words per sentence – is mathematically given by a measure of 16pt on the screen. This is why it's the standard size.
As such, browser makers around the world adopted the 16 points as a standard on their software – which in modern type is found, named, and referable to as 1em.