Micro and Macro Typography in Web Design

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Typography can be divided into two areas – macro and micro typography. The relevance of typography on a web page cannot be stressed enough. It is important to consider its nuances and use it in a way to enhance the overall readability and legibility of a web page. Before crafting a page, it is important to understand the difference between micro and macro typography. This will help the designer focus on the readability and legibility of the overall design.

Micro typography focuses on the finer details of a typeface. When a designer makes a choice to kern, track and define a font style, he or she is working with the typography at a micro level. By adjusting the setting and playing with the nuances of a typeface, you are essentially designing a letter or a word. Micro typography deals with the legibility of a text and can improve the overall reading experience of the user.

Macro-typography, on the other hand, takes care of the layout design of the paragraphs and words on a web page. By arranging paragraphs in a specific way, designers are able to improve the readability of the page.

Both macro and micro typography are important in creating an effective web page that is easily readable. Readability is the ease with which a reader can consume an article or a web page. Legibility is different, it refers to the spacing and the arrangement of glyphs in a word and how easily it can be discerned. Now, let us take a look at two different techniques that are currently being employed by designers to create harmonious and readable web pages.

Macro Typography techniques to make the content more readable

Margins: Adding margins help structure the content of a web page. By adding a margin, you define a distance from the text container to the other elements of the web page. The empty space surrounding the text container helps to create a relationship between the text and the surroundings.
Margins can also help create a sense of harmony in the overall design.

For example, if you look at the web page below. Content is placed between two columns and the margins separate the content. Margins are placed in such a way to allow the reader to read through the content in the left and right columns effortlessly. The space that separates the two is helpful to define the relationship between the columns and the overall design of the layout. Margins can be also set intuitively by moving it just enough to make the reading a comfortable experience.

To create harmonious web pages, it is important to pay attention to the proportions between the text and the shape of its container.

Micro Typography techniques to make the content more readable

Selecting fonts

Font selection should be dependent on the legibility and readability of the content. When choosing a font, pay attention to its overall legibility, nuances in style and feel should come second. Headings and subheadings draw the user to the text so selecting the right font style is important as it sets the tone to the overall layout. Text underneath it should be set to a classic style – this will help the user read through the entirety of the content effortlessly. Creativity is important when selecting a typeface but the readability and legibility shouldn’t be compromised in the process.

Contrast

Contrast plays a big role in typography and web design. Placing the text on a contrasting background will help make it more readable. A dark grey text on a white background is a classic example of readable web content. Contrasting colors can be chosen within a text container. For example, heading and subheading colors can be in contrast with the text underneath it. This will help the user pay attention to this section of content.

Font size

Font size is usually chosen after the margins and the width have been set. Guidelines usually indicate that about 8-12 words per line are the standard line length. This would ensure a pleasant reading experience for the user and will help him read through the content effortlessly. The typical font size needs to be large enough to guide the user’s eye toward the content and small enough to keep the user reading through the line jumps.

Line Height

Line heights are usually chosen after the line length has been set. The longer the line length, the taller the line height should be and vice versa. To determine this height, you have to see the point where the ascenders and descenders would touch. From here increase it until it is in balance with the line length. You can set the line height to the browser’s default as this would ensure that it is proportional to the element’s font size.

Organizing and adjusting type on the web takes time, effort, and patience. But when done correctly it can make the world of a difference. Paying attention to the style, contrast, color, size margins, spacing, and line height and width will help you design text that can engage the user and keep them interested in the contents of the page. Shaping the text within the container and placing them in relation to other elements on the page is crucial when it comes to crafting a readable experience.

We have covered some of the basics of macro and micro typography and how they can be used in conjunction to create a harmonious and well-balanced web page.