Design your way

Typography is an art form that has been around for hundreds of years. Simply put, it is an elegant way of reproducing text in order to make it more attractive. Typography is used by graffiti artist to produce those fantastic murals done with gigantic letters, and by web designers to create more interesting web pages. Each day web designers are experimenting with different techniques to beautify type.

We can appreciate the love and effort web designers put into their work as they attempt to beautify text more and more, and we appreciate it even more when they share their secrets with other designers. We are always on the look-out for new techniques.

Web designers are very particular about their work and the reputation that follows them. However, new techniques available through @font-face have made the web designers’ jobs a lot easier than it used to be. Nevertheless, web designers are not averse to new ideas. Therefore, I’ve gathered a few good typography resources that can help you create better typography.

Tiff

The tag Image File Format or TIFF is an image manipulation tool used by web designers to create more interesting web pages by stretching and contorting images to change their appearance and juxtaposing it with the original.

Typecast

Typecast is an application that allows you to not only compare how different fonts will look on your pages, but also lets you apply newspaper-quality fonts to your web pages and blogs for better readability. There are a staggering 23,000 fonts to choose from while creating web-ready content to paste into your pages. This eliminates the need to self-code CSS into your page to get the font you desire. The application does all the work for you.

Typekit

Typekit’s extensive library of fonts gives subscribers a choice between the old reliable ones they have become familiar with over time and the new-fangled ones favored by today’s web designers. Typekit is a web-hosted subscription based library of fonts that you can pick and choose for your website. Typekit can be used on a number of platforms like WordPress, Typepad, and Posterous.

Typekit flexibility gives web designers the ability to make changes to the fonts and view them before they’re put on their pages. Typekit also has CSS capabilities so you can use the various class elements or any other HTML markup code in the design of your page. Typekit’s advanced control panel allows you to add font names directly into the font categories of your style sheet and update them in real time.

Web Font Combinator

Font Combinator is a web-based tool that allows web designers to quickly preview different font combinations in a browser. With it, web designers can edit any portion of text and view it in a browser before the final installment. The advanced tool bar located at the bottom of the page gives the designer complete control over actions such as modifying font size, line height, background color, and elements.

You can even choose to hide the element altogether if you like. Font Combinator includes all of the Google Web Fonts, and all of the traditional fonts like Helvetica, Times new Roman, and Arial. Font Combinator is ideal for setting Fallback fonts, and in addition, it updates automatically whenever a new Google Web font is added to its collection.

Typetester

Type is an online tool use for comparing different fonts in a browser window. The different fonts are juxtaposed to one another for easy comparison. Typetester’s user-friendly tools add simplicity to a web designers’ job. Typetester automatically updates it6s font archive every time a new font is created by an operating system.

TypeWonder

TypeWonder is a convenient online tool that allows you to compare fonts by simply entering your website’s address into a text field and clicking “go.” The fonts appear instantly for your perusal and selection.

Font Combinator

Flipping Typical

Flipping Typical is an amazing online tool that allows you vividly explore every font on your computer. The fonts are displayed in your browser so you can sieve through the list and choose which one you want for your page.

Web Font Generator

Web Font Generator is an online application that allows you to easily convert regular fonts into @font-face web fonts. You can also use it to upload true-type fonts (.ttf), open-type fonts (.opt), and Windows Postscript files (.pfb). Web Font Generator also supports Mac’s .dfont format. However, since it contains multiple fonts, Web Font Generator will by default use the first font in the file.

Letterings.js

The explosion of different fonts on the web is almost overwhelming CSS’s ability to handle the load. So, Paravel created an innovative plugin that uses JavaScript to query a system for individual letters.

FFFFALLBACK

While it can be challenging trying to combine the right fonts, finding the right fallback font can be even tougher. Luckily, FFFFALLBACK has taken all the hassle out this job. Simply drag the FFFFALLBACK bookmark to your toolbar and it installs itself. Then go to the page you want to test and click the FFFFALLBACK icon and it does the rest.

Font Deck

Font Deck is another web-based application with thousands of fonts ready for your web page. As you sieve through the many samples you’ll be able to view each one in a side-by-side view with your original type face. In addition, your original creations will be hosted at Fontdeck to protect them in the eventuality you experience browser complications.

FontFriend

FontFriend is another bookmarking application for web designers who are obsessed with creating the perfect web page. With it, web designers can quickly check fonts and font styles in their browser window without editing code or refreshing the browser. Font Friend is an excellent tool for creating CSS font stacks.

Typechart

Typechart is an excellent online tool for comparing different font styles. With a simple click of the mouse, you can compare Windows rendered fonts against Mac’s. It even allows you to retrieve the CSS code with the class ID already embedded.

CSSTypeset

CSSTypeset has taken the drudgery incurred with using style sheets to obtain the right font for your webpage. This free online tool allows you to enter the font in an editing pane while a lower pane lets you see what it will look like. Once you’ve decided on a font, simply grab the code and paste it into your webpage.

Web Font Specimen

Web Font Specimen is another web-based tool that web designers and type designers can use to preview type in a browser. Web designers can even download it and experiment with its design. If they are able to come up with a better version, they can claim it as their own, but they must attribute it as a derivative.

WhatFont Tool

The WhatFont tool is an online application that simplifies the way you find out what fonts a web page uses. No more tinkering around with firebug or Webkit Inspector; simply hover your pointer over the text in a web page and it reveals the font, font era, and the services used to serve the font.

WhatTheFont

With the WhatTheFont tool you can find out the name or type of virtually any font. Simply submit an image of the font and WhatTheFont will search its massive database to match it. If in the event it can’t find a match, WhatTheFont will supply you with it closest approximation. You can even consult the WhatTheFont forum for more assistance.

Explorations in Typography

Explorations in Typography: Mastering the Fine Art of Typesetting (A visual textbook for intermediate to advanced typography) is a virtual reservoir of magnificent typesetting examples.

It contains page after page of different typefaces and hundreds of examples, all with brief descriptions by Erik Spiekerman, creating a lengthy visual catalog that deepens your appreciation of the art of typography.

It is also loaded with Type specifications and hundreds of examples of font-faces (Many from the fontFont library). The result is an ersatz-type catalog and a virtual smorgasbord of typesetting ideas. “Explorations in Typography” is guaranteed to be an instructive as well as an inspiration to amateur and professional web designers alike.

Typeplate

Typlate is basically an introduction to typography. Rather than making aesthetic design choices, it defines the code necessary for extensible styling of common typographic patterns. It is a lite version of an Sass library concerned only with technical implementation of design patterns, rather than looks.