Web Typography: Learning How To Get It Right The First Time
Anyone with more than a few weeks of web development experience will agree that the best way to create an online presence which lasts for years is to create content your audience will love. This is as true for web designers now as it was 20 years ago, but modern designs need to factor in that the demand for responsively designed websites is only going to increase over the next decade or so. One of the key elements of great responsive design is web typography which is so fluid that the end-user never even notices they’re reading a mobile site.
You don’t need to be a coding whiz to create web typography good enough to make other people jealous. No, instead all you need is to be brilliant at the basics of typography and the rest will flow from there, as it does with most people involved in a creative industry.
Your Typeface Matters
The typeface you choose for your design can have a massive impact on the readability of your site. Generally speaking sans-serif typefaces work best for web publishing, but if the project demands a serif typeface then use that instead. Look at your core messaging, and then your target audience, and allow that to dictate your choice of typeface above any personal preference you might have. Or if you’re just being lazy and constantly using Arial you need to stop that and try something new!
Web Fonts
You could go out and purchase, or download, an entire library of new fonts to use on your clients’ projects. The downside here is that the typography you create for the site might look amazing on your PC/Mac, but end-users will see a default system font instead. So instead of wasting time and money with “static” fonts, why not just use web fonts? Using this type of font ensures that your typography will stay looking fantastic regardless of the browser or operating system being used.
Text and Not Images
With site response time now being used as an SEO ranking factor it’s important that you limit the
number of images you use as part of your design plan. High-speed broadband means that users can download gigantic background images, or headers, very quickly, but why not use text instead? On top of allowing the site to load more quickly your headers are going to look just as visually appealing on a smartphone as they do on a desktop PC, although they will be somewhat smaller.
Colors
The color choices you make can either make or break your typographic efforts. I shouldn’t need to remind you that using light-colored text on a light background is not only infuriatingly bad design, but it also makes the text on the site impossible to read. For years I’ve watched designers using a light gray color for their primary font, and then using a bright white background and I’ve never been able to understand why. UX testing should show the sites were illegible, and would probably have reduced site visit durations to as long as it took somebody to get back out to Google. Keep your typography color choices simple, yet classy, and you can’t go wrong.
Give It Space
Some designers feel the need to cram text into every tiny little space on the page. This results in a page which feels crowded and looking like it was created as part of a high school project. Allow white space to be part of your design, and then use kerning, leading and tracking to make your text easy to read no matter what resolution, or device, it’s being viewed on.
ABOUT THE AUTHOR
