HTML Tutorial – 6 Ways To Improve Your Web Typography

Introduction

Typography is the art of designing letters, words, paragraphs, and how they interact with each other. 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.

1. Understand the Basics of Typography

The Basics of Typography are important for all designers, whether or not they are designing for the web.

Typographic Definitions

Below are some basic typographic definitions that every designer/developer should understand when dealing with typography. This list is by no means comprehensive. See the Recommended Reading List at the end of this article for more comprehensive glossaries.

• Ascender: Any portion of a lowercase letter that rises above the meanline.
• Baseline: The line upon which the text rests.
• Cap Height: The top of a given line not including leading.
• Descender: Any portion of a lowercase letter that drops below the baseline.
• Kerning: The width of space between two given characters used to achieve the optimal appearance. Generally, kerning is automatically done by the given application, but it is necessary to understand that Photoshop (or other image editing software) does not neccessarily provide the same kerning as does a web browser.
• Leading: The height of spacing between any two lines in a section. The optimal amount of leading is generally half the height of the font’s size. For example, if using a font size of 12px, there should be 6px of leading.
• Letter Spacing: The default width of space between any given set of characters. This is also sometimes called “Tracking.”
• Ligatures: Special glyphs that combine two separate characters into one glyph. Ligatures are often automatically created in design programs like Photoshop or InDesign but are generally not rendered as individual glyphs in web browsers. If the use of ligatures is desired on the web, using HTML or Unicode character entities to create them manually.
• Line Height: The height of a line including any leading added. Line Height is the most effective method of controlling vertical rhythm. For example, if using a font size of 12px for standard body text, there should be roughly 6px of leading, which translates into a line-height of 18px.
• Measure: The width of a given line or column of text (generally in characters). The optimal amount of measure for reading in my experience is generally 60 characters, but this varies from font to font based on letter spacing and word spacing.
• Rendering: The process of interpreting type by a browser or other application. Every browser, application, and operating system renders type differently.
• Weight: The boldness or lightness of a given font. Online with rendered type, it is best to stick to two font weights: normal and bold. With image-based typography, using other weights such as Semibold, Light, and Black, is much easier.
• Word Spacing: The width of a space between two given words.
• X-Height: The height of the text between the baseline and the meanline. This is equivalent to the height of a typical lowercase letter (originally, the “x” glyph).

Typographic Scale

To create an effective typographic scale, the best method I have found is to use the unit of size measurement “em,” as it sets the size relative to the base of a given document. In the example below, the base font-size is 12 pixels, which would set the standard font-size for paragraphs at 15 pixels.

body {
 font-size: 12px;
}
h1 {
 font-size: 5.0em;
}
h2 {
 font-size: 4.0em;
}
h3 {
 font-size: 3.0em;
}
h4 {
 font-size: 2.0em;
}
blockquote {
 font-size: 1.5em;
}
p {
 font-size: 1.25em;
}
input {
 font-size: 1.0em;
}
small {
 font-size: 0.75em;
}

Vertical Rhythm

The vertical rhythm of line spacing that provides the optimal spacing for the eye to follow. To create this rhythm it is best to follow a baseline grid. From my experience, online vertical rhythm is best set at or near 1.5em. NETTUTS+, for example, uses a vertical rhythm of 1.6em, which equates to roughly to a 17.6px line-height (based on a 11px font-size).

Below is a standard vertical rhythm that I use on many of my websites built on the 960 grid system. To achieve vertical rhythm appropriately, every paragraph should have a margin or padding below equivalent to the standard baseline grid line-height.

body {
 font-size: 12px;
 line-height: 15px;
}
p {
 margin-bottom: 15px;
}

2. Design in the Browser

As most designers and developers know, websites render differently in different browsers. This is especially true with rendering fonts. Below is a comparison of how five popular browsers render the same text differently:

When building a typographic layout or a site that is content-rich (like a magazine or blog site), being able to see the differences between the typography in each of the different browsers and operating systems is a major boon. Designing in the browser is nothing new (even back in 1997 when I created my first website, I designed it entirely in the browser). While not every site is a candidate for designing in a browser, the ones most concerned with typography are perfect for designing in a browser.

Andy Clarke, popular designer/author, recently spoke at An Event Apart Boston with a presentation called Walls Come Tumbling Down in which he advocated designing in the browser for many reasons. The image above, taken from his presentation, shows the use of a standardized grid for both columns and vertical rhythm.

The best way to design in a browser is to use a grid like this. In the source package, I have included two different columnar grids, each with three variants of vertical rhythm. The CSS below shows the easiest method of deploying one of these testing grids by replacing the background image or images in the body of the HTML page using a class specific to the grid that you choose. Simply add the specified class to the body tag or content container DIV tag, and you’re ready to design in your browser.

