Web Typography: Educational Resources, Tools and Techniques


Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It’s a great time for web design, and it’s a great time for web typography. Still, being as excited as we are, we should not forget about the foundational principles of good type design on the web and use them properly within our projects. Great choice is good, but, most importantly, we should be making meaningful typographic choices in our designs.

In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. Please notice that the overview presents resources which we have stumbled upon, discovered, collected and reviewed over the last six months. This round-up is quite long, so save some time for a thorough study.

We believe that such round-ups are valuable because they present many useful pointers in one place. From time to time we have many inquiries about such round-ups and we gladly prepare them for our readers, along with in-depth articles which are regularly published on Smashing Magazine.

Educational Typography Resources

So You Want to Create a Font1
Alec Julien’s introductory piece on how you can create some beautiful fonts with a little hard work, a lot of knowledge and a little inspiration. The series covers font editing software, transition from paper drawings to screen drawings, vertical and horizontal metrics and kerning. Don’t forget to check out part 22 as well.

So you want to create a font. Part 2 3

Kerning Type and Great Typography4
There are lots of tips on the best way to perfectly kern a piece of type. As with all designs, kerning can be subjective, but some are just plain right or wrong.

Kerning type and great typography5

Perfect your Kerning Skills6
Kerning is the art of spacing individual characters in a word so that they sit in correct relationship to one another, creating a subtle harmony and rhythm. In this article, Tom Sewell gives some recommendations for good letter spacing.

 Perfect your kerning skills7

Font Hinting8
Hinting, or screen optimising, is the process by which TrueType or PostScript fonts are adjusted for maximum readability on computer monitors. This article compares different ways of hinting (black & white, grey-scale, ClearType, DirectWrite) and explains the behaviour of fonts under different rasterisers. You may want to read Font Hinting Explained By A Font Design Master9 and TrueType Hinting10 as well.

Font hinting11

Type Rendering On The Web12
This article introduces a series of posts about type rendering on the Web. The translation of a font’s outline into pixellated text of varying quality, consistency and sharpness is not straightforward. It involves both a font and a rendering engine, and only so much can be controlled by type designers and web designers. Also, check design of fonts for the web13.

Type rendering on the web 14

Type Rendering: Web Browsers15
Every great web browser has a layout engine that explicitly decides how to turn our markup, stylesheets and scripts into living, breathing websites. Layout engines have everything to do with how our web designs are generated and visualized. However, for the specific task of type rendering, layout engines almost always defer to the operating system’s text rendering engine. This article looks at how type rendering is affected, or not affected, by each popular web browser. Also, check operating systems16.

Type rendering: web browsers 17

Four Ways to Mix Fonts18
H&FJ’s excellent article about ways to combine fonts in your designs. “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.”

 Four Ways to Mix Fonts19

Mixing Typefaces20 (PDF)
A handy overview of typefaces that fit and do not fit together when combined in a design. A September 1992 issue from the “International Journal of Typograpics”.

Mixing Typefaces21

Font Metrics and Vertical Space in CSS22
If you have ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this one’s for you.

The origins of abc23

Fundamentals: Combining Type With Helvetica24
An interesting article presenting some choices that work well with Helvetica, presented by the German typographer Indra Kupferschmid.


The Ails Of Typographic Anti-Aliasing 26
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. Anti-Aliasing is the next best thing to a world of higher-resolution monitors.

The Ails Of Typographic Anti-Aliasing 27

An Introduction to OpenType Substitution Features28
John Boardley’s beautiful article about OpenType substitution features. The article explains both pasic and more complex features and ideas. All examples should be considered starting points, just to pique your interest.

An Introduction to OpenType Substitution Features 29

Beginners Guide to OpenType30
Using OT technology, you can substitute your characters for different glyphs using many different methods. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

Beginners Guide to OpenType31

The Beauty of Typography: Writing Systems and Calligraphy of the World32
Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. This article covers five categories of writing systems. This may sound tedious and academic, but it’s not. If you take the time to understand them, you’ll find that they all give us something special. Check part 233, too.

The Beauty Of Typography: Writing Systems And Calligraphy Of The World34

Linux Font Equivalents to Popular Web Typefaces35
Linux distributions each ship with their own font libraries. This article focuses on similar typefaces you can use within a font-family to help make your design look better across operating systems.

Linux Font Equivalents to Popular Web Typefaces36

The Grammar Cheat Sheet 37
When you know the correct way to structure a sentence, the world becomes a scary place — you start to notice how many people get it painfully wrong. The ease of content creation that the web now affords us is making the problem worse, so why not get a basic understanding to help make your text a little more professional.

The Grammar Cheat Sheet 38

Typographic Marks Unknown39
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. This article is an overview of typographic marks often seen or used, but not well known. Take a look at part 240 which discusses ligatures and blockquotes.

