Typography is a crucial factor in determining the ease of navigation and the overall user experience on a website. It significantly impacts how comfortable and clear it is to comprehend and read the text-based content present on the site. By recognizing the significance of typography in web design, you can enhance the quality of your design and set yourself apart in the competitive landscape of web design. Creating a smooth and visually appealing online experience will ultimately benefit your customers and keep them engaged on your platform.
In general typography is the art of arranging text for optimal legibility, readability, and accessibility.
Things we will cover in this post are:
- Importance of typography in web design
- Types of Typography
- Typeface vs Font
- Font tracking
- Leading
- Hierarchy
- Limit the number of typeface
- Fix your font sizes
- Limit your paragraph length
- Increase the leading Space
- Text Contrast
- Units of measurement
Why typography is Important in web design?
When a user visits a website, they are typically seeking specific information, and the quicker they find it, the better their experience. In addition to being easy to read, text should be easily scannable and comprehensible.
Text should be legible on all digital platforms, regardless of the device type or screen size. Typography plays a critical role in establishing a high level of visual hierarchy, creating aesthetic harmony, and setting the tone for the entire product. In summary, typography is a crucial aspect that should not be overlooked, and understanding at least the basics can help in creating better designs.
Typography Types
For website, the terms good and bad typography definitely exists, just like every other design element.
You make your text more easy to understand just by paying attention to how your words look and how easy they are to read. By carefully and purposefully choosing fonts, sizes, colors, layouts, alignment, and other elements that influence the text style, we create better experience for the user.
Typography differentiates between two main types – serifs and sansserifs, and a number of secondary types like script, slab, display, etc. There are various ways in which typographers classify typefaces; nevertheless, the following are the most common:
Serif – A serif is a small ornamental projection off the main stroke of a letter. Fonts with this styling are called serif fonts. Primary used in printed medium. Examples: Times New Roman, Sentient
Sans Serif – “Sans” is French for “without,” and fonts without these ornaments are labeled as sans serif fonts. Mainly use for digital mediums. Examples: Arial, Inter, Roboto, SF Pro
Monospaced – Every character in a monospaced font takes up the same width. Created at a time when typewriters were popular, these fonts have seen a revival due to their use in text editors (and some fancy old-school-themed websites). Example: Space Mono
Cursive – Cursive fonts imitate handwriting. They are more appropriate for titles and headings than body text since they favor aesthetic attractiveness above readability. Example: Dancing Script
Display – Display fonts tend to be biggest and boldest of the type used for main headings. Because of the attention they draw, they work best as headlines. Example: Satoshi Variable
Typeface vs Font
When a user visits a website, each piece of text they encounter on the screen is presented in a typeface that influences the mood, voice, and visual aesthetic of the website. Typeface and font are terms that are often confused, but they have distinct meanings.
In essence, a typeface is a group of alphabetic and numeric characters that possess a specific appearance and style. Examples of common typefaces include Inter, Arial, Roboto, and SF Pro.
Fonts, on the other hand, are specific variations within a typeface. A typeface can have multiple fonts, each with different attributes such as weight (e.g., bold or light), size, italicization, capitalization, underlining, and more.
For instance, Inter is a versatile typeface with various fonts like Light, Medium, SemiBold, and Bold, providing different styles and weights for designers to choose from.
Tracking
The overall spacing between letters in a block of text is known as tracking. It reflects the spacing between characters in a line or block of text. It is essential to note that tracking refers to the general spacing between all characters and does not specifically address the spacing between individual letters, which is known as kerning.
Adjusting the tracking can help ensure that the text aligns with a specific line length; however, it’s important to use tracking judiciously. Excessive tracking can make the text harder to read, so it’s crucial to strike a balance and avoid overabundant spacing.
Leading
Leading refers to the vertical spacing between letters of two different lines. The units for leading are pixels of points. Again, the right amount of leading helps readers navigate text — too much or too little can equally make it hard to read. Each text layer generally should have different leading for better hierarchy.
Hierarchy
Most websites separate their material into parts according to distinct topics. These parts are identified and designated using headings. The text is arranged on the page in a hierarchy that goes from most prominent to least prominent.
A strong hierarchy is necessary for pages to be digestible and easy to navigate. Readers should be able to choose the section that most interests them only by using the names alone.
Look at how cleverly Pipedrive uses hierarchy to explain their product’s core functionality and top features.
Limit the number of typefaces
To maintain visual consistency, use no more than two typefaces on your website. Many website opt for only one typeface and still do better than others. Particularly if they choose a typeface that is readable and versatile, offering several styles for headings, body text, button text, etc.
Cartloop.io is a great example of a website with one typeface but with a variety of fonts in use. As you can see yourself, you don’t need many typefaces to build great looking sites.
Fix your font sizes
A common practice is to set regular body text to a minimum size of 16px. This is roughly the size of body text in printed media, and is the smallest font that most people can read without needing to zoom in. It also has it’s uses for responsive web development were 16px is the font’s root (base) size.
To further establish hierarchy, you can and should increase or decrease the size of your text, all depending on the context.
Don’t go overboard with massive or too small fonts, though, it rarely looks good, and besides, you’ll have a hard time designing a responsive experience with your font sizes all over the place.
Look at the mailchimp using 16px for the bodyfont.
Limit your paragraph length
You should keep your paragraph length between 40 and 80 characters long since that’s about the most optimal setting.
Anything less requires users to look ahead too frequently, which is really distracting. And anything above that will make it too hard to read, and fatigue eyes much quicker. You will need to look for anchor points for each new line as it moves back to the left side of the text block.
These length constraints give some leeway when creating different web layouts. Remember to include around 60–70 characters in each line, and don’t go over that. Your users’ eyes will appreciate it.
Increase the leading space
Having adequate whitespace between lines of text and after line breaks makes it easier for readers to follow the text, which is very important. Accessibility standards usually allocate a specific amount of vertical space to text based on the font size.
For starters, set the spacing between lines of body text to 1.5. This will result in leading that is half as tall as each line of text.
For headings, it’s recommended to make this space a little bigger.
You should start with a spacing of 2.5 between heading paragraphs, then increase or decrease it as necessary.
If you don’t want to edit this manually, look up Material 3 type scale guidelines.
Text Contrast
The contrast between text and its background is essential for legibility. The ideal colour combination for legibility, however, is dark grey text on a light grey background, not pure black (#0000) on pure white (#ffff), contrary to popular belief.
The contrast these two colours create is very high and its found to be tiring to look at after longer periods of time.
Dark grey on a very light grey background might be a bit easier on the eyes than pure black text on a pure white background.
This also works the same in the opposite direction, with pure white text on a pure black background, and light grey text on a dark grey background. These differences are subtle but can make a difference when users spend longer time reading the content.
What units of measurements to use in web design?
The standard unit of measurement for online content is Pixel (1 px). We use pixels to describe the base values of shapes, text, distances, etc. However, when creating responsive designs, it is preferable to set all size and spacing settings using relative units like ems and viewport width percentages rather than absolute, non-scalable units like pixels.
A relative unit of measurement called an em corresponds to the current font size of the HTML element that’s set as a default size of 16px for paragraphs. Following that logic, 2em would therefore be twice this size = 32px and 2.5em would be = 40px.
When font sizes change, spacing requirements need to change too. When the font size is set to 16px, a line height of 24px might work perfectly fine, but at 32px tall, that height would be far too small.
Designing responsively means using relative units. If you create your site so that everything is relative to the root font size, you can modify the root size without affecting the rest of the site.
Conclusion
In conclusion, typography primarily differentiates between serifs and sans serifs, with additional types like script, slab, and display. A typeface comprises alphabetic and numeric characters with a unified appearance, while fonts are specific implementations of typefaces. Tracking and leading refer to the spacing between letters and lines of text, respectively. Pixels (1 px) serve as the standard unit of measurement for online content. For responsive designs, it’s preferable to use relative units like ems for size and spacing.
Leave a Reply