Web Typography: The Complete Guide for Designers
Get ready to supercharge your web design skills by learning the ins and outs of typography. This comprehensive guide to web typography will tell you everything you need to up your web creation game.
Although its strong significance may often be overlooked, typography plays a fundamental role in web creation — this means branding, visual design, user experience, user interface, content strategy … the whole entourage. But before we begin, what is web typography and why is it important? In this article, we will cover everything you need to know about typography as a web creator. We’re talking concepts, principles, terminologies, guidelines on choosing the best fonts, and of course, action items.
In its simplest terms, typography is the art and technique of arranging type. It’s not only about the design or composition of the letters and characters and their arrangement. Of course, it’s about those things — but it’s also about communication, visual identity, brand persona, usability, and much more.
Before we embark on understanding the ins and outs of typography for web design, an important topic to cover is why typography is so important. Ultimately, when people visit a website to read its text, they’re looking to find out information about you — and we know that words matter.
As web creators, we can definitely appreciate that presentation is of equal value to a website’s content. Just as a website’s visual design, interactive features, and overall functionality determine the quality of a website, the same is true for its typography.
After reading this article, you’ll be equipped and empowered to implement your knowledge and understanding of the essence of web typography and how it can make or break any and every website.
The Challenges of Web Typography
Understanding Screen Reading vs. Print Reading
At first, you may think that there isn’t much of a difference between reading from a screen and reading from paper. After all, they’re both visual processing experiences where you consume information by reading letters of the alphabet upon a background. But, think again. The differences between print design vs web design and their respective reading experiences are indeed plentiful.
Logically, the most fundamental difference between print design and web design is that print is a physical, tangible object with fixed, static content. Alternatively, on-screen content is dynamic, constantly changing, as the screen is an adaptive medium.
This means that each piece of paper has a definitive, constant size that doesn’t change, and we know in advance what that paper size is. When designing content for a screen (whether imagery, accents or textual elements), we are designing for a range of what can be — such as different resolutions, sizes, and devices). But that’s a topic in and of itself, which we will discuss shortly.
From a behavioral perspective, when we read digitally, we do more scanning and jumping around. This could be because we’re looking for keywords — in order to get as much information as possible in the shortest amount of time. In terms of speed, studies performed by Nielsen Norman Group have even found that people read 25% slower when reading from a screen compared to when reading from paper.
Accommodating Different Screen Sizes
As web creators, the moment we hear the words “different screen sizes”, many of us will often immediately think of responsive design. And when we say responsive design, we don’t just mean websites that look great on both desktop and mobile sites. It’s more than that — since as of March 2018, Google announced its “mobile-first indexing” initiative. In practice, this means that the Google search engine predominantly uses the mobile version of the content for indexing and ranking. So, even if your site targets desktop use-cases, it’s still just as important for it to be mobile-friendly, at least if you want it to stay on Google’s good side.
So, how does this connect to typography?
It means that your designs, including your text’s (be it titles, headings, paragraphs, button texts, etc.) typography — all need to look good on mobile. In terms of our design process, it makes things a little bit more complex. You have a smaller screen to work with, but not necessarily less text. Often, this will mean that you’ll need to craft a typography scheme that is flexible in that it can accommodate multiple screen sizes. This priority can trickle down to font color, typeface, font weight, font size, and many other design choices.
Once you have a deeper understanding of these individual typography components (as well as how they fit together in the web design process), you’ll be able to apply your knowledge to designing a flexible layout that includes responsive typography choices.
And don’t forget the relationship between typography and user experience. The need for responsive typography often stems from the need to consider the website visitor’s circumstances of how and where he will be viewing the text on your website.
Considering Screen Resolution
In its most general terms, screen resolution refers to the number of pixels a screen contains horizontally and vertically, such as 1024×768. In other words, the number of dots a screen shows per inch. In practice, (and make sure to jot this down for future reference) — the resolution size (aka the measurement of the maximum number of pixels) that a screen’s resolution can hold is 1024px horizontally and 768px vertically.
Regarding how resolution sizing affects what we actually see on the screen: lower resolutions display elements in a larger size on the screen in order to keep the display as sharp as possible — yet this means that less of the page will fit on the screen. In turn, higher-resolution monitors will be able to display more of the website page, such as the entire fold plus a little below the fold — but also causing the elements on the page to look smaller albeit sharper.
In the context of typography, when we say that a designer needs to consider screen resolution and choose the font size based on resolution, this means choosing the optical weight (how human eyes perceive the size and significance of an object) to make sure that the typeface definitely works as intended with every screen size and resolution.
As we said, increasing screen resolution increases the number of pixels per inch. In the case of typography, font sizes are a fixed number of pixels – therefore, the higher the resolution, the smaller the font will look, as the font pixels take up less space. Ultimately, the amount of space the text takes up on the screen is a response to the screen’s resolution. And this is where the discussion of responsive typography comes into play.
Sticking to Responsive Text
Taken from: css-tricks.com
Responsive text itself is the design principle that texts on a web page should be easily readable on a variety of devices and screen sizes. Creating responsive typography doesn’t only mean choosing a text that changes in size among different screens. It’s also about readability, which requires a relationship between text and its surrounding elements — wherein the size of each element is determined in relation to its surrounding elements.
Designers and developers will often program the site’s type size to be determined by the screen size itself, which is a common method used in CSS stylesheets. Another CSS-related method is to use the font measurement units of rem and em. We will address both of these topics later, too. Ultimately, responsive text is sized in relation to surrounding factors, which means you’ll be creating font-size constraints based on things like screen size, viewport, breakpoints, and rem and em sizing units.
Assuring Accuracy Through Monitor Calibration
When we say calibration, what we’re referring to is calibrating your monitor so that it displays color and contrast completely accurately. By doing this, your work (as a designer or even as a photographer) will be viewed by website visitors exactly as you intended it to look when designing it.
The main reason that monitor calibration is crucial when crafting your website typography is that both the font color and the contrast between the text and the background can be affected. The last thing you want is for there to be a poor contrast between your font color and its background. When it comes to readability, if the human eye struggles to make the distinction between the text and its background, they may quickly give up on reading that text and therefore give up on your website and/or its content much sooner than you would have hoped.
The Key Elements of Web Typography
Now that we’ve gotten to know some of the challenges of web typography, the next stage is to explore the different concepts and definitions that typography as a subject entails. By understanding this terminology in better detail, we will be one step closer to mastering typographic skills and applying them to our design work.
Understanding Generic Font Families
As we start to grasp the significance of typography in web design, one of the first design terms to understand and master is: generic font families. The typefaces and fonts we choose from each time we style the text on our websites can each be categorized under one of two major styles: serif, sans-serif, or cursive. Now let’s understand this classification and how to know the style and font family of any given typeface.
In its most technical sense, serif font families have decorative strokes or tails (some call them feet or tails) that finish off the end of a letter stem. These strokes can vary in weight, making some areas of a letter thicker or thinner than others. As a collective style category, serif typefaces are widely known to be smooth, rounded, and decorative — commonly used for lengthy bodies of text, such as books, newspapers, many magazines, etc. This is largely because serif typefaces are easily readable when written in small body copy sizes.
Some of the most known Serif font families include:
- Times New Roman
- Playfair Display
As you may have already noticed, brands and professional businesses often use serifs for their logo (and website) when they want to appear more reputable, established, formal, etc. Examples of these business-types can be law practices, media publications, insurance companies, medical offices, and the liking.
Sans serif typefaces are those that don’t have extending features (serifs) at the end of their strokes. This description actually originates in the French language, meaning sans (without) serif. These typefaces tend to have a more uniform thickness throughout the different parts of each letter, and are used to convey minimalist design, modernity and most of all, sheer simplicity.
Going back to our discussion of the differences between screen reading and print reading, it’s important to take note that serif fonts are more popular for computer screens – such as websites, blogs, software, etc. Within those use-cases, sans serif fonts are used for display use, such as headings, subtitles, button texts, etc., rather than for body texts.
Some of the most widely used sans serif typefaces include:
- Open Sans
- Source Sans Pro
- Proxima Nova
Google’s Roboto Font Family
The term typeface can also be referred to as a font family: a set of characters (letters of the alphabet) with the same design — of varying sizes and weight. Typefaces shouldn’t be confused with fonts, as a font is a graphical representation of the typefaces’ text character. In essence, a typeface is a family of related fonts (hence the term “font family”), while fonts refer to the weights, widths, and styles that are each a variation of that typeface.
To put it in more concrete terms, here’s an example:
Roboto is the name of a font family, which is a range of typefaces of the same style, and each of those variations are considered individual fonts. Based on these nuances, we can now understand that Roboto Thin and Roboto Bold are actually not the same font — they are two separate fonts, but are part of the same (Roboto) font family.