50 Web Typography Tutorials, Tips, Guides and Best Practices

Web typography is the most undervalued and misunderstood aspect of web design. There are many reasons for this, probably, the most common factor is it is ignored purely for simplicity. Why over complicate something that works fine as it is? Web typography is all theories and opinions, that is the point. The evolution of web design relies on opinions and theories, otherwise we would be stuck with the repulsive web designs we had 10 years.

So, yes, web typography is very important and you cannot afford to ignore it any more.

In this post we have collected great reources to help you understand and implement successfully web typography on your web pages. You will find tutorials, tips, guides, best practices, tools and inspirational showcases. However important highly you grade web typography, every designer should take something from this post, and I will start you off by urgeing you to read this article: Web Design is 95% Typography.

CSS Typography Tutorials

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!View Demo

As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages.

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property.View Demo

Pullquotes are quite possibly the single most effective element that can be added to text to improve its scannability. After all, the publishing pros in the magazine industry have used them for years, both as a design element and as a courtesy to readers. In this tutorial, the author, shows you two different methods of creating pullquotes for your blog. Odds are good that you’ll be amazed how easy it is to get them up and running.

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Curly quotes aren’t like traditional characters. Like full stops, commas and hashes they float within the character space and leave lots of dead white space, making it bloody difficult to manipulate them with CSS. Styles generally fit around text, so cutting into that character is tricky indeed.

On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must be calculated with care in order that the rhythm is maintained.View Demo

While the descriptions and basic uses for CSS typography controls have been beaten to death, there are still many rich typographic abilities of CSS that are not well documented. In this post, the author, demonstartes many underused CSS typography tecniques, typewriter text, hand writing and reflections are just some of the tecniques shown.

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself. Whilst this can be achieved with background images, this will be useless when the user resizes the text, as the text will break out of the lines and look a mess.View Demo

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser.

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.View Demos

Headings are elements that describe the content that follows and also define a document’s structure. Similar to large headings and subheadings in printed newspapers, html headings should briefly describe what the page or sections are about, making it clear to the reader (human or non-human) what to expect if he continues to read. We have <h1> to <h6> heading tags. The numbers in the tag name carry a certain “weight”, where <h1> is the “heaviest” and <h6> is the “lightest”.

You can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites.

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. In this great article, Jon Tangerine, describes in detail 12 examples of paragraph typography.

Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

One issue that many people face with the vertical rhythm technique, is that it can easily be thrown off by non-text elements, such as images. One solution to this issue is to make sure your images always have a height that is a multiple of the line height being used by your document. Unfortunately, this is usually not practical for production sites. In this post the author solves this problem with the always reliable jQuery.View Demo

Typography Best Practices

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

Many designers and developers often equate typography with choosing a font or typeface, while others simply forget that 95% of web design is typography and tend to forget about it. Clearly, if typography is really 95% of web design, it should be at the forefront of the mind of every designer and developer. Here are Six Ways To Improve Your Web Typography.

First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.

The world of print design still hasn’t made a substantial impression on the web. Sure, a few things are nicked now and again, but most web designers remain blissfully unaware of what their QuarkXPress- or InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when web designers should turn to print specialists for their know-how, and one of these occasions is the use of type.

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

Embedding Fonts

TypeSelect works by leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser’s native text selection funcationality. With TypeSelect you are able to interact with beautifully rendered typefaces just like you do with normal text.View Demo

FontJazz does not take the usual road, where an image is generated on the server-side, for every headline. Instead, FontJazz implements a simple type-rendering engine in JavaScript, which means that any headline is rendered 100% client-side, without any kind of server-side dependencies or bandwidth overhead.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements.View Demo

Scalable Inman Flash Replacement (sIFR) is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents. sIFR requires JavaScript to be enabled and the Flash plugin installed in the reading browser. If either condition is not met, the reader’s browser will automatically display traditional CSS based styling instead of the sIFR rendering.

Websites are basically limited to the default fonts that come with all computers. That’s because a user must have the fonts installed on their computer in order to have it show up in their browser. Font Burner bypasses this by adding a simple block of code to your webpages and instructing the browser to use a specified font from the Font Burner repository.