Web typography refers to the creative design of the text on your webpages. This includes how the letters and characters are designed and arranged, as well as the role they play in your visual identity and brand persona. The right web typography will look great, clearly communicate your message to visitors and make your website easier to use.
For typography experts, the basic principles of good typography come naturally. But for beginners, it’s important to know some basic do’s and don’ts for web typography. Below you’ll find some general guidelines you’ll want to keep in mind as you choose typography for future projects.
DO establish a typographic hierarchy.
A typographic hierarchy involves using various sizes, weights, colors and contrasts to give pages structure and guide users through content. As an example, you should use a bolder, larger text for your headings. Without this hierarchy, it becomes much harder to scan the content and absorb the most important parts.
DON’T make the text too small.
We recommend going no smaller than 16pt, as you want your content to be easy on the eyes, even for those without perfect vision. If you’re using a font with particularly large, easy to read characters, you can try going down to 14pt. Otherwise, choose a larger font, especially on text-heavy pages. Also avoiding using too many font sizes – three or less is usually best.
DO choose an appropriate font.
When selecting a font, make sure that it’s legible. Some fonts look nice, but your brain has to work a lot harder to make out the words. Also consider the color contrast, character spacing, tracking and leading. Avoid using all uppercase text, as this forces the eyes to strain. We also recommend limiting your font types to three or less.
DON’T ignore the contrast.
Increasing font size is a good way to improve legibility, but you don’t want to forget about the contrast between the background and text. The standard is to put dark text on a light background, or vice versa. Avoid clashing colors or putting a barely-visible gray onto a white background.
DO give your text space to breathe.
Just as white space is important to your web design, it’s also important to your typography. Having white space between each line can make your text easier to read. You can achieve this by slightly increasing your line-heights.
DON’T make your paragraphs too long.
Ideally, your paragraphs should be about 40 to 60 characters per line. If the lines are too long, readers can lose focus. If the lines are too short, the reader’s eyes will travel back and forth too often. The optimal length for body text is around 40 to 60 characters, so use this as a guide.
DO use standard fonts.
With so many fonts to choose from, it’s tempting to choose something fun and unique. However, we recommend sticking with standard fonts like serifs and sans-serifs. These fonts draw readers to the content and make it easy to absorb the messaging. Decorative fonts, on the other hand, can distract users.
By following these do’s and don’ts for web typography, you can create a website that’s comfortable and easy to read. For recommendations on the best fonts for your website, contact Magna Technology today.
