If you're designing or tweaking your website or a blog, typography is one of the most important attributes that make any design—a success or a failure. Wrong typographical settings can completely ruin the design of a website. There are infinite design possibilities while creating a website template. The layout which contains multiple sections with different dimensions is populated with several types of content. But, when it comes to textual content, correct typography settings are extremely vital in getting the optimized output for better readability and killer visual appearance. We'll address it today.
But the question is how to get the best possible typographical settings for different sections on your website. Each section may require a different font of different sizes to get the best results.
To solve this problem, Chris Pearson has invented an excellent system to calculate optimum typographical settings for a website. This system is known as Golden Ratio Typography Calculator.
The complex mathematics behind this system is hidden behind the calculator so that a general user can easily generate the best typography settings for his website without any need of plunging into a complex number game.
To get the typography settings you need to provide three parameters to the calculator as per your requirements.
Font - The first parameter is the font you want to use for the section. Both web-safe fonts, as well as popular Google fonts, are available to choose from.
If you're using a custom font, you can select one that closely matches your selected one.
Font Size - The second parameter is extremely vital to get the best typography values for the desired content section. Different fonts render slightly different (visual appeal) even if the same size is mentioned for all of them.
That's why you must provide the size of the font you're going to use in the section. Remember, all these parameters are interdependent to get the best typography settings.
Content Width - The next parameter takes the section's width as input. This value must exclude any padding values if implemented. It is often seen that content sections are optimized by providing padding values to streamline the entire template.
Just make sure you do not count this padding width within the content section width. All these values are given in pixels.
Here, we've taken a sample parameter set where the font is Georgia, the font size is 16 px, and the content width is 650 px. You can try it with your parameters.
And, here's the result! You can see two new entries in the GRT Basics table. It's characters per line (CPL) and the line height.
The golden ratio typography algorithm is smart enough to generate the most optimum CPL value for the supplied parameters.
In the example shown above, I've taken a font size of 16 pixels with a content section width of 650 pixels. The result shows that for these parameters when combined with Georgia font, the ideal line height is 27 pixels, and the average characters per line are 92.
If you're looking for a full-fledged GRT calculator that generates CSS for you, go for its pro version.