.grid960base15 {
 width: 960px;
 line-height: 15px;
 background: url(images/grid960base15.png) repeat-y;
}
.grid960base18 {
 width: 960px;
 line-height: 18px;
 background: url(images/grid960base18.png) repeat-y;
}
.grid960base30 {
 width: 960px;
 line-height: 30px;
 background: url(images/grid960base30.png) repeat-y;
}
.grid600base12 {
 width: 600px;
 line-height: 12px;
 background: url(images/grid600base12.png) repeat-y;
}
.grid600base16 {
 width: 600px;
 line-height: 16px;
 background: url(images/grid600base16.png) repeat-y;
}
.grid600base18 {
 width: 600px;
 line-height: 18px;
 background: url(images/grid600base18.png) repeat-y;
}

It should be noted that for good vertical rhythm, it is necessary to have granular control over the line-height to reach the proper vertical rhythm. Additionally, you can use this Grid-making Bookmarklet to overlay any website with a customized grid. I find this to be useful when you cannot replace the background image with one of the grids.

3. Use a CSS Image Replacement Technique

Replacing text with images has been a standard practice in web design since the 90′s. With the adoption of CSS in the major browsers, image replacement techniques began arising that do not simply consist of making an image and placing it in the place of the text. The first widely accepted of these was Fahrner Image Replacement (FIR), but as people played with CSS Image Replacement, they realized this technique was not accessible. The Phark Image Replacement technique was originally conceived as an accessible replacement for the classic FIR technique. First proposed by Mike Rundle of 9rules in 2003, Phark Image Replacement relies on the the use of the text-indent and background-image CSS properties to hide the text from the user but remain accessible for screen readers and search engines.

To use Phark Image Replacement, set the container element (in this case, the DIVs) with a defined height and width. Then set a background image. Finally, set the text-indent property to -9999px. The text-indent property essentially pushes the start of the text left 9999 pixels, but this does not increase the scrollable area, effectively causing the text to disappear.

While Phark is currently the most common CSS-only Image Replacement Technique, there are many others with different advantages and disadvantages. For example, Phark fails to show anything to the user if images are disabled but CSS is enabled, a relatively small disadvantage. Additionally, CSS Image Replacement is not really meant for large-scale typography (i.e. articles), but is best for buttons, headings, and other small quantities of text. To learn more about other CSS-based Image Replacement Techniques, CSS-Tricks wrote a good summary of all available CSS-based Image Replacement Techniques called Nine Techniques for CSS Image Replacement.

4. Use an “Advanced” Image Replacement Technique

Standard Image Replacement is ideal for highly decorative situations and smaller amounts of text. What do you do when you want to replace text for an entire body of an article? What about replacing headlines and keeping the text selectable? The answer here is one of the advanced image replacement techniques. For all intensive purposes, there are three different advanced image replacements available at this time (if you know of any others, please leave them in the comments): Flash-based, Javascript-based, and PHP-based.

Scalable Inman Flash Replacement (sIFR)

The first of the advanced image replacement techniques that arrived on the scene was Scalable Inman Flash Replacement (sIFR), originally designed by Shaun Inman as IFR and subsequently advanced to the sIFR designation by Mike Davidson and Mark Wubben, who currently maintain the project.

PROS:

• Most crisp font rendering due to anti-aliasing
• Retains original semantic and accessible text
• Degrades gracefully into the original text
• Text is selectable (partially)
• Unobtrusive script

CONS:

• Not suited for large bodies of text
• Setup can be complicated and tricky
• Requires Flash and Javascript
• Load times can be sluggish
• Printing is problematic

If you want to learn how to implement and see examples of sIFR, NETTUTS+ has a great tutorial on how to use sIFR or visit the Official Site for sIFR2 or the Official Site for sIFR3, the most recent version.

cufón

The most recently popular advanced image replacement technique is called cufón, supposedly a portmanteau word of “custom” and “font” according to some. It “aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use” according to the cufón wiki.

PROS:

• Fastest advanced image replacement technique
• Retains original semantic text content
• Degrades gracefully into the original text
• Does not require any plugins (like Flash)
• Unobtrusive script
• Easy setup

CONS:

• Text cannot be copied and pasted (Text is not selectable)
• Font Licensing is blurry regarding cufón
• Text justification and effects do not work
• :hover state has many quirks
• Requires Javascript

If you want to learn how to implement and see examples of cufón, NETTUTS+ has a great screencast and tutorial on how to use cufón or visit the Official Site of cufón.

Facelift Image Replacement (FLIR)

The Facelift Image Replacement (FLIR) technique is different than the two previously mentioned in that it uses server-side scripting with PHP and the GD Image Library. It was developed by Cory Mawhorter to provide an automatic server-side font replacement technique.

