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.
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.
Type Scale 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.
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.
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.
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.
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.
