60+ Typography & Font Mega Toolbox

Typography and Font are really essential elements of good design and so are good tools that make your life easier in this area. In this article tripwire magazine provides a collection of more than 60 very useful Typography and Font Tools, Techniques and Inspiration. [exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Introduction

Typography and Fonts are both key elements of design and communicating a message to the audience. When chosen wisely and used carefully, Typography and Fonts can be very effective in supporting the overall design.

Tools and techniques that makes it easier to make the right choise and bring it into action on a web page is really useful and essential. This article gives you all you need to ensure that the right use of Typography really makes a difference in your designs.

Index

Creating new Fonts

If you can’t fint just the right font you may consider creating your own. It’s not easy but with the right amount of patience these tools may help you through the process.

Bit Font Maker

This is not really AJAX but a very rich Javascript experience, BitFontMaker is an online bitmap fonts editor for Win and Mac allowing to create TTF fonts online simply by using a browser. The resulted application is amazing as fonctionnalities offered and many pixel graphics designer will be certainly interested into give it a try. It’s easy to use but you’ll need help to read the help page cause it’s in japanese.

Font Struct

FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor. Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their “FontStructions”. Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.

Fontifier

Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

Your Fonts

The first thing to do is print the template. We have it available in two common formats; a PDF document and an image. To make optimal use of the size of your paper, we recommend you print out the PDF document.

Typographic Tools

HTML Ipsum

A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!

Font Burner

Font Burner lets you search for fonts that you can embed in your site. You can embed the font you’ve chosen on your web pages by copying-and-pasting the code they provide (which uses sIFR).

CSSTXT

CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.

CSS Type Set

CSS Type Set lets you experiment with different styles and attributes (such as font size, font weight, font family) of web typography. Once you’re satisfied with your tweaking, it’ll generate the appropriate CSS code for you.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Hi-Res FontTester

Hi-Res FontTester is a simple and straightforward tool for testing various fonts. You can create as many samples as you want, and then when you’re finished, you can export your tests in a PDF file for storing and sharing.

OpenType Font Tester

OpentType Font Tester is a web-based tool that allows you to test over 20 OpenType fonts.

Typechart

Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.

Designer Plaything

Designer Plaything lets you experiment with different web typography and color combinations. It also allows you to check color accessibility. There’s a web-based version and a downloadable version which you can grab on this page.

abcTajpu Firefox Extension

Type in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

CSS Font and Text Style Wizard

Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

CSS-Typoset Matrix

CSS-Typoset Matrix is a matrix that displays font sizes, line-heights, and margins (in pixel and em units) for various base font sizes. It also outputs the CSS code for you based on your inputs.

Typographic Rendering Tools and Techniques

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

Advanced Typography Techniques Using CSS

While descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

gridr buildrrr

This tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.

Vertical rhythm calculator

This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.

Typographic Grid

If your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.

The Grid System

An aggregator of articles, tools, books and resources related to grid-systems.

Grid Designer

Anyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.

Wordle – Beautiful Word Clouds

Wordle is an app for generating “word clouds” from the text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes.

P+C DTR

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.

Facelift Image Replacement (FLIR)

Facelift Image Replacement (FLIR) 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 is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.

Cool Text

Cool Text is a free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you’ll have your own custom image created on the fly.

Tools for choosing a Font

My Fonts – What The Font?!

Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using our WhatTheFont font recognition system. Upload a scanned image of the font and instantly find the closest matches in our database. If WhatTheFont can’t figure it out, you can submit your image to the WhatTheFont Forum where cloak-draped font enthusiasts around the world will help you out!

Message Boards: Typophile

This is probably the greatest and largest community of font experts. You get your answers simply by posting an image of the font you’re looking for in their forum. If unsuccessful there, most font sites (usually the free font sites) have message boards where you can post questions and images about the fonts that you’re looking for.

Flickr Typeface Identification

flickr has a group dedicated to identifying fonts and another group that showcases fonts used in different images called Fonts in Use which can be useful for quick reference.

Linotype Font Finder

Linotype Font Finder helps you identify a font through a series of questions like “What type of tail does the upper-case ‘Q’ have?” or “Does the upper-case ‘U’ have a stem?”

Serif Font Identification Guide

Serif Font Identification Guide is a visual font identification tool that presents a series of images that you pick from to closely match the font you’re trying to recognize.

Font Picker

Font Picker is a simple web tool for browsing all the fonts available on your computer. It can be a useful tool for quickly previewing and selecting what font you want to use for a design.

Identifont

A large independent directory of typefaces on the Internet, with information about fonts from 506 publishers and 141 vendors.

Font Converters

Text 2 PNG Conversion

This service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address.

Scalable Inman Flash Replacement Tools

sIFR Generator

The big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.

sIFR 2.0: Rich Accessible Typography for the Masses

sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.

sIFR lite

A solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class.

sIFRvault

A repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws – some of the featured fonts appear to be commercial.

jQuery sIFR Plugin

The jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.

Multi color sIFR 2.0.1

This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.

Other Tools

OnLine Hyphenation

This tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses ­ and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful.

Hyphenator

Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation.

em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

PXtoEM

PXtoEM is simple web tool that gives you a matrix for pixel, em, percent, and point units based on your <body>’s font size. If you’re used to working with pixels but see the value in using em as your size unit, PXtoEM will lessen the need for you to reach for your calculator.

Inspiration

A guide to 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.

On Choosing Type

A good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.

So you want to create a font part 1

So you’re a brilliant designer, a master calligrapher, and you’ve learned all about serifs, side-bearings, and kerning. Now you want to create your own font.

Don’t be afraid of Serif Fonts

David Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices.

Typographic Contrast and Flow

Typographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.

Dance Writer

Typotheque is not a very useful web app, but it is cool. With your mouse click the letters on the visual keyboard and you have a man on screen who dances that particular letter. Honestly it is cool, it has to be seen to be believed.

10 Common Typography Mistakes

The goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes.

Elegant Web Typography

A great presentation by Jeff Croft about Web typography.

The Principles of Beautiful Typography

This is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read.

Five Simple Steps to Better Typography

A series of articles by Mark Boulton that is highly worthwhile to read.

101 Typography Resources for Web Designers

A great list of typography-related resources from our author, Steven Snell.

Font Lover

Community that allows people to discuss various aspects of fonts and typography and it’s highly knowledgable font obsessed following can help you define fonts you’ve seen and find a similiar or the exact font used. Just upload a good quality image of the font you are looking for and they will have at it!

Support tripwire magazine if you buy a Premium Theme

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.