Jenny Green's Blog & Portfolio

One of my favorite ele­ments of graphic design is typog­ra­phy. For the past few years I have found great joy in fine-tuning every minute typo­graphic detail that I am pre­sented with. My inner nerd has proudly embraced kern­ing, base­line grids, alter­nate char­ac­ters, lig­a­tures, glyph palettes, font man­age­ment soft­ware, em dashes, and, well, this list could go on for quite some time.

Just when I was get­ting a lit­tle too com­fort­able with the thrilling world of printed type I became inter­ested in web design. Of course, achiev­ing exquis­ite typog­ra­phy in web design is a whole new ball game—one in which I was all too eager to par­tic­i­pate. Typog­ra­phy on the web presents many new lim­i­ta­tions and chal­lenges to the sea­soned print designer. Font choices are restricted to just a hand­ful of stan­dard, web-safe fonts. All of the use­ful text-formatting tools of InDe­sign are out the win­dow. You can say good bye to full-justified text—it doesn’t stand a chance of sur­viv­ing the lack of hyphen­ation on the web! Yes, the web is truly an unfor­giv­ing place for typog­ra­phy. But this set­back only serves to make it more reward­ing when you make stun­ning, print-worthy web typography.

Coudal Part­ners designed this famous, purely typo­graphic site for the Seed Conference.

8 Steps to Great Typog­ra­phy on the Web

1. Bring on the HTML entities.

   HTML enti­ties are nec­es­sary for incor­po­rat­ing proper punc­tu­a­tion and spe­cial char­ac­ters into your web site. Hatch marks just don’t cut it for a seri­ous typog­ra­pher, and using the cor­rect HTML entity to rep­re­sent open­ing (“) and clos­ing (”) quo­ta­tion marks is a must. Beyond that, sim­ply brows­ing a chart of HTML enti­ties offers great inspi­ra­tion for the use of poten­tial char­ac­ters you may not have con­sid­ered before. The WDG Spe­cial Enti­ties chart is a great resource.

2. CSS is your friend.

   CSS is a pow­er­ful typo­graphic tool for the web. It pro­vides the means to for­mat your typog­ra­phy in a mul­ti­tude of ways. CSS can be used to do every­thing from spec­i­fy­ing lead­ing and track­ing to achiev­ing drop caps. Some prop­er­ties you should make use of include:

   font-variant: smallcaps/normal;
   text-transform: capitalize/uppercase/lowercase;
   letter-spacing: em;
   line-height: em;
   p:first-letter {font-size: 300%;}

3. Use ital­ics for variety.

   The italic vari­a­tions of cer­tain fonts are often more inter­est­ing than the reg­u­lar faces. Two of my favorites include Geor­gia Italic and Cam­bria Italic (a Win­dows Vista sys­tem font that will hope­fully be gain­ing in pop­u­lar­ity in the next few years). These styl­ish vari­a­tions on web fonts make for great head­ers and add a touch of vari­ety to your web site. Check out Type­chart to pre­view other sys­tem fonts and their vari­ants that you might not have typ­i­cally considered.

   

4. Have some fun with your ampersands.

   If you are famil­iar with Robert Bringhurst’s Ele­ments of Typo­graphic Style, you may remem­ber his insis­tence on using the best avail­able amper­sand at all times. These words of wis­dom can and should be applied to web typog­ra­phy as well. Get cre­ative and explore your options for amper­sands! There is a great post on Sim­pleBits about amper­sands on the web that you should check out.

   

   Jon Tan’s web site fea­tures this beau­ti­ful Baskerville italic amper­sand through the use of CSS.

5. Be cre­ative with your font choices, and offer sim­i­lar web-safe fonts as backup.

   Use CSS to spec­ify a few fonts rather than just one web-safe font for your text. While every­one will not have your ideal font choice on their com­put­ers, at least those that do will be in for a treat. Spec­i­fy­ing your font choices in order from your ideal font can­di­date to a stan­dard font choice gives your design greater flex­i­bil­ity. For exam­ple, a look at the CSS used on Jon Tan’s web site reveals a pref­er­ence for four font choices before set­tling on the browser-default serif font:

   font-family: baskerville,palatino,'palatino linotype',
   georgia,serif;

6. Use border-bottom rather than the under­line prop­erty on links.

   The under­line prop­erty is com­monly used to for­mat links on a page. While this for­mat is a widely rec­og­nized sym­bol for a link, it is not kind to the descen­ders of let­ters. Rather than using this prop­erty and hav­ing your y’s and g’s cut through by the under­line, make use of the border-bottom prop­erty. Sim­ply use the fol­low­ing CSS to cre­ate a type-friendly under­line effect:

   border-bottom: 1px;
   padding-bottom: 1px;

   

7. Make use of the numer­ous typo­graphic tools on the web.

   WP Typogrify is a very use­ful Word­Press plu­gin that auto­mat­i­cally con­verts com­mon typo­graphic faux pas (such as hatch marks and double-dashes) to the for­mat­ting of a true typog­ra­pher. sIFR is another use­ful script used for insert­ing rich typog­ra­phy into your site while main­tain­ing search engine friend­li­ness and acces­si­bil­ity. A very help­ful sIFR tuto­r­ial can be found on CSS-Tricks.

8. Form fol­lows function.

   The idea that form should fol­low func­tion is more impor­tant than ever on the web; web stan­dards and acces­si­bil­ity should always be a pri­or­ity. Luck­ily, a truly beau­ti­ful design can be achieved when you take advan­tage of the capa­bil­i­ties of CSS and use your own cre­ativ­ity to achieve pro­fes­sional and art­ful typography.