Despite the fact that images are getting more prominent, words are still the core of web and they are the main tool we use to communicate with users. It is easy for designers to overlook text since we’re drawn to the visual imagery but the truth is most users visit sites for their content. This is why typography plays a vital role in web design. It goes without saying that designers should have a good understanding of typography and know how to shape written information.
So What is Typography?
Typography is a beautiful group of letters, not a group of beautiful letters
– Matthew Carter
And this is how Hermann Zapf describes typography:
Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability. And this is the purpose of typography: The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading.
By definition typography is the art and technique of arranging type. Unfortunately, it is often confused with using beautiful typefaces. While choosing the right typeface and font is important for brand identity and setting the tone for the audience, typography is not just about choosing typefaces, it is about arranging the letters and words to communicate in a clear and easily understood manner. The Inspiration Bit has a great article, Georgia on My Mind, which showcases 32 websites that use only the Georgia typeface for their web copy. This is an old yet timeless article that shows that it is possible to work with even only one typeface – except for comic sans, comic sans should be banned – and achieve a good typographic design using the right font size, color, line-height, weight, visual hierarchy and alignment.
Macro and Micro Typography
Typography exists in macro and micro levels:
- Macro typography refers to the type’s arrangement of the overall structure and layout on the page. The size, position and proportion of the columns (the grid structure) are a part of macro typography.
- Micro typography, on the other hand, focuses on the details involving the anatomy of letter forms. Compared to macro typography it is much harder to get right. It is concerned with improving the readability and appearance of text. Spacing of the letters and words, line width, line height and typeface selection are a part of micro typography.
Both macro and micro typography are equally important because designing typography for the web and devices requires the designer to compartmentalize the information into different sections and sub-sections. Also, factors like fluid layouts, different screen sizes and resolutions and restricted bandwidth should be taken into account when designing for the web. That means designers should both focus on a larger scale such as paragraph layout and hierarchy as well as on small details such as responsive header font size for various screen sizes.
Text as a user interface
As the usability expert Jakob Nielsen, of the Nielsen Norman Group states:
Text is a user interface…It’s a common mistake to think that only full-fledged graphical user interfaces count as interaction design and deserve usability attention…
People visit websites to find content quickly and efficiently. The better the visual hierarchy, alignment and readability and is, the easier it is for users to find and understand the information they are seeking.
Good Typography Improves Usability
In terms of usability and accessibility, typography is an important element. A usable website is one that allows the user to accomplish their tasks quickly, efficiently, effectively and easily, without confusion or frustration. Hence, legibility and readability play an important role in usability. It is also worth mentioning that legibility and readability are not the same thing.
- Legibility can be defined as a measure of how easy it is to distinguish one letter from another in a particular typeface. Many things affect legibility. Often, the fonts sizes affect legibility as well as the selection of typefaces. That being said, not all typefaces are meant to be legible; display typefaces for example are designed to attract attention, they’re more about being stylish, elaborate and full of personality. Text types, however are designed to be legible and readable.
- Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. For scientists, readability can be objectively measured by the speed of reading and comprehension. Not paying enough attention to the number of characters in an average line of text will adversely affect the readability of the text. Most legible typography contains between 45 and 75 characters per line, including spaces. Also, now that we have fluid layouts, line lengths should be adjusted properly for different screen sizes and devices.
On the web people are constantly barraged with information, they spend less and less time on websites and they are looking for excuses to stop reading and go elsewhere. According to another Nielsen study on the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely. This makes factors like legibility and readability even more important because they not only help the visitors easily scan and read the text but make it more attractive too. Therefore they improve the overall usability.
Getting good at typography takes a lot of practice and dedication but it is a skillset that every web and user interface designer should develop. Typography has a great importance in web and interface design. A good typography will attract users, help them find information they looking for easily and it will increase conversion rates. Designers should stop looking at typography only from a purely aesthetic standpoint and see it as a utilitarian tool that improves interface usability and shapes user experience.