SiteGround logo

Run Your Blog On A Blazing Fast WordPress-Powered Server.
Get 60% Off On WordPress Hosting! Grab It Now →
*includes unlimited free email accounts with forwarding

How To Easily Calculate Best Typography Settings For Your Website

On with 0 Comment
If you're designing or tweaking your website or a blog, typography is one of the most important elements that make any design a success or a failure. Slightly wrong typographical settings can completely ruin the entire design. 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 is extremely vital in getting the optimized output for better readability and killer visual appearance.

But the question is that how to get the best possible typographical settings for different sections on your website. Each section may require a different font of different size to get the best results. To solve this problem, Chris Pearson has invented an excellent system to calculate optimum typographical settings and 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 complex number game. To get the typography settings you need to provide three (one of them is optional) parameters to the calculator as per your requirements.
Golden ratio typography parameters
Font size - The first parameter is extremely vital to get the best typography values for a 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. By default, this calculator takes 'Georgia' as the base font which can be easily changed through a drop-down menu in the results section. Remember, all these parameters are interdependent on each other 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.

Characters per line - And last but not the least is the number of characters (average) required per line within the content section. This parameter is optional as the Golden Ratio typography algorithm is smart enough to generate the most optimum CPL value even if the user doesn't provide it. Once you've provided all the parameters, simply press the green button 'Set my type' to get the desired results as shown in the image below.

Golden ratio typography results

In the example shown above, I've taken font size of 15 pixels with a content section width of 600 pixels. I've also supplied the desired CPL value of 95 characters per line. The result shows that for these parameters combined with Georgia font, ideal line height is 24 pixels with an average of 91 characters per line. Note, the CPL value is overridden by the algorithm to provide the most optimum typography settings for the given parameters.


Post a Comment