50 Helpful Typography Tools And Resources

Advertisement

We love beautiful typography, and we appreciate the efforts of designers who come up with great typographic techniques and tools or who just share their knowledge with fellow designers. We are always looking for such resources. We compile them, carefully select the best ones and then prepare them for our round-ups. And now it’s time to present a beautiful fresh dose of typography-related resources.

To help you improve the typography in your designs, we’re presenting here useful new articles, tools and resources related to typography. You will learn the fundamentals of typography, find out how to combine fonts and know what to keep in mind when choosing a typeface. We also present typography-related slideshows, glossaries, layouts and experiments.

You may be interested in the following related posts:

Typography: References and Useful Resources

The Taxonomy of Type5
This article’s purpose is to help us as designers to distinguish basic properties of types. It explains the type classification and provides examples of each type. Short, but nice article.

Useful Typography Resources - The Taxonomy of Type6

Typedia: A Shared Encyclopedia of Typefaces7
Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Useful Typography Resources - Typedia: A Shared Encyclopedia of Typefaces8

Typeface Anatomy and Glossary9
Many fonts have abbreviations in their names. Some relate to glyph sets and font formats, others to design traits and foundries, and so on. A comprehensive list of these abbreviations and their explanation can be found in The Abbreviated Typographer from Unzipped.

Useful Typography Resources - Typeface Anatomy and Glossary10

Typographic Marks Unknown11
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

Useful Typography Resources - retinart12

Periodic Table of Typefaces13
A reference table for most popular typefaces and their classifications.

Useful Typography Resources - Periodic Table of Typefaces14

Fonts for iPad and iPhone15
This reference table features all fonts that are available on iPhone, iPod Touch and iPad.

Useful Typography Resources - Fonts for iPad and iPhone16

Font Anatomy (Wallpaper)17
A nice overview of all typographic terms and subtleties. Do you know what an ‘arm’ or ‘beak’ is? Time to find out.

Useful Typography Resources - Wallpaper : Font Anatomy18

Typographic Rules Checklist19 (PDF)
Useful typographic checklist that contains not only some general typographic rules, heuristics and guidelines, but also reminders for typography in your projects.

Typography Checklist20 (PDF)
Compiled by Jason DewinetzIf, this list contains some useful typographic checks that you may want to consider for before launching your next project or printing your next brochure or book.

Type in 45 Incredibly Useful Web Design Checklists and Questionnaires21

So You Need A Typeface (Infographics)22
A nice infographics that can actually help you select a typeface for your design work. You may want to search for the path to Comic Sans.

Useful Typography Resources - So You Need A Typeface23

Finding The Right Type

The Right Font for the Job24
A few years ago, you had to make a decision between TrueType or PostScript and Mac or Windows. Today, the choice is usually fairly simple: OpenType is the most convenient and full-featured font format, compatible with all modern screen and print workflows. All the extras that are commonly spread across multiple PostScript or TrueType files can live in one OpenType file. Best of all, OpenType is a truly cross-platform format. You can use the same font on Mac or Windows machines without converting the font or fearing reflow.

Useful Typography Resources - The Right Font for the Job25

Erik Spiekermann’s Typo Tips26
With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta¨, Meta Design founder, co-author of ‘stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

Useful Typography Resources - Erik Spiekermann's Typo Tips27

Thirteen Ways of Looking at a Typeface28
For the first ten years of my career, I worked for Massimo Vignelli, a designer who is legendary for using a very limited number of typefaces. Between 1980 and 1990, most of my projects were set in five fonts: Helvetica (naturally), Futura, Garamond No. 3, Century Expanded, and, of course, Bodoni.

Useful Typography Resources - Thirteen Ways of Looking at a Typeface29

Picking Type for Web30
Picking Type for Web As a part of the visual design process for MIX Online’s upcoming redesign, I’ve been experimenting with typography. The task of finding a typeface that’s both aesthetically pleasing and legible, however, is a tricky one.

Useful Typography Resources - Picking Type for Web31

How To Choose A Font32
Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font. These pointers have been gathered from Robin Williams great book “The Non-Designers Type Book” that I recommended in the top 5 typography resources of all time. Have a think about each of these before choosing your next font.

