What Is Typography in Web Design?
Typography in web design refers to the use of fonts, spacing, and text layout to improve a website’s visual look and accessibility. It’s how web designers
ensure information is communicated well through a logical hierarchy
help users understand how to use and navigate the site
create an overall brand identity.
Typography refers to the arrangement, style, and size of text across a website. But typography is not just arranging typefaces and fonts in certain ways. Executed well, all website copy will be clear, readable, and scannable for users. Poor typography can make a website hard to navigate, and its content frustrating to read.
When it works well, you shouldn’t even be aware of or notice typography. The blend of form and function should be such that designs are both clear and creative.
Elements of Typography
Fonts and Typeface
A typeface is the collective name of a family of fonts (for example ‘Times New Roman’), whereas a font is a stylistic variation of a typeface - such as bold, italic or condensed. (In summary, the typeface is the style of lettering, and the font refers to the variation, like size or weight.)
White Space
Clarity is improved by adding space around graphic elements and text. This prevents clutter and allows the page to breathe. Additionally, empty space surrounding text helps to differentiate sections or blocks of information, and draws attention to the text.
Contrast
Sometimes large type can be used to great effect, either as a stylistic choice or for readability. Alternatively if you lower the variance in contrast between header and body text, it might create less visual impact but will still provide sufficient clarity to be readable.
Kerning
This refers to the horizontal space between two characters. Different typefaces have different levels of kerning to help improve readability. It’s common for there to be specific kernings between every pair of adjacent characters so they all fit together nicely.
Hierarchy
In web design, effective typography creates hierarchy by guiding readers and highlighting crucial information through effective deployment of font sizes, weights, and styles.
Hierarchy differentiates text elements through variations in size, width, and placement, instantly conveying the relative importance of information to readers.
For instance, newspaper articles typically display headers in a larger, more prominent font than body text, allowing readers to quickly grasp the article's main points. This practice not only establishes a clear hierarchy but also contributes to a well-structured and easily navigable layout.
Colour
The selection of colours is equally important as font and spacing when considering typography. Colour not only helps express the message and emotions of the text but also plays a key role in ensuring that your typography is both legible and visually appealing.
Typography and UI/UX
Typography plays a crucial role in both UI (User Interface) and UX (User Experience) design. In UI design, it's used to communicate information, guide the user, and establish the overall visual style of the website. Good typography in UI design enhances the usability and accessibility of the ecommerce store by making text legible, readable, and scannable.
In UX design, typography affects how users perceive and engage with the content, as well as how easily they can find and understand the information they’re looking for. This can influence how website visitors process the tone and personality of a brand, as well as its credibility and trustworthiness from the information it provides.
Typography is a key component of both UI and UX design that can significantly affect the success of a website by enhancing its usability, accessibility, and visual appeal.
Typography Tips And Advice
Writing valuable website content is the first step, but deciding how best to present it on your site is an equally important second step. Here are five typography tips when it comes to website design:
1. Define Brand Identity
Before embarking on any creative venture for your business, make sure you’ve clearly defined your brand identity. This encompasses the tangible and intangible elements that define a brand's personality, appearance, and behaviour, including name, logo, visual style, and messaging, ultimately shaping how consumers perceive and interact with your brand.
Search for a typeface that expresses your brand’s personality. Begin by shortlisting a few that feel right to you, then narrow it down once you have a better understanding of what you’re looking for.
2. Be Consistent
The importance of consistency is sometimes underestimated but it’s needed for everything from your website colour scheme to typography choices. Across the range of copy on your website, from the individual sentences that make up your microcopy, to product descriptions on PDPs and the headers on your homepage, consistency is key.
Using the same fonts and typefaces throughout your website helps create this consistent feel. Use the same typefaces in the same contexts. For example, if the heading on one page is written in Times New Roman Bold in a size 40 font, make sure the titles on other pages are the same.
3. Use Colours That Complement Each Other
A common pain point for website visitors is a poor pairing of text colour and background colour, in which the two do not contrast enough to maintain legibility. Don’t layer text over a background with similar colours, and take care when placing text over images. It’s best to avoid using a light colour like yellow on a white background, or a dark colour on a black background.
4. Make Sure It’s Easy To Read
Text is there to serve a purpose. Whether you’re crafting the typography for your call-to-action button or choosing a typeface for your Shopify site, the end result has to be legible. There’s nothing worse than having to squint to read a blog post, or clicking the wrong button because it wasn’t clear what it would do.
Check that your text is large enough to be legible on desktop and mobile devices. The typeface you choose also needs to work well in the font size you’ve chosen. Some typefaces may look great as headers, but don’t work so well for body copy.
Make sure you provide sufficient space between lines as well. A good rule of thumb is to allot vertical space based on the font size - so for example, with body text, make the spacing 1.5 times the height of the letters.
5. Make Text An Appropriate Size
Web designers specify font size in pixels (px) rather than points (pt). This is because a pixel is a standardized unit online, whereas a font point is not. Two people reading 12pt text on the same website might see different things depending on their devices or web browsers.
A common practice is to set all website text to a minimum size of 16px and you should vary the size of your text to assist readers and establish hierarchy.
Regarding text hierarchy, headings should always be larger than the body text and use the heading structure (H1, H2, H3 etc). This makes the hierarchy logical and also helps search engines understand the importance and hierarchy of the page’s content.
6. Limit The Typefaces and Fonts
Setting limitations rather than having unlimited options can be really helpful in creative endeavours, and this applies to typography.
Limit your website to two or three typefaces for a clean and organized look. Choose one typeface for titles and headers, and another for longer text like descriptions and blog posts. A third typeface can be used for calls-to-action and other microcopy, but is not necessary.
7. Use Standard Fonts
Choosing a web-safe font will guarantee your text is easily readable for everyone, regardless of the device they’re viewing the website on. If you choose a non-compatible font, the system will default to a font that might look worse.
Second, readers are accustomed to standard fonts online, enabling them to scan and comprehend text quickly. Typography should enhance readability, not detract from it.
Third, web-safe fonts tend to lack some inconvenient design flaws seen in other fonts. A standard font, for example, won't contain any strange kerning that makes two letters look stuck together. They also minimise instances in which two different characters are hard to distinguish from each other.
If you’d prefer a non-standard typeface or font, there’s always a chance some browsers won't recognize the style and instead display something like plain Times New Roman.
Consider using a font stack in your CSS file, which provides backup fonts if your primary font choice fails. Include standard fonts in your font stack to ensure optimal text display for all visitors.
8. Pair Fonts
When choosing fonts for your website, remember to prioritise your brand identity. Select one font for titles and another for body text. The font used for body text should be clean and easy to read. For headers, you can choose a more expressive font that reflects your brand identity.
Our team of Shopify designers are highly experienced in creating typography for ecommerce sites. If you need a team that takes into account every tiny detail when it comes to creating beautiful websites with superb UX to help you sell more, get in touch and we’d love to help.
