Do you ever question what size your headline should be compared to your body text, or vice versa? Perhaps you typically choose to just eyeball it. Type size plays a crucial part in an effective display, but don't worry, there's a solution to this uncertainty: the golden ratio.
What is a type scale?
A typographic scale is a sequence of font sizes ranging from small to large in a steady progression. These scales help your brand to maintain a balanced and harmonious composition. Not sure how to determine your type scale? Try using a ratio.
Tool for type scaling
https://type-scale.com/ is a great resource to use when experimenting what size to make your text. To start, you enter your base size, and then it allows you to alter your scale. You can choose a set ratio (minor second, major second, minor third, perfect fourth, augmented fourth, perfect fifth, or the golden ratio) or you can enter a custom value. Other variable elements include fonts, weight, and preview text.
Type scales for different display sizes
While ratios help determine your type scale, different sizes are more effective for different display sizes.
For example, a website displayed on a computer monitor would require a higher contrast in type scale than a mobile device. How do you decide what size to use for one display compared to the other? There are two common methods:
Method 1: use the same ratio to multiply down and across the breaking point, as shown below.
Method 2: use one ratio to multiply down and a different one to multiply across the breaking point, as displayed below.
What is the golden ratio?
Also referred to as the divine proportion, the golden ratio is a mathematical ratio you can find in nature, architecture, music, and more. This ratio derives from the Fibonacci sequence that can be found in various parts of nature such as the shape of a snail's shell or the number of petals on a flower. When this ratio is utilized in design, it helps to create an aesthetically pleasing arrangement.
To calculate this ratio, you first divide a line into two parts. The longer part (a) divided by the smaller part (b) is equal to the sum of a + b divided by a, which both equal 1.618.
The golden ratio's purpose is to serve as a proportioned guide for creating shapes, logos, layouts, and other design elements such as type sizing.
Using the golden ratio in typography
The golden ratio is a great tool to use when determining what size font to use for your website, app, blog post, you name it.
Let's say you have already decided on a body font size of 10px, but you don't know what size to make the font for your header. Using the golden ratio, you could multiply 10px by 1.618 to get 16.18, or 16px. Conversely, let's say you're trying to find a body font size to go with your header font size of 25. You could then divide 25 by 1.618 to get a suggested font size of 15.45px, or 16px.
Equations:
Body Font Size x 1.618 = Header Font Size
Header Font size / 1.618 = Body Font Size
Below is an example of a type scale that was constructed by using the golden ratio, starting with the base of 16px. Depending on how many headlines you need, you can stop or continue the sequence at any point in time. This example is using the unit of pixels, but note that the golden ratio can also work for percentages.
Overall, the golden ratio can be used to simplify the process of determining text hierarchy sizes. There is no one-size-fits-all approach for design, but this mathematical approach can ensure us with consistently proportioned elements every time.
Have questions about typographic decisions for your brand? Schedule a meeting with our design professionals.
FAQs
Typography. The golden ratio can be used to help you determine the font size you should use for headers, body copy, blog posts, landing pages, and more. To figure out what size your header font should be based on the size of the body copy, multiply the body copy size by 1.618.
What is the golden ratio for sizing? ›
If you want a perfect Golden Ratio layout, set the dimensions to 1:1.618. For example, you can set the width to 960 pixels and the height to 594 pixels. The Golden Rectangle is 594 pixels on each side and the rectangle takes up the rest of the layout (594 x 366).
What is the golden rule of typography? ›
Unless you have a specific reason, align type to the left axis. We read left to right. Thus, when we meet new text, regardless of its purpose, we're going to naturally progress through said text from left to right. And for that matter, top to bottom.
What is the golden ratio formula for text? ›
Typography and Hierarchy
Instead of using a golden ratio calculator, multiply or divide a specific font size by 1.618 to get the corresponding body or headline size. For example, a 12 pt body text, when multiplied by 1.618, will get 19.416. It means that a 19pt header will balance your 12 pt size body text well.
What is the best type scale ratio? ›
Some of the most common type scale ratios are:
- 1.067: Minor second.
- 1.125: Major second.
- 1.200: Minor third.
- 1.250: Major third.
- 1.333: Perfect fourth.
- 1.444: Augmented fourth.
- 1.500: Perfect fifth.
- 1.618: Golden Ratio.
Let's say the body-font size on your website is 16px. The header-font size could be a golden-ratio multiple of your body size — that is, it could be 16 φ = 16 x 1.618 = 25.88 or roughly 26px. Some also use the golden ratio to determine the line height needed for a particular font size to be in a golden ratio.
How do I calculate my golden ratio? ›
The Golden Ratio can be calculated proportionally, using joined line segments AB and BC that obey the Golden Ratio with AB being the shorter segment. The Golden Ratio is given by the proportion AB/BC = BC/AC. The Golden Ratio may also be expressed in terms of itself, as the formula phi = 1 + 1/phi.
What are the 4 rules of typography? ›
Use bold or italic as little as possible, and not together. Never underline, except perhaps for web links. All caps are fine for less than one line of text. Use centered text sparingly.
What is the font style golden ratio? ›
The Golden Ratio in typography
Multiplying the font size with Φ results in a line height that's balanced according to the Golden Ratio. So, for a font size of 16 px, the line height would be calculated like this: 16Φ = 16 × 1.618 = 25.888 (rounded to 26 px).
What is the 3 font rule? ›
In general, you should only use a maximum of three fonts per design: the title, the subhead, and the body of the text. You get an exception if your design text is long.
For instance, if you choose 12pt for the body text size, multiplying it by 1.618 gives you 19.416, which can be rounded up to 19 or 20. This simple application of the Golden Ratio ensures harmony and visual appeal in your typography.
What did Fibonacci say about the golden ratio? ›
The Golden Ratio is a relationship between two numbers that are next to each other in the Fibonacci sequence. When you divide the larger one by the smaller one, the answer is something close to Phi. The further you go along the Fibonacci Sequence, the closer the answers get to Phi.
What is the golden ratio simply explained? ›
What Is the Golden Ratio? The golden ratio or golden mean, represented by the Greek letter phi (ϕ), is an irrational number that approximately equals 1.618. The golden ratio results when the ratio of two numbers is the same as the ratio of their sum to the larger of the two numbers.
What is the classic typographic scale? ›
The classic typographic scale from The Elements of Typographic Style are familiar to most designers as they tend to be the defaults most word processing programs offer when selecting font sizes. The scale is: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, and 72.
What is the golden ratio in typography for print? ›
To figure out what size your header font should be based on the size of the body copy, multiply the body copy size by 1.618. For example, if the size of your body copy is 12 points, you would multiply 12 by 1.618, giving you 19.416.
What is the Golden Ratio of figure size? ›
You can find the Golden Ratio when you divide a line into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618. This formula can help you when creating shapes, logos, layouts, and more.
What is the body size Golden Ratio? ›
This led to the development of a set of measurements that led in turn to the ratio 1: 1.618, which is now often called “The Golden Ratio.” The Golden Ratio is a number that shows up all over the human body, for example the length of the arms and legs divided by the length of the torso.
What is the Golden Ratio for waist size? ›
Results: There is a golden ratio in the distances between xiphoid to waist and waist to the abdominal crease that is close to 1:1.66, and the waist is at the junction of the upper 2/5th and lower 3/5th of the height from xiphoid to abdominal crease.
What is the Golden Ratio rule in fashion? ›
In fact, it's downright mathematical. The secret is menswear's golden ratio, also known as the rule of thirds, where your tee, shirt, or jacket comprises one-third of an outfit while the pants make up the remainder.