Useful Typography Resources - How To Choose A Font33

On Choosing Type34
Typography is not a science. Typography is an art. There are those who”d like to ‘scientificize”; those who believe that a large enough sample of data will somehow elicit good typography. However, this sausage-machine mentality will only ever produce sausages. That typography and choosing type is not a science trammeled by axioms and rules is a cause to rejoice.

Useful Typography Resources - On Choosing Type35

Combining Type

Fundamentals: Combining Type With Helvetica36
With this issue of FontShop Fundamentals we debut Guest FontLists. Building on our own lists, we asked experts we admire to round up typefaces that share a common use, style, or concept.

Useful Typography Resources - Fundamentals: Combining Type With Helvetica37

Four Ways to Mix Fonts38
Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

Useful Typography Resources - Four Ways to Mix Fonts39

How do I choose paring fonts ?40
When I have to chose type for a project, I always rely on my feelings and lots of testing, wating for the love/hate Alchemy to happen and decide for me. This method, mostly based on luck, is often time consuming, and I often found myself needing to ask for help on the forums.

Useful Typography Resources - How do I choose paring fonts ?41

Type Design

Beginner’s Guide to OpenType42
OpenType (OT) is a cross-platform type format that includes expert layout features to provide richer linguistic support and advanced typographic control. Using OT technology you can substitute your characters for different glyphs1 using many different methods; Ligatures, Small Caps, Oldstyle Figures, Fractions, Superscript/Subscript, Ordinals, Alternates, Titling Characters and many more. This beginner’s guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

Useful Typography Resources - Beginner's Guide to OpenType43

Making Geometric Type Work44
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is the same route I took when dissatisfied with the limits of commercial fonts at the time. I twisted and distorted each character to fit into a few simple, incredibly strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

Useful Typography Resources - Making Geometric Type Work45

A few things I’ve learned about typeface design46
Teaching on a postgraduate course feels very much like a spiral: the annual repetition of projects, each a vehicle for a journey of education and discovery for the student, blurs into cyclical clouds of shapes, paragraphs, and personalities. There seems to be little opportunity for reflection across student cohorts, and yet it is only this process that improves the process from one year to the next. Having passed the tenth anniversary of the MA Typeface Design programme was as good an opportunity as any to reflect, and ILT’s offer to publish the result an ideal environment to get some ideas out in the open. Although my perspective is unavoidably linked to the course at Reading, I think that the points I make have wider relevance.

Useful Typography Resources - I love typography47

Case-Study: The Making of Vesper48
A nice case-study about the creation process of the Vesper typeface, from its designer Rob Keller. “Vesper was developed over the course of almost three years. For this article, I’ve divided the process into two stages: #1 during my studies at the University of Reading; and #2 After Reading. Hopefully through this highly-condensed-yet-still-rather-wordy account of this project you will learn some interesting bits regarding my first major type family, the design process, and the MATD program.”

Useful Typography Resources - The Making of Vesper49

Typographic Tools

TypeIt: Type accent marks, diacritics and foreign letters online50
The service allows you to add typographic accents and special characters (e.g. punctuation marks) as you’re typing. Instead of clicking on buttons for the accents, you can also use pre-defined shortcuts, like Control + N, to insert the characters: just point your cursor to the desired character and you’ll see a tooltip.

Useful Typography Resources - TypeIt - Type accent marks, diacritics and foreign letters online51

Web Font Specimen52
Because web type renders differently with only subtle CSS adjustments, seeing it exercised in a variety of ways can help web designers typesetÑand also help them decide which typefaces to purchase for their projects.

Useful Typography Resources - Web Font Specimen53

Typograph: Scale & Rhythm54
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Useful Typography Resources - Typograph: Scale and Rhythm55

TextMod 2.156
Unlike dummy text generators, in TextMod you can modify a real text to match your current character set and use it for testing your font. Your TextMod settings are stored in a cookie. By now, TextMod only works with Latin and Armenian.

Useful Typography Resources - TextMod 2.157

Readability58
Readability is a simple bookmarklet that makes reading on the Web more enjoyable by removing the clutter around what you’re reading.