Typographic Marks Unknown41

eXtreme Type Terminology42
Paul Dean’s detailed introduction to type terminology. The series explains the various kinds of typefaces, their properties as well as general typographic terms.

eXtreme Type Terminology 43

Better web typography with OpenType features44
In this article Ralf Herrmann shows some of the typical features of OpenType fonts and how they can be used in Firefox. The article describes the support of small caps, figure sets, descretionary ligatures, contextual alternates, case feature, stylistic sets and fractions.

Better web typography with OpenType features45

Best Practices of Combining Typefaces 46
Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. This Smashing Magazine’s article takes a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Best Practices of Combining Typefaces 47

Some Typographic Rules to Remember48 (PDF)
A nice compact set of typographic rules, adapted from The Mac Is Not a Typewriter by Robin Williams. The document also contains a typographic checklist.

Some Typographic Rules to Remember49

Making Geometric Type Work50
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. Dissatisfied with the limits of commercial fonts at the time, this designer twisted and distorted each character to fit into a few simple, very strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

Making Geometric Type Work51

The Typographic Scale52
A detailed introduction to the typographic scale, its history, relationships of hierarchy, its implications and practical applications.

Serif Font Guide53
A useful slideshow for those interested in the history of serifs and their usage in design. Prepared by Rob McMinn.

Choosing the Right Font: A Practical Guide to Typography on the Web 54
Typography is an huge field. People devote years of their lives to this ancient craft, and yet there’s always something new to learn. In this article, the major points that you should consider when selecting a typeface for a website will be reviewed.

Useful Typography References

Typedia: A Shared Encyclopedia of Typefaces55
Where do typefaces come from? Who made them? If you want to learn about type and share your own knowledge, Typedia is the right place. It’s a community website and resource to classify, categorize, and connect typefaces. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typedia: A Shared Encyclopedia of Typefaces56

Typography Primer: all you need to know in one PDF57
This informative PDF from Adobe concisely covers all the basic terms about typography. Among others: Serif and Sans Serif, X-Height, Alignment, Spacing and Choosing and Using Typefaces. A quick download for a nicely designed and easy to read boost to your typography skills.

Typography Primer: all you need to know in one PDF58

Typographic Sins59
Smart quotes instead of dumb quotes and when to use hyphens instead of a en dash. The most common typographic errors you want to avoid. Here they are all gathered together in one place. Worth saving and re-reading every once in a while.

Typographic Sins60

FontShop Type Education61
FontShop provides useful educational resources for typographers and designers interested in typography. The documents are formatted for easy downloading and printing, perfect for the classroom or studio.


Typography for Lawyers63
Matthew Butterick prepared a very detailed overview of typographic rules, guidelines and examples for legal documents (e.g. court rules regarding the format of pleadings). As a result, the website is useful not only for lawyers but for everybody who is interesting in typographic rules and its subtleties. The overview is also available as a physical book.

Typography for Lawyers64

Fonts for iPad & iPhone65
Michael Critz gives you a long and handy reference table of the most popular typefaces available for the iPad and iPhone and their classifications.

Fonts for iPad & iPhone66

The Great Typekit Table67
Finding a good Typekit font for long blocks of text is hard, but this site made it a little easier. The guys behind Sleepover sifted through the Typekit library and pared it down to the list according to two simple rules: first, the font had to have lowercase, upper case, bold, italic, and bold italic; second, the font couldn’t be hand writing, script, or mono space.

The Great Typekit Table68

Useful Typography Tools

An implementation using JavaScript and HTML5 canvas elementm which is meant to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.


Here is a nicely developed lightweight and easy-to-use jQuery plugin for radical Web Typography.


Web Font Specimen73
Real web type in read web context. Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Prepare your own web font specimen in three easy steps.

Web Font Specimen74

Type Folly75
TypeFolly allows designers to easily create beautiful, HTML/CSS3 “type follies”. The tool gives designers the freedom to create beautiful type compositions and test new font combinations. TypeFolly supports the following CSS properties: font-family, font-size, color, letter-spacing, word-spacing, font-style, font-weight, text-decoration, text-align, z-index, line-height, width, height, opacity, moz/webkit-transform, text-shadow and font-face.

Type Folly76

Awesome Fontstacks77
Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

Awesome Fontstacks78

Soma FontFriend79
A bookmarklet for typographically obsessed web designers. Enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.

Soma FontFriend80

Here is a site you can turn to in case you’re wondering what font family a particular font type belongs to. Preview available as well.

Arial :: font-family.com82

Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when you want to resize text in your browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad.


High quality, screen-optimized fonts that are designed specifically for web use. FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.


Good Web Fonts for Online Text87
In case you don’t manage to find the time to test web fonts, you’ll be happy to discover this site.

