Note: After Rank Executives improved our blog typography, our time on site increased and bounce rate decreased. We also received more natural links and tweets. Distilled blogged about a similar change last year.
Presentation is just as important as content when it comes to making good web content. What’s on the screen is often the first thing that makes an impression of the reader, and utilizing good font can convince the viewer to read more. Whether consciously or subconsciously, fonts and typography can give off different impressions of your site, which is why it’s key to make sure that the font is a good representation of your message.
Adding spacing between your lines improves readability
Ideal Text Formatting for Blogs
Most web designers don’t put much thought into formatting their blog. A readable blog can greatly improve time on size, reduce bounce rate, increase the number of shares and links, and skyrocket your blog’s online presence.
Ideal Font’s for Blogs:
- Georgia
- Open Sans
- Gill Sans
- Helvetica Neue
Ideal spacing for blogs with sidebars:
- Font Size: 16
- Line Height: 26
- Content Width: 680
- Approx. CPL: 96
Ideal spacing for blogs with no sidebars:
- Font Size: 19
- Line Height: 30
- Content Width: 900
- Approx. CPL: 108
Mathematical Proportion
Finely intertwined with the art of typography is the mathematical symmetry that defines all that we see. The artistic letter forms have mathematical proportion that can make them more or less pleasing to the eye, a marriage of form and function in this sense. When you have good proportions, a harmonious balance is established and the text becomes immensely easier to read. But when the arches and curves aren’t aligned, font can come significantly harder to read and turn your user off your site. The mathematical form of your content is incredibly important in how your readers see your site.
Primary Dimensions
Typography has three primary dimensions: font size, line height, and line width. Font size is the physical size of your letters; line height is essentially the spacing between your lines, and line width is the distance between the beginning and ending of each line on the page. The three dimensions are the backbone to how your typography is perceived.
The three dimensions can be changed in many ways to provide different feels, but it’s important to remember proportion when adjusting each dimensions. If line width and line height remain the same while font size changes, the font can appear to be squished and compressed as it gets bigger and destroy readability. A general rule of thumb is that line heights should increase with your font to main the geometric proportion of the paragraph.
Line Width & Line Height
Line width is perhaps one of the biggest changes you can do to readability. Larger line widths allow for longer lines of text while smaller line widths are idea for columns of text. While longer lines are necessary in some situations, it is better to keep the line width small due to the difficulty it is to perform the return sweep (essentially the movement of the eyes between the end of a line and the start of the next line). When thinking about the return sweep, it is also important to think about the line height. Larger line heights allow for longer line widths due to proportion, and in turn it is a good idea to keep the line heights and line widths directly proportional.
The Golden Ratio
In terms of keeping the proportions in balance, nature has already handed us the answer. The golden ratio is a beautiful blueprint that is incredibly effective in establishing proportionality. Remarkably pervasive, the golden ratio can be found in plants, animals, and even in your DNA.
In terms of typography, the two equations used are:
- L = f(golden ratio)
- W = L^2
It’s important to remember that these two equations are general and should be used to establish a basis for your font. Another hurdle, especially in web development, is the fact that many designers are constrained to using integer values for font size, line height, and line width. Creative liberty can also be taken to use fonts that are more ‘non-traditional’. Nevertheless, the golden ratio is incredibly useful in creating the backbone for user friendly typography. For more information, refer to the site: Golden Ratio Line Height Calculator
The site comes equipped with a golden ratio typography calculator that can easily optimize your typography for your site so it can be readable across multiple mobile devices.