Useful Typography Resources - Readability - An Arc90 Lab Experiment59

Free Typographic XHTML/CSS-Layouts For Your Designs60
A collection of beautiful typographic (X)HTML+CSS-based layouts created by the design community and released for free.

Useful Typography Resources - Free Typographic XHTML/CSS-Layouts For Your Designs61

Typography Keyboard Layout62
A simple, yet useful tool that lets you enter characters that are usually unavailable on a keyboard with ease. Hopefully it will help you achieve better typography in your designs.

Useful Typography Resources - Typography Keyboard Layout: Download Now!63

{ font-family }64
A resource for web developers and designers to provide recommendations for alternatives in the font-family CSS style.

Useful Typography Resources - { font-family }65

EmChart66
This tool maps the ratio between your base size and your child elements font size.

EmChart67

MyFontbook, A Browser-Based Free Font Viewer68
myFontbook is a free tool for viewing, classifying and organizing fonts installed on your system from your web browser.

Useful Typography Resources - MyFontbook, A Browser-Based Free Font Viewer69

Font Finder70
FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

Useful Typography Resources - Font Finder :: Add-ons for Firefox71

Unicode Codepoint Chart72
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Useful Typography Resources - Unicode Codepoint Chart73

Create Your Own @font-face Kits74
An online generator for creating ready-to-use kits for your fonts, using @font-face.

Useful Typography Resources - Create Your Own @font-face Kits75

XHTML Character Entity Reference76
This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.

Useful Typography Resources - XHTML Character Entity Reference77

HTML Entity Character Lookup78
Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c.

Useful Typography Resources - HTML Entity Character Lookup79

CopyPasteCharacter.com80
This page allows you to copy one or multiple special characters and paste them in your applications.

Useful Typography Resources - CopyPasteCharacter.com81

Surveys and Research

Typographic Design Patterns and Best Practices138823
Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and paddingÉ The list goes on and on.

Useful Typography Resources - Typographic Design Patterns and Best Practices83

Visual Search and Reading Tasks Using ClearType and Regular Displays84
An academic paper exploring the usability performance of ClearType vs. Regular displays. Result: For most users ClearType-enhanced text produces a significant improvement in performance times on tasks involving extended eye-on-text interactions.

Useful Typography Resources - Visual Search85

‘Font’ vs. ‘Typeface': font terms survey results86
According to this study, the overall opinion is that in today’s world of digital typography “a typeface” means the general design, including all its styles, regardless of how it’s instantiated, while “a font” means a single style of a typeface, such as Myriad bold condensed italic, in a specific file format. However, this is not necessarily true.

Useful Typography Resources - Phinney on Fonts87

Font or Typeface?88
As we”re collaborating with multiple authors on the FontFeed, we compiled a list of guidelines for ourselves and guest contributors. One of our concerns is that we should attempt to ‘speak the same language” when using typographic and related terms. Because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.

Useful Typography Resources - Font or Typeface?89

Rules for good and beautiful typography

A Guide to Web Typography90
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

Useful Typography Resources - A Guide to Web Typography91

The Principles of Beautiful Typography92
For most people, typography is simply about arranging a familiar set of shapes to make words, sentences, and paragraphs. Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium.