Good Web Fonts for Online Text88

Font Previewer89
A preview is available to let you see how a font looks like once its size, variant, shadow have been changed. It is also possible to transform, decorate and add spacings. Font family names and their designers provided.

Font Previewer90

If you have the need to type anything in a foreign language which has accents and other strange-looking characters, and you only have a US keyboard, your life used to be miserable.


Letters & Ligatures93
Scroll through and find the letter you have been or are still looking for. Simply by clicking on it, you can paste it into your text or your personal collection of letters.

Letters & ligatures. 94

JavaScript / CSS Font Detector 95
A JavaScript code that detects availability of a particular font in a browser using JavaScript and CSS.

JavaScript / CSS Font Detector 96

How to Detect Font-Smoothing Using JavaScript97
Some fonts look bad in certain browsers without font-smoothing enabled in the operating system (e.g. Win XP systems don’t have the ClearType font smoothing activated by default). This post provides a way to detect whether or not font-smoothing was being used using JavaScript.

How to Detect Font-Smoothing Using JavaScript98

This tool provides a few looks or “flavors” for beautiful typography on the Web. These “flavors” make use of Typekit for their special font faces.


A Typekit Colophon Bookmarklet101
This bookmarklet produces a colophon102 that gives you the name of the Typekit fonts used on a site. After adding this bookmarklet to your bookmark toolbar, click on it and it will open the site’s colophon. If the site doesn’t use Typekit, it’ll pop up a little alert to let you know.

A Typekit Colophon Bookmarklet103

50 Useful Design Tools for Beautiful Web Typography104
When chosen wisely and used carefully, typography 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.

50 Useful Design Tools For Beautiful Web Typography105

@font-face face off106
The wast arrey of font delivery services can be confusing at times. @font-face Face Off comparison table offers an overview of many of those services and what they offer. Including number of fonts, foundries and payment models.

@font-face face off107

50 Helpful Typography Tools and Resources108
A roundup of beautiful typography with great typographic techniques and tools. Here is the place you can find a fresh dose of further typography-related resources.

50 Helpful Typography Tools And Resources109

Altfontprev – Project Hosting on Google Code110
A JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen.

A plugin for your WordPress engine that helps you improve your web typography including hyphenation, space control, intelligent character replacement as well as CSS hooks.

Type-Related Articles

Ode, a Fresh Start for a Broken Script112
This article describes the origins and development of the typeface “Ode”. From the article: “When designing a typeface, I prefer to explore a construction principle rather than revive an existing typeface idea. These principles or writing models are based on the tools and techniques originally used. Understanding these workings are often a great source of inspiration for me.”

Ode, a Fresh Start for a Broken Script113

‘Dreams’, ‘Stars’ & ‘So Much To Do’114
A look behind the design process of prints “Dreams”, “stars” and “So Much To Do”. From the article: “I’ll show all three prints in this article, but for practical purposes I’ll focus primarily on ‘Dreams’, one of my most ambitious prints to date. What follows is an outline of what I wanted to achieve, the lettering styles I developed, and why I produced it.”

‘Dreams’, ‘Stars’ & ‘So Much To Do’115

The Origins of ABC116
A world full of A, B and Cs, but how did they come to being? The Latin or Roman alphabet, the world’s most prolific, most widespread – where did it all start? This site lets you travel much farther back in time when even (agricultural) civilisation emerged itself.

The origins of abc117

History of Arabic Type Evolution from the 1930’s till present118
The origin of the Arabic script goes back to the first alphabets which were created by the Phoenicians. The Phoenicians were living on the costal area of Lebanon, Palestine and Syria. Since the Phoenicians were business traders sailing the Mediterranean, the alphabet influenced all the Mediterranean nations.

History of Arabic Type Evolution from the 1930's till present119

The Art and Tradition of Typography120
Here is a brief overview of some of the highlights of ‘typographic engineering’ from the past 500 years. Usually, it is the development of type and typography for Latin based scripts that are discussed; in this post however, you will learn that there is an equivalent rich history of other type scripts throughout the world as well.

The Art and Tradition of Typography121

Web Fonts at the Crossing122
Latest browsers all known to us have rolled out roughly comparable implementations of @font-face font linking, making it possible for us to experiment with numerous and different fonts on our websites. Richard Fink describes the state of the art, explains various formats and the possibilities currently available for web designers.

Web Fonts at the Crossing123

What are the Origins of the World’s Most Important Typefaces124
Here you can find a selection of stylistically related letters that make up a family of alphabetical letters used in typesetting as well the origins of the most famous typefaces used throughout the centuries.

What are the Origins of the World's Most Important Typefaces125

Why Did I Start a Type Foundry?126
Christian Schwartz tells us his story about how he started a type foundry. A pretty successful one.

Why did I start a type foundry?127

