Master Web Typography With These Expert Guides

Typography is one of those areas where you can never have too much knowledge – and when it comes to the web we have a number of unique challenges thrown at us. Aside from the aesthetic prowess of a well-chosen font, typography for the web comes with a host of UX implications, multiple device for you to consider and readability baggage.

So today we have a list of guides from around the web to help you make informed design choices when it comes to typography. We’ll be covering three main areas: the fundamentals of typography, responsive text and the use of icon fonts and SVGs. Each section comes with a number of articles that has something unique to offer, which means you’ll be well on your way to typographic mastery by the time you finish these guides.

The Basics

A Guide To Typography And UX

typography-header-01-630x358

We kick things of with am article by Hannah Alvarez that looks at the UX implications of typography for the web and mobile devices. This article goes into detail about width and height; serif vs. sans and colour – with a focus on the end result for users.

The All-Inclusive Guide To Web Typography Best Practices

typograph-best-practices2

This guide from Marc Schenker takes a different approach and looks at the best practices of typography for different elements on the page – including headings, body text and type over backgrounds. Not only that, but typical font sizes, line lengths, characters per line and even an intro into responsive type wrap up this guide article.

A Few Things You Should Know About Working With Web Fonts

newfangled

Much like the previous article, this offering from Justin Kerr runs through a number of the fundamental principles of web typography, as well as some of the finer details like height and letter spacing; legibility and readability. Not only that, but a quick list of resources for you to find new fonts.

The Ultimate Guide To Font Pairing

The-Ultimate-Guide-Font-Pairing-Blog-Title

This handy little guide in the Canva collection takes you through one of the most important elements of typographic design – font pairing. You’ll find a number of useful hints on how to match individual fonts and create added impact with different weights and styles.

Responsive Typography

Responsive Typography: The Basics

responsive-typography-perspective

If responsive typography is one of those things you have been meaning to get around to, reading up on and and experimenting with, this article by Oliver Reichenstein is a great place to start on the basics.

A Look Into Responsive Typography

responsive-typography-06

This guide from Internet Marketing Ninjas looks at responsive type with a focus on choosing the right fonts to start with. Ann Smarty weighs up the pros and cons of serif and sans-serif fonts for responsive design and wraps things up with her own list of responsive typography guides at the bottom of her article.

Responsive Typography Is A Physical Discipline

alistapart

Nick Sherman addresses one of our major obstacles with responsive text – the assumptions we often make about user devices when making design choices. Not just an issue for typography but every aspect of our design in an age where multiple devices rule.

Fluid Type

trentwalton

Trent Walton picks apart the fine balancing act we have to find when it comes to choosing and coding responsive text. He focuses on line length, column width and other design choices that impact on readability. Keep your eyes out for a nifty trick with a simple asterisks to help you nail your responsive column widths.

Introduction To Mobile Typography

4ourth

This introduction to mobile typography takes a step back and applies the basic principles of type to the modern concept of responsive design. This is a great all-in-one guide to typography in general and its application to the responsive web – as well as a list of further resources to expand your knowledge.

Icon Fonts & SVG

Icon Fonts And SVG Icons

hyperarts

This short guide quickly weighs up the benefits of icons fonts and SVGs – ideal for designers and developers who haven’t yet delved into icons for the responsive web and retina displays.

The Beginner’s Guide To Icon Fonts In WordPress

tutsplus

WordPress users get a trusty introduction into icon fonts form the Tuts+ team that runs through the whole process of creating custom icon fonts, installing them into your WordPress themes and working them into your code.

How To Use And Embed An Icon Font On Your Website

elegantthemes

This tutorial from Elegant Themes takes things a little further and shows you how to style your icon fonts with CSS animations, combine multiple icons and use them in desktop applications for all your design projects.

How To Use SVG Image Sprites

sitepoint

Craig Bucker moves us on to SVG sprites and highlights some of the benefits they have over icon fonts, like multiple colours, gradients and complex filters. He also shows you how to add them to web pages and addresses some of the limitations you might face when using them.

Icon System With SVG Sprites

css-tricks

Chris Coyier steps in with a wonderfully detailed look at how to create and use SVG sprites in the design and development stages of web projects. He also takes a closer look at the SVG vs. icon fonts debate and looks towards a future with better support for SVG sprites.