showcase of Design Elements - The Principles of Beautiful Typography" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/05/elements52.jpg" /></a><sup class="po" id="note-93"><a href="#93">93</a></sup></p>
<p><a href="http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/">Simple rules for good typography</a><sup class="po" id="note-94"><a href="#94">94</a></sup><br />Here are some basic rules to improve your typography across either web or print. Of course, these rules are only to start with, and rules are meant to be broken. But if you want something to look neat, clean and generally well designed they are a good set to follow.</p>
<p class="showcase"><a href="http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/"><img width="480" height="300" alt="Useful Typography Resources - Simple rules for good typography" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/05/typography-135.jpg" /></a><sup class="po" id="note-95"><a href="#95">95</a></sup></p>
<p><a href="http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/">Typography is the backbone of good web design</a><sup class="po" id="note-96"><a href="#96">96</a></sup><br />An overview of some typographic techniques to keep in mind for your next website design.</p>
<p class="showcase"><a href="http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/"><img width="480" height="300" alt="Useful Typography Resources - Typography is the backbone of good web design" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/05/typography-136.jpg" /></a><sup class="po" id="note-97"><a href="#97">97</a></sup></p>
<p><a href="http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/">A 20 Minute Intro to Typography Basics</a><sup class="po" id="note-98"><a href="#98">98</a></sup><br />“Typography plays a big role in graphic design and can be one of the hardest things to get right. My aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.”</p>
<p class="showcase"><a href="http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/"><img width="480" height="300" alt="Useful Typography Resources - A 20 Minute Intro to Typography Basics" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/05/typography-144.jpg" /></a><sup class="po" id="note-99"><a href="#99">99</a></sup></p>
<p><a href="http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography">11 Essential Tips for Good Print Typography</a><sup class="po" id="note-100"><a href="#100">100</a></sup><br />Typography is a huge part of design and design is a huge part of type. You can”t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. Here are 11 typography tips to help you convey information in print the right way.</p>
<p class="showcase"><a href="http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography"><img width="480" height="300" alt="Useful Typography Resources - 11 Essential Tips for Good Print Typography" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/05/typography-151.jpg" /></a><sup class="po" id="note-101"><a href="#101">101</a></sup></p>
<p><a href="http://designr.it/aestheticallywritten/2009/01/its-type-oclock/">It’s Type O’clock!</a><sup class="po" id="note-102"><a href="#102">102</a></sup><br />“One of the key qualities of a good information designer is attention to details and since typography is the new cool trend we now seem to care more than ever about presenting text online correctly. The following article is based on my personal experience, yet there’s great probability that much of the following has already been said by somebody else. What you’ll find here is a few tricks for setting type on web I’ve learned over the past few months some of which, amazingly enough, I hardly ever see being used.”</p>
<p class="showcase"><a href="http://designr.it/aestheticallywritten/2009/01/its-type-oclock/"><img width="480" height="300" alt="Useful Typography Resources - It103

What is typography today?104
“Most people think Typography is about designing and selecting fonts. This is true as far as architecture is about designing or selecting furniture. In reality neither is a purpose but a means to an end. That end with architecture is (hopefully) accommodating its inhabitants, for typography it is accommodating the human mind, making the reader read, the viewer watch (not only look), drawing and keeping the attention.”

Useful Typography Resources - What is typography today?105

The Ails Of Typographic Anti-Aliasing106
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we”ll have to rely on software advances to fix these problems.

Useful Typography Resources - The Ails Of Typographic Anti-Aliasing107

Type-Inspired Interfaces108
One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it’s the blank page where I spend the most time. To that end, I often start by choosing type.

Useful Typography Resources - Type-Inspired Interfaces109

CSS and Font Embedding

Revised Font Stack110
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Useful Typography Resources - Revised Font Stack111

Becoming a Font Embedding Master112
I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process.

Useful Typography Resources - Becoming a Font Embedding Master113

Web Font User Guide114
An extensive reference guide for designers, developers and system administrators. It explains how to get started using Web fonts for display on your website. It also contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server.

Useful Typography Resources - Web Font User Guide115

Inspiration: Showcases, Blogs etc.

we love typography116
A showcase of type, typography, lettering, and signage.

Useful Typography Resources - we love typography117

FINDINGS118
Yet another blog featuring beautiful typography.

Useful Typography Resources - FINDINGS119

typo/graphic posters120
typo/graphic posters is a directory of typographic and graphic posters.

Useful Typography Resources - typo/graphic posters121

The Journal of Urban Typography122
TJOUT is dedicated to the documentation and study of signs, word fragments, and typography created with utilitarian intent in urban environments.

Useful Typography Resources - The Journal of Urban Typography123

Pressing Letters: A Collection of Inspirational Letterpress124
The project is an effort to catalog work and promote creativity in the letterpress community. Anyone can submit their letterpress work, references, tips and links. The website has many different categories, including business cards, books, calendars, identity design, music sleeves, stationery and posters. A blog definitely worth bookmarking and visiting regularly.

Useful Typography Resources - Pressing Letters: A Collection of Inspirational Letterpress125

Alltop: Top Typography News126
An aggregator of typography-related news, articles and tools.