A few things I’ve learned about typeface design128
Gerry Leonidas talks about ‘design’ having memory and being iterative, scale concepts that are not intuitive, tools as concepts and the fact that the Latin script is the odd one out.

A few things I've learned about typeface design129

Free Fonts: Free Is Not Always Free130
They are everywhere – pre-installed on every computer, bundled with software, and offered by the thousands on free font websites. Let’s take a look at the different types of “free” fonts out there.

Free Fonts: Free Is Not Always Free131

With Beautiful Type Comes Great Responsibility132
Many free fonts can be extremely beautiful. The trick is knowing how/when to use them, their history, your message and how it’s being stated with the type of personality you select.

With beautiful type comes great responsibility133

The Changing Typography of the Web134
An article on how the typography of the web has changed, is changing and getting even better!

What is Typography Today?135
Kilian Muster talks about how most people think that typography is only 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.

Thirteen Ways of Looking at a Typeface136
Here Michael Bierut talks about the reasons why one should choose a particular typeface. Helvetica (naturally), Futura, Garamond No. 3, Century Expanded and Bodoni were the only five fonts he had mostly used between 1980 and 1990.

Technical Articles

Using HTML Symbol Entities137
Some characters are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. Pass by to learn more.

Using HTML Symbol Entities138

Adding Subpixel-Hinting to Your Photoshop Text Layers139
The usual way to smooth text in Photoshop is to choose one of the different anti-aliasing techniques in the drop down menu. The downside as you know is, that the smoothing of the text is done by grayscale and not by blending different channels.

Yes, add subpixel-hinting to your Photoshop text layers140

Using @Font-face for Icons141
Conceptually, if we deconstruct a font down to its basic elements, we can make use of @font-face for things other than type, icons. Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive”. We can then reference each glyph by its corresponding character code. With this in mind, the glyphs we reference can really be any vector-based single color image.

@font-face Gotchas142
A few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff. Collected by Paul Irish.

How to Use CSS @font-face143
This article by Tim Brown prepares typefaces for use on the web, goes through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated with Paul Irish’s new syntax144.

Typography Magazines and Inspirational Resources

Type Theory145
Type Theory is a journal of contemporary typography featuring news, views, reviews and interviews.

Type Theory146

This article provides a good overview of how period type has been used in different ways. The typeface of a film title, for example, usually reflects the era in which the film takes place. Beyond titles, every movie depicts a wide range of props and set pieces, such as newspapers, brochures and sign boards. How can one distinguish between a well-made film and junk?


Pressing Letters149
Pressing Letters is an effort to catalog and promote creativity in the letterpress community. The goal is to collect and display references and progressive letterpress design as it is published or found. The creators of the site encourage designers and individual to submit their images, references or ideas, too.

Pressing Letters150

We love typography151
Oldie but goodie: a growing showcase colleting type, typography, lettering and signage. Visitors of the site are encouraged to submit their images, too.

We love typography152

Web Font Awards153
The Web Font Awards showcases beautiful examples of how Web fonts are being put to use in the design community. Very inspirational.

 Web Font Awards154

Letterpool London155
Letterpool London is a mass public art project, a celebration of the city’s urban art and architecture, looked at through its typography — the brands, graffiti, instructions and ideology.


Letterpress Daily157
David Wolske is collecting printing equipment and wood type and documents his continually expanding collection online.

Letterpress Daily158

U&lc back issues to be made available159
Fonts.com regularly releases volumse of the classic journal “The International Journal of Typograpics” which was first published in 1974. Herb Lubalin was the editorial and art director of the first issue and his sem­inal design set the stage for future issues of trend set­ting and award winning editorial creations. Volume 1 is currently available for free download.

U&lc back issues to be made available 160

Type Union161
Another place for anyone to share their type work.

Type Union162

A Typographic Anatomy Lesson163
Typographers refer to elements of a letterform using a variety of terms that align naturally to architecture or the human body—eye, ear, foot, arm, lobe, leg—and this poster captures many of them. Simply beautiful.

A Typographic Anatomy Lesson164

Typo/graphic posters165
Typo/graphic posters is a directory of typographic and graphic posters, a passionate project focused on the design community. The goal is to be a timeless source for studies, inspiration and promotion of good design through poster culture and cultivation of typography and pure forms of graphic design.

Typo/graphic posters166

Trend roundup: Typographic home decor167
The best thing about type in print is that it is incredibly versatile — be it small or large scale, blocks of text, single words or single letters, it all looks great in the right context. The same goes for type design in home decor, which explains why there are almost as many great font-related design objects as there are typefaces. This page is a round-up of some pieces of furniture and home accessories that incorporate type in some way.

Trend roundup: Typographic home decor168

Typography Served169
Typography Served is a collection of sites that showcase category-specific content from the Behance Network.

