Combining The Fibonacci Sequence And Typography
Design Is Communication
Design is separated from other visual disciplines by the emphasis it places on communication: a designer's task is to present a specific message to an audience in a visual way. Usually, a design contains multiple elements, of which some are emphasized over others. This series of relationships-of varying levels of importance among the content-is known as hierarchy, and is the backbone for guiding a viewer through a series of messages from beginning to end in the order the designer intends.
Varying the visual prominence of elements based on their importance relative to one another is a fundamental technique for guiding a viewer through content, a process in which size is often a central element: larger items stand out more than smaller items, and are seen as more important. As typography plays a central role in graphic design, it is commonplace for a design to contain typography at different sizes to denote importance, and is a popular method of establishing meaningful hierarchical relationships between sizes by use of a modular scale, which uses a ratio to calculate a set of visually congruent type sizes. The idea is to create consistency between typography with identical functions, and a modular scale will supply a list of mathematically sound possibilities for the size of any given item.
Using a modular scale over guesswork is smart: one quality that successful designs possess is consistency, which would be difficult to achieve if numbers measuring points or pixels were not mathematically derived. When a modular scale is used, titles across all pages will be the same size, the spaces between lines of body text will be the same height, and the relationships between all type sizes throughout the design will relate back to the ratio used in the modular scale.
The Golden Ratio
A modular scale accepts a ratio between two numbers, and its output is calculated by applying this ratio to a given type size to determine either the next largest or the next smallest size according to the desired relationship. Given a type size of 16px and a ratio of 1.5:1, we can derive a sequence of type sizes as follows
16 24 36 54
where obtaining each value in the sequence is the product of the previous number and the given ratio; i.e.,
16 * 1.5 = 24
In order to obtain a type size lower than a given value, simply divide by the given ratio.
24 / 1.5 = 16
Since a modular scale capitalizes upon a ratio to produce visual harmony within a design, it is a natural conclusion to apply the golden ratio to this process. Also called "the divine ratio" by Renaissance artists and mathematicians, the golden ratio has been considered throughout history to be an aesthetically pleasing relationship in just about any application, from architecture to music to design, a claim supported by its abundance in nature, where relationships between dimensions of various components of an object often follow this rule.
The golden ratio is an irrational number, approximated by 1.618:1, and is intimately related to the Fibonacci sequence. Defined by the equation Fn = Fn-1 + Fn-2, the Fibonacci sequence is a series in which any given value is defined by the sum of the two preceding values. By definition, the first two numbers in the series are 0 and 1, so a set of the first several numbers in the Fibonacci sequence looks like this
0 1 1 2 3 5 8
Unlike the output of a modular scale, the ratios between successive values of the Fibonacci sequence are not constant; however, as the series approaches infinity, the ratio between numbers approaches the golden ratio. As an example, if we divide the 300th Fibonacci number
222232244629420445529739893461909967206666939096499764990979600
by the 299th Fibonacci number
137347080577163115432025771710279131845700275212767467264610201
the quotient is 1.61803396, which is indeed quite close to the approximation of 1.618 given above. The golden ratio appears in many forms and can be expressed in many ways, though its relationship to the Fibonacci sequence is a compelling one. For reference, a modular scale based upon the ratio of 1.618:1 looks like this
16 25.888 41.887 67.773
Un-Ratios
All of this sounds like a convincing argument to favor a modular scale based on the golden ratio: it has an abundance of mathematical relationships, has a history of popularity in visual aesthetics, and is abundant in nature. What more supporting evidence could a designer need? However, let's take a step back and remember why a modular scale is important: its purpose is to introduce hierarchy and consistency into typography via mathematical relationships.
Consider this series:
16 17 18 19 …
A design conceived using these values as type sizes would be consistent, surely, but would hardly introduce hierarchy: the difference between 16px and 17px requires a keen eye to perceive, and would do a poor job of communicating relative importance between the two elements.
If we analyze this series in the same way as the Fibonacci sequence above, as it approaches infinity, the ratios between successive numbers approaches 1:1. If we created a modular scale using this ratio, the output would be
16 16 16 16 …
which is a meaningless relationship for the purpose of establishing hierarchy in a design. In other words, as the type sizes in this series grow larger and larger, there is less and less difference between values, to the point of becoming imperceptible.
Another way of expressing the relationship between numbers in this series is by examining its growth: the series of
16 17 18 19 …
exhibits linear growth, whereas a series produced by a more dynamic ratio (such as 1.5:1, or 1.618:1) exhibits what we might call "superlinear" growth. One characteristic of series defined by linear growth is that the difference between adjacent values is a constant.
16 17 18 19 \/ \/ \/ 1 1 1
In the superlinear example of the series defined by the ratio 1.5:1, the difference between successive values is much more dynamic than a constant (such as in the example above), and is what drives the usefulness of a modular scale.
16 24 36 54 \/ \/ \/ 8 12 18
However, when considered from this angle, a sequence that grows by a factor of 1.618:1 is reduced to an opinionated approach to the modular scale: such a sequence also exhibits superlinear growth, the same as 1.5:1, and its superiority over other ratios, though supported by compelling examples, is really only a matter of taste.
16 25.888 41.887 67.773 \/ \/ \/ 9.888 16 25.886
Good taste, but taste nonetheless.
Ratios of Ratios
Instead of examining the difference between successive values in a series, what would a representation of the ratios between values look like?
16 17 18 19 \/ \/ \/ 1.0625:1 1.058:1 1.0556:1 … 1:1 16 24 36 54 \/ \/ \/ 1.5:1 1.5:1 1.5:1
In both of these cases, each successive ratio is calculated based on the previous one in a simple, arithmetical way.
What would happen if the ratio were computed based on the previous two values in a similarly simple way? Coincidentally, a series of numbers exhibiting this property has already been mentioned in this very text: low values of the Fibonacci sequence are a long way from stabilizing at the Golden Ratio:
1 1 2 3 5 8 13 21 34 \/ \/ \/ \/ \/ \/ \/ \/ 1:1 2:1 1.5:1 1.667:1 1.6:1 1.625:1 1.615:1 1.619:1 … 1.618:1
Ultimately, yes, the series plateaus at a nigh-constant ratio, but there is significant variation between the ratios of its early values. Additionally, the ratios in this third series tend toward an irrational number, instead of a rational one.
This idea is this: using the Fibonacci sequence as a basis for creating a modular scale for typography builds upon the idea of the golden ratio as verifiably Good Aesthetics to introduce more subtle mathematical relationships. A modular scale based on the Fibonacci sequence bears a great resemblance to a scale based on the golden ratio, but offers opportunities to vary the intensity of the scale, by allowing sizes to be more similar or more varied.
Fibonacci & You
How, then, does this concept apply to you, the designer? At first glance, the series
1 1 2 3
does not appear to be a compelling set of type sizes. However, if we examine a different set of numbers in the series, beginning at a later index,
3 5 8 13
the numbers begin to resemble type sizes in pixels. By adding a constant to each value in the series, the values can be normalized to readable sizes while preserving the distortion to the golden ratio. If we add 13 to each value in the above example
16 18 21 26
we arrive at a series of type sizes that become more useable, where the constant of 13 was calculated by evaluating the difference between the initial value and the intended base type size, in this case 16 pixels.
16 - 3 = 13
This particular set grants a subtle variation in type sizes; choosing different indices as references for base size values yields different degrees of variation, creating sets that can be more or less dynamic. For example, if we use the seventh Fibonacci number as a starting point
13 21 34 55
and use 2 as our constant, to bring the base value to 16 pixels,
16 24 37 58
the resulting set resembles quite closely the first example from this text.
16 24 36 54
However, between these two examples, the Fibonacci-derived set becomes more dynamic at higher values, while retaining the more subtle relationships of the 1.5:1 set at lower values. Implementing a modular scale with these qualities will allow the important elements of the design to stand out even more, while still maintaining a more nuanced relationship at smaller sizes.
Each value of the Fibonacci scale will introduce a different set of relationships when used as a reference for the base size of your typographic scale—some more subtle, some more dynamic, and sometimes a mixture of both—and experimentation is encouraged in order to discover the appropriateness of each set for the work at hand. However, with a basis in mathematics, nature, and history, applying the Fibonacci scale as an opinionated twist to the verified aesthetics of the golden ratio will give your designs a distinction which will elevate your visual impact, and possibly increase your knowledge of mathematics.