Useful Typography Resources - Alltop - Top Typography News127

Last Click: Typography-Related… Games!

FontTrainer128
An interesting tool that help to train you pay attention to subtle differences between fonts.

Useful Typography Resources - FontTrainer129

Your Personality, Summarized in a Typeface130
If you’ve ever sat down with a type designer, what you quickly realize is that they rarely talk about fonts in purely aesthetic or even functional terms: They talk about assertiveness or calm or friendliness. In short, they talk about personality traits. It makes sense, then, that your personality could be translated into a typeface. And Pentragram has done just that, in this lovely microsite, What Type are You? (Password: Character)

Useful Typography Resources - Your Personality, Summarized in a Typeface131

TypePong132
TypePong is a retro iPhone gaming with a modern twist. It allows you to play PingPong with your favourite fonts. You can also challenge your friends and the world on our global score board.

TypePong133

Deep Font Challenge134
Are you a sharp shootin’ font-master or a no-good calamity who can’t spell Futura? To prove your design know how, shoot the font mounted on a target which is displayed on the banner. Points are scored for each successful round and the speed with which you complete it… but be warned, during the game the tables will turn, so keep on your toes.

Useful Typography Resources - Deep Font Challenge135

Related Posts

You may be interested in the following related posts:

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  2. 2 http://www.smashingmagazine.com/2010/01/18/25-new-high-quality-free-fonts/
  3. 3 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  4. 4 http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/
  5. 5 http://thephuse.com/2010/02/the-taxonomy-of-type/
  6. 6 http://thephuse.com/2010/02/the-taxonomy-of-type/
  7. 7 http://typedia.com/
  8. 8 http://typedia.com/
  9. 9 http://www.fontshop.com/help/glossary.php
  10. 10 http://www.fontshop.com/help/glossary.php
  11. 11 http://retinart.net/typography/marksunknown
  12. 12 http://retinart.net/typography/marksunknown
  13. 13 http://www.squidspot.com/Periodic_Table_of_Typefaces/Periodic_Table_of_Typefaces_large.jpg
  14. 14 http://www.squidspot.com/Periodic_Table_of_Typefaces/Periodic_Table_of_Typefaces_large.jpg
  15. 15 http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/
  16. 16 http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/
  17. 17 http://font.is/?p=1268
  18. 18 http://font.is/?p=1268
  19. 19 http://cgstudents.net/specific/indd/in_english/typog_rules.pdf
  20. 20 http://www.greenboathouse.com/dewinetz/pdf/a-typographers-checklist.pdf
  21. 21 http://www.greenboathouse.com/dewinetz/pdf/a-typographers-checklist.pdf
  22. 22 http://inspirationlab.wordpress.com/2010/04/16/so-you-need-a-typeface/
  23. 23 http://inspirationlab.wordpress.com/2010/04/16/so-you-need-a-typeface/
  24. 24 http://www.fontshop.com/blog/?cat=86
  25. 25 http://www.fontshop.com/blog/?cat=86
  26. 26 http://fontfeed.com/archives/erik-spiekermanns-typo-tips/
  27. 27 http://fontfeed.com/archives/erik-spiekermanns-typo-tips/
  28. 28 http://www.designobserver.com/observatory/entry.html?entry=5497
  29. 29 http://www.designobserver.com/observatory/entry.html?entry=5497
  30. 30 http://visitmix.com/Opinions/Picking-Type-for-Web
  31. 31 http://visitmix.com/Opinions/Picking-Type-for-Web
  32. 32 http://justcreativedesign.com/2007/12/04/how-to-choose-a-font/
  33. 33 http://justcreativedesign.com/2007/12/04/how-to-choose-a-font/
  34. 34 http://ilovetypography.com/2008/04/04/on-choosing-type/
  35. 35 http://ilovetypography.com/2008/04/04/on-choosing-type/
  36. 36 http://www.fontshop.com/blog/?p=2436
  37. 37 http://www.fontshop.com/blog/?p=2436
  38. 38 http://www.typography.com/email/2010_03/index_tw.htm
  39. 39 http://www.typography.com/email/2010_03/index_tw.htm
  40. 40 http://typophile.com/node/45613
  41. 41 http://typophile.com/node/45613
  42. 42 http://www.magnetstudio.com/words/2010/opentype-guide
  43. 43 http://www.magnetstudio.com/words/2010/opentype-guide
  44. 44 http://typographica.org/2010/on-typography/making-geometric-type-work/
  45. 45 http://typographica.org/2010/on-typography/making-geometric-type-work/
  46. 46 http://ilovetypography.com/2010/03/25/a-few-things-i%E2%80%99ve-learned-about-typeface-design/
  47. 47 http://ilovetypography.com/2010/03/25/a-few-things-i%E2%80%99ve-learned-about-typeface-design/
  48. 48 http://ilovetypography.com/2009/12/15/font-design-vesper-typeface-devanagari/
  49. 49 http://ilovetypography.com/2009/12/15/font-design-vesper-typeface-devanagari/
  50. 50 http://www.typeit.org/
  51. 51 http://www.typeit.org/
  52. 52 http://webfontspecimen.com/
  53. 53 http://webfontspecimen.com/
  54. 54 http://lamb.cc/typograph/
  55. 55 http://lamb.cc/typograph/
  56. 56 http://www.urtd.net/textmod/
  57. 57 http://www.urtd.net/textmod/
  58. 58 http://lab.arc90.com/experiments/readability/
  59. 59 http://lab.arc90.com/experiments/readability/
  60. 60 http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/
  61. 61 http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/
  62. 62 http://www.smashingmagazine.com/2009/04/02/typography-keyboard-layout-download-now/
  63. 63 http://www.smashingmagazine.com/2009/04/02/typography-keyboard-layout-download-now/
  64. 64 http://font-family.com/arial
  65. 65 http://font-family.com/arial
  66. 66 http://aloestudios.com/tools/emchart/
  67. 67 http://aloestudios.com/tools/emchart/
  68. 68 http://www.myfontbook.com/
  69. 69 http://www.myfontbook.com/
  70. 70 https://addons.mozilla.org/en-US/firefox/addon/4415
  71. 71 https://addons.mozilla.org/en-US/firefox/addon/4415
  72. 72 http://inamidst.com/stuff/unidata/
  73. 73 http://inamidst.com/stuff/unidata/
  74. 74 http://www.fontsquirrel.com/fontface/generator
  75. 75 http://www.fontsquirrel.com/fontface/generator
  76. 76 http://www.digitalmediaminute.com/reference/entity/index.php
  77. 77 http://www.digitalmediaminute.com/reference/entity/index.php
  78. 78 http://leftlogic.com/lounge/articles/entity-lookup/
  79. 79 http://leftlogic.com/lounge/articles/entity-lookup/
  80. 80 http://copypastecharacter.com/
  81. 81 http://copypastecharacter.com/
  82. 82 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  83. 83 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  84. 84 http://www.ischool.utexas.edu/~ct/chi_p618.pdf
  85. 85 http://www.ischool.utexas.edu/~ct/chi_p618.pdf
  86. 86 http://www.thomasphinney.com/2009/04/font-terms-survey-results/
  87. 87 http://www.thomasphinney.com/2009/04/font-terms-survey-results/
  88. 88 http://fontfeed.com/archives/font-or-typeface/
  89. 89 http://fontfeed.com/archives/font-or-typeface/
  90. 90 http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  91. 91 http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/
  92. 92 http://www.sitepoint.com/article/principles-beautiful-typography/
  93. 93 http://www.sitepoint.com/article/principles-beautiful-typography/
  94. 94 http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/
  95. 95 http://www.freddesign.co.uk/2009/12/archive/rules-for-good-typography/
  96. 96 http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/
  97. 97 http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/
  98. 98 http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
  99. 99 http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
  100. 100 http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography
  101. 101 http://www.spoonfeddesign.com/11-essential-tips-for-good-print-typography
  102. 102 http://designr.it/aestheticallywritten/2009/01/its-type-oclock/
  103. 103 http://designr.it/aestheticallywritten/2009/01/its-type-oclock/
  104. 104 http://kilianmuster.com/blog/what-is-typography-today
  105. 105 http://kilianmuster.com/blog/what-is-typography-today
  106. 106 http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  107. 107 http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  108. 108 http://24ways.org/2009/type-inspired-interfaces
  109. 109 http://24ways.org/2009/type-inspired-interfaces
  110. 110 http://www.awayback.com/revised-font-stack/
  111. 111 http://www.awayback.com/revised-font-stack/
  112. 112 http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
  113. 113 http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
  114. 114 http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  115. 115 http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  116. 116 http://welovetypography.com/
  117. 117 http://welovetypography.com/
  118. 118 http://benmartineau.com/findings/
  119. 119 http://benmartineau.com/findings/
  120. 120 http://www.typographicposters.com/#
  121. 121 http://www.typographicposters.com/#
  122. 122 http://tjout.tumblr.com/
  123. 123 http://tjout.tumblr.com/
  124. 124 http://www.pressingletters.com/
  125. 125 http://www.pressingletters.com/
  126. 126 http://typography.alltop.com/
  127. 127 http://typography.alltop.com/
  128. 128 http://ft.vremenno.net/en/
  129. 129 http://ft.vremenno.net/en/
  130. 130 http://www.fastcompany.com/blog/cliff-kuang/design-innovation/your-personality-summarized-typeface
  131. 131 http://www.fastcompany.com/blog/cliff-kuang/design-innovation/your-personality-summarized-typeface
  132. 132 http://www.typepong.com/
  133. 133 http://www.typepong.com/
  134. 134 http://www.deep.co.uk/games/font_game/
  135. 135 http://www.deep.co.uk/games/font_game/
  136. 136 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  137. 137 http://www.smashingmagazine.com/2010/01/18/25-new-high-quality-free-fonts/
  138. 138 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  139. 139 http://www.smashingmagazine.com/2009/05/29/useful-glossaries-for-web-designers-and-developers/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Great list of resources!

  2. 2

    This is a great list of font resources, danke Vitaly!

    Tedi

  3. 3

    I am always confused about typo and font usage, this post is so much helpful for me.
    Thanks!

  4. 4

    Nice collection. Thanks

  5. 5

    I’ll definitely be bookmarking this one as it’s got some very useful info. Typography is one thing that can easily be overlooked in design making this all the more important to take note of. Nice article!

  6. 6

    I would like to add this free calc for help with setting line-height. (still in beta though)
    http://www.perfecttypography.com/

  7. 7

    Great list. The typeface anatomy and glossary is something every designer should have printed out and pinned to a surface very near to where they work.

  8. 8

    great! :)

  9. 9

    Awesome list of some very useful articles! Thanks for sharing Vitaly :)

  10. 10

    Excellent article. One of the best and most useful SM has ever done IMO.

    Two thumbs up!

  11. 11

    Take a look at the Baskerville sample in the image for “The Principles of Beautiful Typography.” You have to look pretty close to see those serifs–it’s good they had it magnified, I’d have missed them otherwise. ;)

  12. 13

    amazing typography list, you can also add my list as reference http://www.socialh.com/2009/11/47-typography-tools-for-web-design.html

  13. 14

    No mention of typekit.com? An incredible project by Bryan Mason and Jason Santa Maria. The Font Squirrel font-face generator is cool. Zeldman presents a good argument against the buying vs. renting of typeography. http://www.zeldman.com/2010/03/22/my-lovehate-affair-with-typekit/ Great post, SmashMag.

  14. 15

    Wow, I’ve been waiting for something like this! Thx a bunch!

  15. 16

    Thanks a ton for this wonderful list!

  16. 17

    James Brocklehurst

    May 7, 2010 1:51 am

    I have a downloadable web safe font cheat sheet that may of of interest to readers of this post: Introducing the Web Safe Font Cheat Sheet

  17. 18

    Thank you Vitaly. If anybody wants to read a book on how to create your own typefaces, let me suggest the Logo, Font & Lettering Bible from Leslie Cabarga.

  18. 20

    Thank you so much for this! I’ve been looking recently for tutorials on typography- I love & appreciate beautiful typography, and I want to learn the principles behind combining different fonts, etc., but I’ve been having a hard time finding a lot of info online.
    Thanks!!!! =)

  19. 21

    This is a great collection. One of my favorite subjects in design is Typography. I am always looking for a new typography resource. Thanks for sharing with us.

  20. 22

    but i do have to agree with tiffany, http://www.pilo.me is the most complete typography site for fonts online. sites like typophile and ilt are good for educational and discussion purposes, but pilo by far is the way to go as they actually have fonts and they actually have amazing and premium type there.

    • 23

      i tried it several times, also requested an invitation on twitter for pilo.me. can you please help me and tell the admins that the script isnt working or if you think i am worth it, help out with an invitation please?

  21. 24

    Wow!!! Incredible collection! Just what I needed, thank you so much ♥

  22. 25

    That’s like the Wiki links for typography! I’ve bookmarked it and will probably get back to it if I have a typographic question in mind.

    Thanks!

  23. 26

    Thanks for listing my EmChart among all these other great tools and resources. There’s so much cool stuff here, it’s going to take a while to check them all out!

  24. 27

    UAO!
    How much time did you spend to build this list?

  25. 28

    Thanks Vitaly for such an awesome list. The link to My Font Book really helped me. I always used to download the font, install it and check it. Now its so much easier. Also i am looking for a good offline font viewer which is lightweight and fast. Thanks again.

  26. 29

    Wow, what an incredible list. Very very educational, thank you so much for spending the time to organize this for us all to read, enjoy and learn from. I am personally so grateful.

    Side note, in response to rich, I love http://www.pilo.me as well and think it is by far one of the leading type forums for fonts around, however, this list is more type education than type download, but I say that and don’t want to take anything away from pilo at all, it is just a different category. Thanks again!!

  27. 30

    Wow!
    Gigantic list!

  28. 31

    Great info, just recently discovered my interest in typography after taking over as a desktop publisher for a local newspaper. I’ve spent over a decade in Photoshop and Illustrator designing visual images without much emphasis on type.

    Now that I have spent some real time with InDesign I’ve found myself eyeing up front end web design and appreciating it more with the tools available to create some amazing layouts and interaction experiences. Looks like I have my typographic work cut out for me.

  29. 32

    Nils Norman Haukås

    May 7, 2010 5:00 pm

    Well. This IS an in-depth article of articles, hehe. Thanks SM. I guess I’ll be processing this article and its resources for several days to come. :)

  30. 33

    What an amazing source of information .. i sauntered this place for 5 hours and even feels like to spare more time .. keep up :)

  31. 34

    “When I have to chose type for a project, I always rely on my feelings and lots of testing, wating for the love/hate Alchemy to happen and decide for me. This method, mostly based on luck, is often time consuming, and I often found myself needing to ask for help on the forums.”

    Yo SmashMag, some of this writing is pretty clumsy. Could use some editing love …

  32. 35

    Great resource list, I think TypeDNA’s Fontshaker (shows the fonts you have installed on your machine in cool 3d interface) should be on the list. http://www.typedna.com

  33. 36

    oh my god, your list is very powerful, thanks for sharing

  34. 37

    Cheers mate, really good list

  35. 38

    Great Article but I would find it more useful if you would limit it to 10 tools you use yourself and would like to recommend to others. Like this it’s just a lot of work to work through all links.

  36. 39

    Great list! I like how the “The Taxonomy of Type” article by the Phuse was basic and to the point.

  37. 40

    this post is one the best so far. Godly awesome!

  38. 41

    To support Interface-Designers, Art Directors and Software Developers choosing the proper Fonts for an iPad Application I came up with a piece of Software that makes it really easy to explore the Typefaces provided by the iPhone OS: iTalics for iPad. I would be happy if you give it a try and provide some feedback. iTalics is available at the Apple App Store:

    itms://itunes.apple.com/us/app/italics/id366581431?mt=8

  39. 42

    Love this article~

  40. 43

    Thanks for the great set of resources!

  41. 44

    Graphic Eye India

    November 1, 2010 9:19 am

    Really very nice and Informative .. thanks for sharing.

  42. 45

    Nice!……this is the best way to implement typographic elements in HTML

  43. 46

    if i need a source of inspiration on typography, this is the page. give me more!

↑ Back to top