Designing Typography for the Modern Web

As web designers, it is our job to grow with the trends of the Internet. As new technology emerges, it’s our position to jump on board and see where it can take us. This includes trends all over the web, typography being a major player.

Many designers don’t consider type as a field of interest or focus. Ironically, typography is possibly one of the most important parts of our dynamic web. It helps deliver a website’s content to users from all over the world and it truly is an art to study.

I’ll be getting into a few concepts about typography for the modern web. Things haven’t changed too much since the previous years of web design, however many new techniques are being utilized and shared amongst the design community.

Styling Your Main Document’s Text Elements

Consider from a user experience perspective what your main elements of text may be. Of course you’ll need paragraphs and a few headings (h1-h3 mostly). You’d also want to style your links in a certain way, and maybe even include other elements such as blockquote properties.

All of these tags are useful when structuring your site’s content. These can all be styled through CSS properties in any web document with a large amount of precision. The main priority is to consider what each element represents and piece together a puzzle of how you want them to be displayed to your visitors.

Paragraphs are a good place to start as these will contain the bulk of your content. How do you think it’d be easiest for your readers to follow along? Many corporate and business websites use smaller font in paragraphs for a sophisticated look, but in the modern web things have changed.

Most paragraphs seen in blogs or social media sites today will use much larger font for paragraphs upwards of 16px-18px. This makes sense when you take into account the popularity of mobile users reading content on much smaller screens.

Separate Core Content from Headlines

Headings are also an interesting area to consider. You want them to stand out from your main text and be as scannable as possible. By this I mean your visitors should be able to quickly scroll down your page and check out each of your headings along the way with ease.

The best techniques in separating headings is styling each tier differently. Test out all sorts of colors and styles on your headings. Changing font type is another popular technique, for example styling paragraphs with Arial and larger headings with italicized Georgia.

When dealing with h1/h2/h3 elements you can generally get more creative than with simple paragraphs of text. This means adding text shadows, borders or unique underlines, or even messing around with font variants of big/small caps.

Creating a Stand-Out Hyperlink Design

Links are an essential part of any website. Unless your website home page is the only one on your entire site and goes nowhere else, you’re bound to have some hyperlinks somewhere.

What you have to consider here is not only how you want to style default links within your paragraphs or similar text, but how you want to style similar links used for navigation (header, sidebar, footer). Generally links in your paragraphs should stand out on their own. Funky colors and unique hover effects can take care of this nicely.

When specifying links elsewhere in your document you’ll want to remind yourself of the user experience perspective. A good example is with footer links as they don’t generally concern the masses of visitors to your site. They should be simple to read and out of the way, yet easy enough to scan and browse. Contrary to unique link styles in your paragraphs, outside areas work better with simple hover effects – an underline or light color change is perfect.

Utilizing Proper Line Height

Line height is a property many don’t consider when working to style typography. It’s a very important property set in your CSS which determines how much space in the grid is given between lines of text.

When styling elements of type try playing around with more/less white space. This can drastically change an entire design theme, especially within paragraphs. Adding height between lines of text makes scanning text much simpler. From a user’s point of view this is exactly what they’re looking for.

It also makes larger chunks of text seem more manageable as there’s room to breathe between each line.

Headings and other areas of lists or code can benefit from having their line height adjusted as well. Leaving room to breathe beneath and above these elements helps them stand out as foreground from your text. These elements become instantly noticeable as a user is reading through your page, making your content even simpler to browse at a glance.

Consider your Fonts for Mobile Devices

Sizing typography for the web can be tricky. You have to consider browsers such as IE6/7 and mobile devices displaying your text in unnatural ways. The simplest way to handle this is scaling your font sizes equally.

There’s a simple trick in fixing up your font sizes by setting your body element to have a 62.5% font-size. This brings down most fonts to unreadable sizes, but sets you up for a simple em sizing structure.

ems are units used in sizing font for the web, similar to pixels. They’re a great measurement unit to use as they allow for text to grow and expand naturally if your visitors resize the page. This is different from px as they aren’t resizable, and % values can be all over the place in different rendering engines.

By setting your body font-size property to 62.5% you essentially reset the fonts on your page to a scale of 10px. This makes working with ems easier as your font sizes will equate to 1/10th of the original. For example a paragraph with 12px font would be equally set to 1.2em. These also work great with line-height properties on text elements, too, as dynamic resizing is much more functional for those who need it.

Typography has many topics to consider when discussing the modern web. There are countless resources both online and in physical print dealing with these concepts. As a web designer typography should be a core focus during the design process.

If you’re also looking for inspiration there are many free font collections shared around. These can be fun to mess around with and integrate into your logos or concept artwork.

Consider browsing through CSS galleries or inspirational designs for further perspective into the world of typography. It’s a skill that doesn’t take too long to understand yet holds immense power in the hands of web designers.