What in the Word? A Guide to Website Typography
Updated: Jan 6
Words, words, words: they’re on every single website on the internet, yet it can be a challenge making them look good, especially if you are new to website design. When your business’ website gets up and running for the first time, the meaning of your words tends to take precedence over aesthetics. Keyword research, marketing strategy, and search engine optimization (SEO) all thrive on choosing focused words and phrases to target your desired audiences. However, once those textual elements begin to fall into place, your business will need to pivot and consider the design and style of your website’s words through typography.
What is Typography?
Typography is best defined as the visual aspect of type or the way text looks to the reader, whether the words appear on a page or screen. Typography plays as much of a key role in website design as technical elements like page speed, indexing, and URL structure. Balanced, attractive, and purposeful typography ensures a pleasant visual experience, and your user is more likely to keep browsing all your content. But when typography is mismatched or jarring, your user can click away from your site in a moment’s notice.
This blog post covers the key elements of typography your business will need to know before making textual design adjustments on your website. While there are lists upon lists of other typographic terms on the internet, these five are often thought of as the main building blocks for learning about typography and implementing it effectively.
1. Fonts and Typefaces
Most people know what a font is, even if they aren’t a graphic designer. But there can be some confusion between fonts and typefaces, and it is good to know the exact distinction before you begin tinkering with the text on your website or working with an experienced graphic designer.
A typeface is the collective name of a family of fonts, like Times New Roman, Arial, Helvetica, Courier, Calibri, or Comic Sans. It’s quite common to say “fonts” when we actually mean “typefaces” since it’s the more familiar term. However, when it comes to working with typography on your website, specificity and correct terminology is key for efficient and accurate work.
The selection of styles within a typeface are called fonts, such as bold, italic, condensed, light, or regular. These styles can be unique in terms of weight, size, serifs, roundness, and many other specializations. For example, the typeface “Futura” (pictured) has three different fonts: “Futura Condensed,” “Futura Medium,” and “Futura Bold.” We can also describe typefaces as “font families” since it is the broader style grouping that holds all these specific fonts.
2. Serif vs. Sans Serif
Serif and sans serif are common terms you will hear in conversations about typography, and the distinction between them is thankfully very simple.
A serif typeface has small decorative lines or “tails” on the ends of letter strokes. The Times New Roman typeface often comes to mind when we think of serif fonts since we see it so often in books, articles, and other professional forms of text.
A sans serif typeface, by contrast, doesn’t have any decorative “tails” on the ends of letter strokes; “sans” is French for “without.” Sans serif typefaces, like the one used throughout the CodeMasters Inc. website, have cleaner lines and make for a smoother reading experience with less decorative clutter. Examples of common sans serif typefaces include Arial, Calibri, and Helvetica.
3. Alignment and Kerning
Alignment refers to the overall positioning of text on a page, and kerning describes the spacing between individual characters. Alignment has four basic settings across most digital software, including basic word processors. The exact terms used to describe alignment can slightly vary, but most of the time it is easy to figure out which setting you need for your task or project:
Flush left: text is aligned along the left margin or left side; also called left justified or align left.
Flush right: text is aligned along the right margin or right side; also called right justified or align right.
Justified: text is aligned with the left margin, but the spacing is automatically adjusted so the text is flush with the right margin as well.
Centered: text is centered and not aligned with either margin; usually suitable for titles but not large blocks of text since edges will be jagged and difficult to follow.
Kerning, as mentioned, is the spacing between characters, and fonts can have smaller or wider kerning depending on how the letters fit together. Making adjustments to your website’s kerning can help with the legibility of your text, like eliminating awkward gaps or adding in gaps for letters too close together.
4. Hierarchy of Text
Hierarchy is a basic principle of design that many of us already know how to do; we already see hierarchical arrangements of text in all kinds of print and digital media, so the idea of separating and ordering text is very familiar. Creating hierarchy in text simply refers to the practice of breaking up the content into smaller sections with headings and subheadings. The ordering of most prominent information to least prominent information is why this principle is called a hierarchy.
Hierarchy is an important aspect of website design since it assists with the organization of text on a page and helps readers quickly navigate to the information that matters to them. If readers have headings to direct them, they can quickly skim down the page, potentially interact with your content, and move closer to purchasing a product or requesting a service.
Typography works to implement hierarchy since designers use different font sizes, weights, styles, and even completely different fonts or typefaces to separate information and construct a clear layout. On this blog post, you can see hierarchy at play since our main title at the top of the page is a different size than our headings; our headings are then different than the body text because of size and boldness.
5. White Space
White space, or negative space, is an interesting aspect of typography since it refers to what isn’t actually on your page. But empty spaces around text and image are important for the reading experience since they provide your reader room to breathe, eliminate clutter, and ensure better clarity and understanding of the content. From spacing out your margins to adding room around your images, your business can strategically use white space to focus attention on the aspects of your web page that matter for conversion and interaction.
Time to Tackle Your Typography!
This blog covered some of the foundational aspects of typography, but there are a number of other guides your business can consult during the process of reformatting and redesigning the text on your website. Wix.com and Hubspot.com cover additional elements of typography, dos and don’ts, and other design advice; their diagrams and examples are also very helpful, and we credit the images used in this blog to both of them. Good luck working on your website’s typography, and don’t hesitate to use the people and resources around you for help.