Understanding macrotypography can be useful in making websites, specifically in making websites readable.
Macrotypography involves the combination and arrangement of all groups of texts within a web page.
While microtypography involves small details such as the glyph, kerning, tracking and capitalization of letters and words, macrotypography involves the arrangement of paragraphs. Microtypography deals with legibility, and macrotypography deals with readability.
For most of the time, macro techniques can be achieved using Cascading Style Sheets or CSS.
What is Readability?
Readability refers to how easily the visitors of a web page can consume groups of text. On the other hand, legibility refers to how easily the visitors of a web page can discern each glyph in the text. Both of these are important when creating an amazing reading experience.
Recently, legibility has received a lot of attention from web designers. Browsers have now adopted new CSS attributes that enables web designers to exercise better control over web type.
How can Readability be improved with Macrotypography?
A great reading experience can lead to a better user experience. With good readability, web designers can help speed up the consumption of texts and improve the understanding of web content. Here are a few examples on how we can make use of macrotypography to improve user experience.
Determine the right line height
The right line height depends on the font type that you have chosen.The shorter the line length is, the shorter the line height. The longer the line length is, the taller the line height.
Choose an appropriate paragraph style
Choosing the right paragraph style involves choosing whether to use indents, line breaks and other attributes in order to make sure that the flow and rhythm of the paragraphs are suitable for a great reading experience. For example, reading long texts with long line lengths can be distracting. This can easily be adjusted using CSS.
Be mindful of the margins.
Margins separate the main body of text from ancillary elements on a web page. This enables the visitors to better focus on the most important content of the website. Aside from that, margins, which is composed of negative space, can also serve as a frame of the main body of text, and provide harmony to the web design.
Make use of contrasting colors.
One important attribute that you can change to make your texts more readable is the font color. When choosing a color for your texts, remember to consider the color of the background. Using contrasting colors can help make the web page more readable. However, there are certain colors that are contrasting but are not be ideal for extended reading.
For example, black text on a yellow background makes use of highly contrasting colors, but this combination can seem too alarming because of its association with warning signs. The same goes for red text on a white background. Even black text on a white background can also be too harsh and striking. A good combination would be dark gray text on a white or light gray background.