Fibonacci Type
Easy type hierarchy
In addition to the golden rectangle, the Fibonacci sequence makes a mean type hierarchy.
I heard about this method as a design student and it made it very easy to construct complex type hierarchies early on. I still use it as a starting point.
If you’d like to be done reading already, just multiply your body copy size by 1.6x a few times and you’ll end up with a really nicely proportioned type hierarchy.
WTF is the fibonacci sequence?
The Fibonacci sequence is a math sequence with a very simple rule: add the previous two numbers to get the next number.
So the Fibonacci sequence goes 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, etc.
The golden rectangle
The Fibonacci sequence creates what we refer to as the “golden rectangle,” which has the “golden ratio”—roughly 1:1.6
Interestingly, this sequence shows up frequently in nature and mathematics to the degree that numerous books have been written on the phenomena. Nautilus shells and pinecones are my favorite examples.
If you’d like to use a more precise number, 161.8% will produce better measurements than 160%, though it’s harder to remember.
Type waterfalls
That golden ratio yields really pleasant type size proportions.
Start with finding the ideal body copy size, then work outwards from there. Each size in this system intermingles nicely and I’ve found junior designers appreciate the limited options, as compared to the exhaustive options of traditional type waterfalls.
Here’ a few examples of numerical sequences you could use:
8, 13, 21, 34, 55, 89, 144, ...
9, 14, 23, 37, 60, 100, 160, ...
10, 16, 26, 42, 68, 110, 178, ...
Rules of thumb
Here are a few tricks to leverage this method.
Steps for contrast
I’d generally recommend skipping steps for pairing headlines w/ subheads. Depending on the application skipping 2–3 steps (ex: 55 to 144, or 34 to 144) can make for some really dramatic type. I would avoid pairing adjacent steps together (ex: 89 with 144).
Base sizing on x-height
Unless you’re going all caps, the perceived size of a font is more about the x-height than the cap height. When using two different typefaces in your hierarchy, use the x-height to find the correct sizes. In the example above, Georgia would always be 6% larger than its Nouveau counterparts.
If a typeface is more condensed, you’ll want to fudge this rule a bit, giving the condensed type a little more size. See Saboneta vs Nouveau above.
Using all caps
Using all caps changes the perceived size of a font and sizes need to be adjusted accordingly. All caps should be slightly larger than the x-height.
Parting thoughts
This is a method, not the method
I’ve read a few methods for making type systems and this has worked well for me. As a student it made things very easy and over time I’ve found it can require some finessing, depending on the application.