Typography Served 170

Typographic Maps171
These unique maps accurately depict the streets and highways, parks, neighborhoods, coastlines, and physical features of the city using nothing but type. Only by manually weaving together thousands upon thousands of carefully placed words does the full picture of the city emerge. Every single piece of type was manually placed, a process that took hundreds of hours to complete for each map.

Typographic Maps 172

Last Click

A fun site to learn more on web fonts. Note that you will get more points for correctly answering one that other people had trouble with than one that most people got right.


Type Memory175
The fun but quite difficult game of Type Memory.

Type Memory176


  1. 1 http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-font-part-1/
  2. 2 http://ilovetypography.com/2007/10/29/so-you-want-to-create-a-font-part-2/
  3. 3 http://ilovetypography.com/2007/10/29/so-you-want-to-create-a-font-part-2/
  4. 4 http://www.typecastcreative.co.uk/2010/09/how-to-kern-type-perfectly/
  5. 5 http://www.typecastcreative.co.uk/2010/09/how-to-kern-type-perfectly/
  6. 6 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/perfect_your_kerning_skills
  7. 7 http://www.computerarts.co.uk/tutorials/2d__and__photoshop/perfect_your_kerning_skills
  8. 8 http://www.typotheque.com/articles/hinting
  9. 9 http://readableweb.com/font-hinting-explained-by-a-font-design-master/
  10. 10 http://www.microsoft.com/typography/TrueTypeHintingIntro.mspx
  11. 11 http://www.typotheque.com/articles/hinting
  12. 12 http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
  13. 13 http://blog.typekit.com/2010/11/09/type-rendering-the-design-of-fonts-for-the-web/
  14. 14 http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/
  15. 15 http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  16. 16 http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
  17. 17 http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
  18. 18 http://www.typography.com/email/2010_03/index.htm
  19. 19 http://www.typography.com/email/2010_03/index.htm
  20. 20 http://www.as8.it/handouts/mixing-typefaces_U&lc1992.pdf
  21. 21 http://www.as8.it/handouts/mixing-typefaces_U&lc1992.pdf
  22. 22 http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
  23. 23 http://ilovetypography.com/2010/08/07/where-does-the-alphabet-come-from/
  24. 24 http://www.fontshop.com/blog/?p=2436
  25. 25 http://www.fontshop.com/blog/?p=2436
  26. 26 http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  27. 27 http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  28. 28 http://ilovetypography.com/2010/06/18/an-introduction-to-opentype-substitution-features/
  29. 29 http://ilovetypography.com/2010/06/18/an-introduction-to-opentype-substitution-features/
  30. 30 http://www.magnetstudio.com/words/2010/opentype-guide
  31. 31 http://www.magnetstudio.com/words/2010/opentype-guide
  32. 32 http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/
  33. 33 http://www.smashingmagazine.com/2010/06/22/the-beauty-of-typography-writing-systems-and-calligraphy-part-2/
  34. 34 http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/
  35. 35 http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/
  36. 36 http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/
  37. 37 http://retinart.net/miscellaneous/grammar/
  38. 38 http://retinart.net/miscellaneous/grammar/
  39. 39 http://retinart.net/typography/marksunknown/
  40. 40 http://retinart.net/typography/typographic-marks-unknown-ii-ligatures-blockquotes/
  41. 41 http://retinart.net/typography/marksunknown/
  42. 42 http://ilovetypography.com/2008/03/21/extreme-type-terminology/
  43. 43 http://ilovetypography.com/2008/03/21/extreme-type-terminology/
  44. 44 http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/
  45. 45 http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/
  46. 46 http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
  47. 47 http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
  48. 48 http://cgstudents.net/specific/indd/in_english/typog_rules.pdf
  49. 49 http://cgstudents.net/specific/indd/in_english/typog_rules.pdf
  50. 50 http://typographica.org/2010/on-typography/making-geometric-type-work/
  51. 51 http://typographica.org/2010/on-typography/making-geometric-type-work/
  52. 52 http://retinart.net/typography/typographicscale/
  53. 53 http://www.slideshare.net/mcmrbt/serif-font-guide
  54. 54 http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web/
  55. 55 http://typedia.com/
  56. 56 http://typedia.com/
  57. 57 http://bonfx.com/typography-primer-all-you-need-to-know-in-one-pdf/
  58. 58 http://bonfx.com/typography-primer-all-you-need-to-know-in-one-pdf/
  59. 59 http://www.rayelder.com/teaching/typographic-sins/
  60. 60 http://www.rayelder.com/teaching/typographic-sins/
  61. 61 http://www.fontshop.com/education/
  62. 62 http://www.fontshop.com/education/
  63. 63 http://www.typographyforlawyers.com/
  64. 64 http://www.typographyforlawyers.com/
  65. 65 http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/
  66. 66 http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/
  67. 67 http://www.sleepoversf.com/the-great-typekit-table/
  68. 68 http://www.sleepoversf.com/the-great-typekit-table/
  69. 69 http://www.bramstein.com/projects/typeset/
  70. 70 http://www.bramstein.com/projects/typeset/
  71. 71 http://daverupert.com/2010/09/lettering-js/
  72. 72 http://daverupert.com/2010/09/lettering-js/
  73. 73 http://webfontspecimen.com/
  74. 74 http://webfontspecimen.com/
  75. 75 http://www.typefolly.com/
  76. 76 http://www.typefolly.com/
  77. 77 http://www.awesome-fontstacks.com/
  78. 78 http://www.awesome-fontstacks.com/
  79. 79 http://somadesign.ca/projects/fontfriend/
  80. 80 http://somadesign.ca/projects/fontfriend/
  81. 81 http://font-family.com
  82. 82 http://font-family.com/arial
  83. 83 http://fordinteractive.com/tools/emchart/
  84. 84 http://fordinteractive.com/tools/emchart/
  85. 85 http://fontfonter.com/
  86. 86 http://fontfonter.com/
  87. 87 http://www.goodwebfonts.com/
  88. 88 http://www.goodwebfonts.com/
  89. 89 http://code.google.com/webfonts/preview
  90. 90 http://code.google.com/webfonts/preview
  91. 91 http://www.typeit.org/
  92. 92 http://www.typeit.org/
  93. 93 http://interject.me/letters
  94. 94 http://interject.me/letters
  95. 95 http://www.lalit.org/lab/javascript-css-font-detect
  96. 96 http://www.lalit.org/lab/javascript-css-font-detect
  97. 97 http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
  98. 98 http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
  99. 99 http://type-a-file.com/
  100. 100 http://type-a-file.com/
  101. 101 http://www.capndesign.com/archives/2010/11/a_typekit_colophon_bookmarklet.php
  102. 102 http://typekit.com/tour/colophon
  103. 103 http://www.capndesign.com/archives/2010/11/a_typekit_colophon_bookmarklet.php
  104. 104 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  105. 105 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  106. 106 http://fffo.grahambird.co.uk/
  107. 107 http://fffo.grahambird.co.uk/
  108. 108 http://www.smashingmagazine.com/2010/05/06/50-helpful-typography-tools-and-resources/
  109. 109 http://www.smashingmagazine.com/2010/05/06/50-helpful-typography-tools-and-resources/
  110. 110 https://code.google.com/p/altfontprev/
  111. 111 http://wordpress.org/extend/plugins/wp-typography/
  112. 112 http://www.ilovetypography.com/2010/09/01/ode-fresh-start-for-a-broken-script/
  113. 113 http://www.ilovetypography.com/2010/09/01/ode-fresh-start-for-a-broken-script/
  114. 114 http://www.ilovetypography.com/2010/11/15/typographic-posters-dreams-stars-so-much-to-do/
  115. 115 http://www.ilovetypography.com/2010/11/15/typographic-posters-dreams-stars-so-much-to-do/
  116. 116 http://ilovetypography.com/2010/08/07/where-does-the-alphabet-come-from/
  117. 117 http://ilovetypography.com/2010/08/07/where-does-the-alphabet-come-from/
  118. 118 http://29letters.wordpress.com/2007/05/28/arabic-type-history/
  119. 119 http://29letters.wordpress.com/2007/05/28/arabic-type-history/
  120. 120 http://blogs.msdn.com/b/fontblog/archive/2010/06/25/the-art-and-tradition-of-typography.aspx
  121. 121 http://blogs.msdn.com/b/fontblog/archive/2010/06/25/the-art-and-tradition-of-typography.aspx
  122. 122 http://www.alistapart.com/articles/fonts-at-the-crossing/
  123. 123 http://www.alistapart.com/articles/fonts-at-the-crossing/
  124. 124 http://www.chacha.com/content/infographics/Origin-of-important-typefaces
  125. 125 http://www.chacha.com/content/infographics/Origin-of-important-typefaces
  126. 126 http://ilovetypography.com/2010/05/06/why-did-i-start-a-type-foundry/
  127. 127 http://ilovetypography.com/2010/05/06/why-did-i-start-a-type-foundry/
  128. 128 http://ilovetypography.com/2010/03/25/a-few-things-i%E2%80%99ve-learned-about-typeface-design/
  129. 129 http://ilovetypography.com/2010/03/25/a-few-things-i%E2%80%99ve-learned-about-typeface-design/
  130. 130 http://fontfeed.com/archives/free-fonts-free-is-not-always-free/
  131. 131 http://fontfeed.com/archives/free-fonts-free-is-not-always-free/
  132. 132 http://www.thedesigncubicle.com/2010/07/with-beautiful-type-comes-great-responsibility/
  133. 133 http://www.thedesigncubicle.com/2010/07/with-beautiful-type-comes-great-responsibility/
  134. 134 http://latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
  135. 135 http://kilianmuster.com/blog/what-is-typography-today
  136. 136 http://www.designobserver.com/observatory/entry.html?entry=5497
  137. 137 http://www.webdesignerwall.com/tutorials/using-html-symbol-entities/
  138. 138 http://www.webdesignerwall.com/tutorials/using-html-symbol-entities/
  139. 139 http://thomasmaier.me/2010/03/yes-add-subpixel-hinting-to-your-photoshop-text-layers/
  140. 140 http://thomasmaier.me/2010/03/yes-add-subpixel-hinting-to-your-photoshop-text-layers/
  141. 141 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-ever-thought-about-using-font-face-for-icons/
  142. 142 http://paulirish.com/2010/font-face-gotchas/
  143. 143 http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
  144. 144 http://nicewebtype.com/notes/2010/05/20/bulletproof-smiley-font-face-syntax/
  145. 145 http://www.typetheory.com/
  146. 146 http://www.typetheory.com/
  147. 147 http://www.ms-studio.com/typecasting.html
  148. 148 http://www.ms-studio.com/typecasting.html
  149. 149 http://www.pressingletters.com/
  150. 150 http://www.pressingletters.com/
  151. 151 http://welovetypography.com/
  152. 152 http://welovetypography.com/
  153. 153 http://www.webfontawards.com/
  154. 154 http://www.webfontawards.com/
  155. 155 http://www.letterpool.com/
  156. 156 http://www.letterpool.com/
  157. 157 http://www.letterpress.dwolske.com/
  158. 158 http://www.letterpress.dwolske.com/
  159. 159 http://blog.fonts.com/2010/10/25/ulc-back-issues-to-be-made-available/
  160. 160 http://blog.fonts.com/2010/10/25/ulc-back-issues-to-be-made-available/
  161. 161 http://typeunion.net/
  162. 162 http://typeunion.net/
  163. 163 http://www.fastcompany.com/1698264/infographic-of-the-day-a-visual-dictionary-for-type-fans
  164. 164 http://images.fastcompany.com/upload/typography_lesson_poster_larger.jpg
  165. 165 http://www.typographicposters.com/
  166. 166 http://www.typographicposters.com/
  167. 167 http://www.designspongeonline.com/2010/10/trend-roundup-typographic-home-decor.html
  168. 168 http://www.designspongeonline.com/2010/10/trend-roundup-typographic-home-decor.html
  169. 169 http://www.typographyserved.com/
  170. 170 http://www.typographyserved.com/
  171. 171 http://www.axismaps.com/typographic.php
  172. 172 http://www.axismaps.com/typographic.php
  173. 173 http://typewar.com/
  174. 174 http://typewar.com/
  175. 175 http://www.paulinenunez.com/typememory/
  176. 176 http://www.paulinenunez.com/typememory/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Wow. An Excellent Article. Covers each and every aspect of Typography.

  2. 2

    Thanks for this. The list of things to read, absorb, learn and implement never seems to end!

  3. 3

    Very excellent resource. I had no clue there was so many resources available in the realm of web typography. This will definitely be a resource I come back to as this is a very important part of web design layout and development.

    Typography is one of those things which does evolve while at the same time remaining true to it’s fundamental principles since the times of the original printing presses. Very interesting to see. Thanks for the article, it will be put to use!

  4. 4

    Wow, this must have taken some time. Thanks…

  5. 5

    I strongly suggest that when coding a website, you start with a CSS boilerplate for typography. It makes it much easier to stay organized, make sure you are covering all elements, and even set up a typographic baseline. This is the boilerplate that I always use:


    It’s easy to tweak and makes a great starting point.

  6. 6

    Thanks a lot, today I feel very lucky. This is what I was looking for and more.
    Thanks again.

  7. 7

    Top notch resources. Nice research, Sven, Vitaly and the rest of the Smashing team.

  8. 8

    So pleased there are annotations rather than just a list thrown at us! :)

    100 is so many to get through, though. I’d love to see a top 10…

    Also.. typewars… not really that great.. there’s only 2 or 3 fonts that look remotely similar.. and then we overloaded their servers

  9. 9

    para empacharse exelente artículo

  10. 10

    Excelente post!!!

  11. 11

    Really great round-up, many thanks!

  12. 12

    Hmm… Is this more quantity over quality?

    100 is a bit much to start with, especially for someone new to typography and is looking to educate themselves. Its even a bit overwhelming—wouldn’t it be more useful to start with the core resources, and then branch out into detailed aspects of type?

    At least break this post up into pages, these top 100 lists are very useful but sifting through this might take some time. This post is good to do a search on if you want to look for something specific.

    • 13

      I was about to say the same. I mean, the main problem of the web today is also it’s biggest asset: the abundance of resources.

      The problem is with the selection. That’s why I choose to read magazines, because you guys sift out the bad stuff. I know there’s plenty of good here, but come on :D

      Anyways, that’s a week of reading, thank you for this article! :)

    • 14

      All resources presented in this post are carefully selected and reviewed. I think it would be right to say that all resources featured in this post are of high quality, Henrik.

  13. 15

    Wouldn’t it be great to know more about the people creating these fonts and not just about the fonts themselves?

    I think the process behind a good font is almost as interesting as the final result.

    What do you guys think?

  14. 16

    I like typography :)

  15. 17

    I usually like your articles about typography – and that might be my reason to nag about this one: not much new here, as way over 50% of the linked resources are well known (at least to me) repeats from previous posts…
    “shake it up and re-publish”

    • 18

      Sorry, but this is just not true. Most of these resources are new or have been recently updated.

  16. 19

    I just happen to have Typography lessons at school, this helped a lot for me, thanks!

  17. 20

    What about pixel/bitmap type? They fill an important role in providing high legibility at times when small sizes are appropriate and there’s nothing about them in all 100 links. How could a whole class of type get overlooked in this roundup?

  18. 21

    This is awesome article.

  19. 22

    great timing, folks. just what i need _right_now_. thank you for a great collection – again.


  20. 23

    Thanks for a great article Smashing Team, you are smashing indeed with this.

    I often find myself with little to none knowledge about the fonts I am using and I think that typography is an endless topic that I will learn till the end of my days…

    So much to read now :)

  21. 24

    Thanks, great article.
    Che dire, un bel punto della situazione attuale (e non).

  22. 25

    the more I come to Smashing, the more I know and the more I find out that I don’t know and the more there’s to learn and the more smashing it get!

    Thanks guys for this excellent article, exactly what I needed to get me to the next level in my web typography.

  23. 26

    You’re amazing! Today I learn about typhography a lot!

  24. 27

    awesome article full of info , thanks!

  25. 28

    This an amazing site with a lot of features. I must say that it really get my attention upon browsing it. Thanks a lot for a great and interesting content. Keep it up. More power.

  26. 29

    Smashing article. Will take 2 weeks to read. Thank you!

  27. 30

    Wow…awesome. So much about typography!

  28. 32

    Thanks you for writing such an incredible article. This one will really help me improve my future text based projects. Keep up the good work.

  29. 33

    I do miss Mark Boulton’s excellent article “Five Simple Steps to better Typography” which can be found here :


  30. 34

    There are several resources here related to kerning. Other than in images of type or bespoke typefaces, is there any way to control kerning on the web?

    Edit: spoke too quickly. Lettering.js listed above appears to be a solution. I’ll have to take it for a spin and see how it purrs.

  31. 35

    James Brocklehurst

    November 17, 2010 8:21 am

    Could I add a resource of my own to the list? It is a cheat sheet for web-safe fonts, i.e. those that come pre-installed on the majority of operating systems with previews of how they render with and without anti-aliasing



  32. 36
  33. 37

    God knows I need to improve my typography skills…thank you for this resource! Now I just need to sit down once in a while and read them!

  34. 38

    A trully great post Ill be sure to bookmark this and come back for more cipro

  35. 39

    Your “Mixing Typefaces” pdf gives me an error message when trying to download. Just wanted to let you know. Awesome list of useful resources!

  36. 40

    Hey, I used the example in Four Ways to Mix Fonts a while ago for my personal site.

    Now i guess its out in the open ; )

  37. 41

    Using “smart quotes” instead of “typewriter quotes” is my biggest pet peeve as a programmer. So when it says that using “typewriter quotes” is “unprofessional”, please consider the profession and who is working with it. Smart quotes are actually non-standards compliant characters. When used in PHP or Javascript they break syntax and create a total nightmare for developers. I’m not saying that smart quotes don’t look nice, I’m just trying to let you know what happens to your lovely curly quotes and why. So, before basing your entire design on smart quotes, rounded corners and curved lines maybe talk to your friendly neighborhood developer first so you can come up with something you can both work with.

  38. 42

    Amazing article :) Bookmarking this for life.

  39. 43

    Woosh… I’m not really fan of the “lists” but I have to admit this one is already bookmarked. Thanks for sharing :)

  40. 44

    Amazing article. Thanks for sharing!

  41. 45

    hi every one i need to ask you about the program that i can design a new type face, so if a one know which is please send me in my contact mail.
    thanx for your helps

  42. 46

    All-most everything you need to know about Type and design Related.
    Thank you for the Info!


↑ Back to top