Beautiful Type for a Beautiful Web Site

by John Rettie

If you want to learn about typography, this Web site, created and maintained by John Boardley, a British graphic designer living in Japan, is a pretty good place to start.

September 01, 2010 — Typography, as its name suggests, is the art and field of study of type, as photography is the art and field of study of photographs. Similarly, typography is an important component of good design. Sadly, most people do not realize typography is a key ingredient to the look and feel of a printed piece, be it an ad or a feature in a glossy magazine.

Generally speaking, the use of good typography is so subtle that a reader does not even see it—so to speak. The art of good typography is just that, an art, like good composition in a photograph or good composition in the use of words. Anyone with a good eye for design will immediately recognize poor use of typography when they see a jumble of different fonts clashing with each other. If you’ve ever laid out any print material you will have learned about all the various terms connected with typography. Apart from font size, there are also such things as leading and kerning.

These terms are all inherited from the time when Gutenberg developed the practical use of movable type for printing presses in Europe in the 15th century. Amazingly, nothing much changed in the printing world until the 1950s when offset printing took over from letterpress. This involved a lithographic process of copying artwork to create a plate for printing.

Those of you who grew up in the ‘60s and ‘70s probably remember Letraset. In 1960 it was the first company to introduce pressure-sensitive lettering that enabled anyone to produce layouts with a wide variety of typefaces. Letraset became a generic term for many graphic artists, and the British company is still producing lettering as well as digitized fonts.

When Web sites first appeared in the 1990s, typography was nonexistent, as Web sites could literally only use one or two fonts. It didn’t really matter, as they were only text-based informational sites.

Once browsers were capable of showing photos and graphics, it became easy for designers to use artwork to display great typography. However, the use of artwork in place of pure text is inflexible, as well as being bad for search engines’ “robots,” since they cannot read text in pictures.

Back in 2004, a new way of displaying different fonts, called sIFR, was developed as an open-source solution. It relies on JavaScript and utilizes a Flash reader to display text on a Web page. It was a godsend for designers, as it allowed decent designs to be created with proper kerning and spacing as well as the use of any font. Yet, even the developer, Mike Davidson, said it was not an ideal way to display text, and would be a short-term solution. He was correct.

Nowadays, modern browsers can generate fonts on the fly using CSS (Cascading Style Sheets). This is a vastly more efficient way to display non-standard text, as it mimics what can be done with a word processor, graphic arts program or even Photoshop.

So how do you go about using a custom font on your Web site? If you look in the CSS file, you’ll see a list of the fonts being used. Generally speaking, there will be a list that shows the first choice along with alternative fonts that are Web-safe.

While graphic artists and pro photographers have a lot of different fonts on their computers, most visitors only have the fonts that were included with the computer when they purchased it. In order for a font to be displayed correctly the actual font file has to be made available to the viewer’s browser so the text can be rendered properly.

Just as in the print world, however, owners and/or creators of fonts often require licensing payment for their use. Of course, there are plenty of free fonts available, as well. If you plan on using a free font, or the licensing agreement allows, the easiest way to implement it is to place the font file on the server where your Web site is hosted, and it will then be loaded by the browser as needed.

Because font foundries (yes, they are still called this even though there haven’t been any metal foundries for half a century) are concerned about copyrighted fonts “escaping” on the Internet, many do not allow this use. Fortunately, many foundries allow fonts to be used if the actual fonts are hosted on a remote server where their usage can be tracked. One of the best-known companies to have created a service for supplying fonts is Typekit. It offers some fonts free of charge for personal use and charges a small annual fee so designers can use a wider variety of fonts. The technique to embed these fonts is similar to ones on your own server. The only difference is that the link on the @font-face goes to the remote server. Google also offers a similar service with several free fonts for end users.

The style of lettering used by wedding photographers on their Web sites can make a big impression on a client. Of course, if you have a flash-based Web site, this will not be a problem. There is not space in this column to go into full details on how to set up non-standard fonts, but there are plenty of Web sites with information. It is worth noting that it is possible to show these fonts on a Wordpress blog with special plug-ins.

Redirecting a Web Page
Recently I posted a link to a photo gallery on my Web site where I used a combination of capital letters and lower case in the URL. At the time I thought it would be easier for people to read, however, I discovered some visitors were typing in the part after the back slash in lower case. Unfortunately, it’s a fact of life that the portion of a URL following the main Web address is case-sensitive even though the domain address is not. This meant people who failed to type in the Web address exactly did not land on the correct page. Instead of an unfriendly error code, at least I have my site set up so any wrongly entered URL redirects a visitor to my home page.

There are several ways to set it up so mistyped page addresses get directed to the correct page. Some of the methods require moderately complicated coding to place in an .htaccess file. The easiest, but least elegant way is to put a page up with the incorrect URL and place a link to the correct page. This then requires the viewer to click on the correct link. Another easy way to automate the process is to create a page with the incorrect address and place a short JavaScript code that automatically redirects the visitor.
 
In my case, the stats for my site showed that instead of typing “johnrettie.com/RebelT2iSamples” a few visitors had typed it in all lowercase, so that was the one I wrote a script for. I chose to delay the redirect for three seconds so it explains to viewers what is happening. If I had set the time in milliseconds to zero it would not have displayed the “incorrect” page, but just gone straight to the correct page.


John Rettie is a photojournalist who resides in Santa Barbara, CA. He has been using a computer for 29 years and has been on the Internet for 14 years. Now he’s learning how it all works—learn more and find links to resources on his Web site at www.webinsight.info or contact him directly at john@johnrettie.com.

You Might Also Like



Download AfterCapture Magazine - FREE

You are invited to experience the digital edition of AfterCapture magazine. See the 2012 AfterCapture Digital Imaging Contest Winners' Gallery - extraordinary images that will inspire you.

Read the Full Story »

Rangefinder's AfterCapture December 2012 Issue

AfterCapture is now available for free as a digital edition. View the new issue via the computer or download the app through the iTunes store and view AfterCapture on your desktop, tablet or mobile device.

Read the Full Story »

Shades of Paper

Shades of Paper is a retailer with a rallying call. “We like to say, ‘Go Team Shades!’” says the company’s sales and marketing associate Roberta Scott. “We’re a team here and we like to think of our customers as our friends and that we’re truly helping them create masterpieces.”

Read the Full Story »


- ADVERTISEMENT -

- ADVERTISEMENT -

- ADVERTISEMENT -

- ADVERTISEMENT -