- January 27th, 2009
- 99 Comments
Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.
Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.
You may want to take a look at the following related articles:
1. Useful typographic references
Common fonts to all versions of Windows & Mac equivalents14
The list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.
2. Typographic Tools
Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties.
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!
Typechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.
TTFTitles WordPress Plugin26
This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango27).
abcTajpu Firefox Extension31
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).
CSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.
CSS-Typoset Matrix and code generator41
This tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!
wp-typogrify WordPress Plugin43
wp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django44 is available as well.
After you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.
Text 2 PNG Conversion49
3. Choosing a font
Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.
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.
4. Typographic Techniques
12 Examples Of Paragraph Typography65
A showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.
10 Examples of Beautiful CSS Typography and How They Did It69
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.
Facelift Image Replacement (FLIR)75
Advanced Typography Techniques Using CSS81
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.
Typographic Contrast and Flow83
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.
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.
sIFR 2.0: Rich Accessible Typography for the Masses88
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.
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 (via chrisjlee92).
jQuery sIFR Plugin94
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.
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.
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 Rhythm104 article by Richard Rutter a few years ago, except uses unitless line height105.” Check out the demo here106.
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.
Vertical rhythm calculator110
This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm111. 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.
8. Free and Commercial Fonts
9. A Guide to Web Typography
Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project.
On Choosing Type128
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.
The Non-Typographer’s Guide to Practical Typeface Selection136
Check out Cameron Moll’s magic formula for picking the right typeface for your needs.
- Make a list of those familiar typefaces that you trust and know will work well in a variety of projects.
- Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand.
- Test each typeface in small and large sizes.
- Test in both caps and lowercase.
The Principles of Beautiful Typography137
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.
10. Examples of Great Web Typography
Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design.
17 Stimulating Flickr Groups to Get You Typographically Inspired175
This is a list of some of the best typography Flickr groups to feed your creative appetite.
- 1 http://www.smashingmagazine.com/wp-rss.php
- 2 http://www.smashingmagazine.com/wp-rss.php
- 3 http://twitter.com/smashingmag
- 4 http://twitter.com/smashingmag
- 5 http://www.smashingmagazine.com/2009/01/20/50-extremely-useful-php-tools/
- 6 http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
- 7 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
- 8 http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
- 9 http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
- 10 http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
- 11 http://media.24ways.org/2007/17/fontmatrix.html
- 12 http://www.twitter.com/lucianosb
- 13 http://media.24ways.org/2007/17/fontmatrix.html
- 14 http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
- 15 http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
- 16 http://support.apple.com/kb/HT1538
- 17 http://elementiks.com/web_resources.php
- 18 http://support.apple.com/kb/HT1538
- 19 http://www.microsoft.com/typography/fonts/default.aspx
- 20 http://elementiks.com/web_resources.php
- 21 http://www.microsoft.com/typography/fonts/default.aspx
- 22 http://html-ipsum.com/
- 23 http://html-ipsum.com/
- 24 http://www.typechart.com/
- 25 http://www.typechart.com/
- 26 http://www.hostscope.com/wordpress-plugins/ttftitles-wordpress-plugin/
- 27 http:/www.twitter.com/hyperdjango
- 28 http://www.hostscope.com/wordpress-plugins/ttftitles-wordpress-plugin/
- 29 http://fontstruct.fontshop.com/
- 30 http://fontstruct.fontshop.com/
- 31 https://addons.mozilla.org/en-US/firefox/addon/459
- 32 https://addons.mozilla.org/en-US/firefox/addon/459
- 33 http://pxtoem.com/
- 34 http://www.twitter.com/briancray
- 35 http://www.twitter.com/CasJam
- 36 http://pxtoem.com/
- 37 http://riddle.pl/emcalc/
- 38 http://riddle.pl/emcalc/
- 39 http://www.suprb.com/apps/csstype/
- 40 http://www.suprb.com/apps/csstype/
- 41 http://www.jan-quickels.de/tools-web-typography/
- 42 http://www.jan-quickels.de/tools-web-typography/
- 43 http://blog.hamstu.com/2007/05/31/web-typography-just-got-better/
- 44 http://jeffcroft.com/sidenotes/2007/may/29/typogrify-easily-produce-web-typography-doesnt-suc/
- 45 http://blog.hamstu.com/2007/05/31/web-typography-just-got-better/
- 46 http://www.fontburner.com/
- 47 http://www.fontburner.com/
- 48 http://ianpurton.com/sifr/
- 49 http://www.text2png.com/
- 50 http://www.webdesignerdepot.com/2008/12/7-free-tools-to-identify-a-font/
- 51 http://speckyboy.com/2009/01/12/21-typography-and-font-web-apps-you-cant-live-without/
- 52 http://www.typetester.org/
- 53 http://www.typetester.org/
- 54 http://www.stcassociates.com/lab/fontbrowser.html
- 55 http://www.stcassociates.com/lab/fontbrowser.html
- 56 http://richardsprojects.co.uk/products/font-picker/
- 57 http://richardsprojects.co.uk/products/font-picker/fontpicker.air
- 58 http://www.fonttester.com/
- 59 http://www.fonttester.com/
- 60 http://csstypeset.com/
- 61 http://www.twitter.com/jmreedy
- 62 http://csstypeset.com/
- 63 http://flippingtypical.com/
- 64 http://flippingtypical.com/
- 65 http://jontangerine.com/silo/typography/p/
- 66 http://jontangerine.com/silo/typography/p/
- 67 http://jontangerine.com/log/2007/11/rendering-complex-typewhos-got-the-love
- 68 http://jontangerine.com/log/2007/11/rendering-complex-typewhos-got-the-love
- 69 http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/
- 70 http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/
- 71 http://typeface.neocracy.org/
- 72 http://www.mikeindustries.com/sifr
- 73 http://facelift.mawhorter.net/
- 74 http://typeface.neocracy.org/
- 75 http://facelift.mawhorter.net/
- 76 http://wordpress.org/extend/plugins/facelift-image-replacement/
- 77 http://facelift.mawhorter.net/
- 78 http://artypapers.com/csshelppile/pcdtr/
- 79 http://www.alistapart.com/articles/dynatext
- 80 http://artypapers.com/csshelppile/pcdtr/
- 81 http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/
- 82 http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/
- 83 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
- 84 http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
- 85 http://www.plazoo.com/en/tools.asp
- 86 http://code.google.com/p/hyphenator/
- 87 http://yellowgreen.de/hyphenation-in-web/
- 88 http://www.mikeindustries.com/blog/sifr/
- 89 http://www.mikeindustries.com/blog/sifr/
- 90 http://www.allcrunchy.com/Web_Stuff/sIFR_lite/
- 91 http://www.sifrvault.com
- 92 http://www.twitter.com/chrisjlee
- 93 http://www.sifrvault.com
- 94 http://jquery.thewikies.com/sifr/
- 95 http://jquery.thewikies.com/sifr/
- 96 http://webdesign.maratz.com/lab/multi_color_sifr/
- 97 http://webdesign.maratz.com/lab/multi_color_sifr/
- 98 http://www.sifrgenerator.com/
- 99 http://gridr.atomeye.com/
- 100 http://gridr.atomeye.com/
- 101 http://www.thegridsystem.org/
- 102 http://www.thegridsystem.org/
- 103 http://css-tricks.com/typographic-grid/
- 104 http://24ways.org/2006/compose-to-a-vertical-rhythm
- 105 http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
- 106 http://css-tricks.com/examples/TypographicGrid
- 107 http://css-tricks.com/typographic-grid/
- 108 http://grid.mindplay.dk
- 109 http://grid.mindplay.dk
- 110 http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/
- 111 http://24ways.org/2006/compose-to-a-vertical-rhythm
- 112 http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/
- 113 http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
- 114 http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
- 115 http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/
- 116 http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/
- 117 http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/
- 118 http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/
- 119 http://www.fontsquirrel.com/
- 120 http://www.smashingmagazine.com/category/fonts/
- 121 http://www.fontsquirrel.com/
- 122 http://www.myfonts.com/newsletters/sp/200901.html
- 123 http://www.myfonts.com/newsletters/sp/200901.html
- 124 http://350designs.com/resources/photoshop/clean-font-showcase
- 125 http://350designs.com/resources/photoshop/clean-font-showcase
- 126 http://veerle.duoh.com/blog/comments/my_top_10_favorite_typefaces/
- 127 http://veerle.duoh.com/blog/comments/my_top_10_favorite_typefaces/
- 128 http://ilovetypography.com/2008/04/04/on-choosing-type/
- 129 http://ilovetypography.com/2008/04/04/on-choosing-type/
- 130 http://informationarchitects.jp/100e2r/
- 131 http://informationarchitects.jp/100e2r/
- 132 http://www.wpdfd.com/issues/86/dont_be_afraid_of_serif_fonts/
- 133 http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation
- 134 http://www.slideshare.net/jeff_croft/elegant-web-typography-presentation
- 135 http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/
- 136 http://www.cameronmoll.com/archives/000240.html
- 137 http://www.sitepoint.com/article/principles-beautiful-typography/
- 138 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
- 139 http://vandelaydesign.com/blog/design/typography-resources/
- 140 http://jontangerine.com/
- 141 http://jontangerine.com/
- 142 http://www.viget.com/inspire/
- 143 http://www.viget.com/inspire/
- 144 http://www.works4sure.nl/
- 145 http://www.works4sure.nl/
- 146 http://24ways.org/
- 147 http://24ways.org/
- 148 http://www.alexbuga.com/
- 149 http://www.alexbuga.com/
- 150 http://www.wilsonminer.com/
- 151 http://www.wilsonminer.com/
- 152 http://www.colourpixel.com/
- 153 http://www.colourpixel.com/
- 154 http://maxvoltar.com/
- 155 http://maxvoltar.com/
- 156 http://www.markdearman.com/
- 157 http://www.markdearman.com/
- 158 http://www.bloggerbakeoff.com/
- 159 http://www.bloggerbakeoff.com/
- 160 http://fixieconsulting.com/
- 161 http://fixieconsulting.com/
- 162 http://dc2009.drupalcon.org/
- 163 http://dc2009.drupalcon.org/
- 164 http://www.guilhermeneumann.com/
- 165 http://www.guilhermeneumann.com/
- 166 http://www.sursly.com/#work
- 167 http://www.sursly.com/#work
- 168 http://www.francescomugnai.com/
- 169 http://madebygiant.com/
- 170 http://theautumnfilm.com/red-white-sale/us.html
- 171 http://www.signalapps.com/
- 172 http://www.blackestate.co.nz/
- 173 http://www.onefastbuffalo.com/
- 174 http://www.shiftpx.com/
- 175 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
- 176 http://www.bittbox.com/fonts/17-stimulating-flickr-groups-to-get-you-typographically-inspired/
- 177 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/
- 178 http://sixrevisions.com/web_design/20-websites-with-beautiful-typography/