PROS:

• Retains original semantic text content
• Does not require any plugins (like Flash)
• Font Licensing issues are unlikely, if ever

CONS:

• Text cannot be copied and pasted (Text is not selectable)
• Font rendering is subpar compared to other alternatives
• Requires a web server with PHP and GD
• Requires more server resources
• Can be difficult to set up

If you want to learn how to implement and see examples of FLIR, Divito Design has a good tutorial on how to use FLIR or visit the Official Site of FLIR

5. Use CSS3′s @font-face Rule for Web Font Embedding

CSS3 is relatively new in the landscape of the web, and it has not yet gained widespread usage. One of the most exciting features of CSS3 is the @font-face rule. There are two big hurdles for using @font-face right now. First, not many font foundries and typefaces support @font-face embedding. Some licenses are vague and do not address web embedding, whereas some explicitly prohibit @font-face embedding. For a list of typefaces that support @font-face embedding, you can webfonts.info has a great list. The second hurdle is that not all browsers support the @font-face rule, as shown in the browser support table below.

The @font-face rule now allows font embedding in IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), and Safari (PC & Mac) with support in Opera 10 and Chrome coming soon. This means that, in some form or fashion, webfonts will be available for an estimated 90%+ users.

Step One: Make the @font-face Declaration(s)

Ideally, this first @font-face declaration would be part of a CSS file served via conditional comments to only IE with the EOT version of the font. The second @font-face declaration should be a OTF or TTF font file. Also, due to browser security restrictions, the source URL for declarations should be relative (although some browsers do support absolute URLs).

@font-face {
 font-family: "Anivers";
 src: url("Anivers.eot");
}
@font-face {
 font-family: "Anivers";
 src: url("Anivers.otf");
}

Step Two: Use the Font

Yep. That’s all there is to it.

body {
 font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Once declarations are made, the font-family that has been declared can be used like any other font that would be available on a user’s system. This is an exciting new territory for web designers and developers that is going to be important to follow throughout the coming months.

Upcoming @font-face delivery projects like Typekit and Typotheque are looking to provide significant help in terms of negotiating web embedding licenses with the big font foundries. Additionally, with all the questions about renting fonts for web embedding, it may prove difficult to get some (or all) of the fonts that you are going to use in a web design for use in your image editing software. There’s two solutions to this: 1) design in the browser as recommended above, or 2) use similar typefaces to design the static page designs.

6. Find Inspiration and Never Stop Learning

Typography on the web is in its infancy when compared to typography in print, broadcast, and film. Watch other forms of media for inventive typography usage. The next time you are at the movie theater, check out all of the movie posters and pay close attention to the typography used in previews and trailers. Take a look at the typography both inside and on the cover of books at your local bookstore. Examine your DVD collection or your favorite magazines for inspiration.

Online, follow leading typography experts online like For a Beautiful Web, I love Typography, TypeInspire, or webfonts.info. Below, you will find a list of recommended reading links for more information on web typography in addition to NETTUTS+ and the aforementioned.

• PSDTUTS+ Text Effects TUTS
• 101 Typography Resources from Vandalay Design Blog
• A List Apart
• Abduzeedo
• Astheria
• Font Lover
• Smashing Magazine
• The Typographic Archives
• TypeNow Type Glossary
• Typophile
• Web Designer Depot
• Web Typography Guide

Hopefully, these six tips will help you the next time you are working on typography for the web. It’s an exciting time to be a typophile working on the web.

Sorce: net.tutsplus.com

you may also like:

• HTML Tutorial – Build a Neat HTML5 Powered Contact Form
  Tutorial Details Requirements: PHP 4.3+ Technologies Used: HTML5, Javascript, jQuery, AJAX & PHP Difficulty: Beginner - Intermediate Estimated Completion Time: 60 Minutes Step 1: Ge...
• HTML Tutorial – 28 HTML5 Features, Tips, and Techniques you Must Know
  1. New Doctype Still using that pesky, impossible-to-memorize XHTML doctype? view plaincopy to clipboardprint? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http...
• HTML Tutorial – Using frames on your webpage
  In the previous tutorial we learned the concept of frames. In this tutorial we will be introduced to the iframe tag. The concept is somewhat similar to that of frames, the difference being we are disp...
• HTML Tutorial – CSS3 Spinning Social Media Icons
  The HTML First we start off with our social media icons. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="spinning_icons">     <a href="http://www.twitter.com/...
• HTML Tutorial – Quick tip coding beautiful form
  What will be needed in this tutorial? PSD file from preview tutorial Museo Slab font Step 1. Folder and files structure First create Your folder structure. We will need index.html, style.css...