Illustration and typography don’t always play nice. When they do, however, it can create some beautiful and compelling imagery. Which is which in this scenario, however? Is a beautiful illustration that also features typography an illustration or, well, a piece of typography? Both. Also, ultimately it doesn’t matter. Beauty is beauty, no matter the name. Read on for 35 of the greatest “typographical illustrations” floating around the web right now. We’ll even feature links to each designer so you can see more of their stuff:

by Michele Angelo

by Michele Angelo

by Nicolas Alexander

by Evan Owen Dennis

by Nick Keppol

by Jordan Metcalf

by Alex Beltechi

by Jesse Hora

by Doug Alves

by Theo Aartsma

by Theo Aartsma

by Narani Kannan

by Studio Kxx

by Fiodor Sumkin

by Colorcubic

by Colorcubic

by Magomed Dovjenko

by Irena Zablotska and Eugene Rudyy

by Irena Zablotska and Eugene Rudyy

by Emil Bertell

by Luke Lucas

by Luke Lucas

‘

by Luke Lucas

by Craig Ward

by Craig Ward

by Craig Ward

by Craig Ward

by Craig Ward

Linsey Levendall and Daniel Orme (Bison)

by Chow Martin

by Narani Kannan

by Vladimir Loginov and Maksim Loginov (HMF)

by Vladimir Loginov and Maksim Loginov (HMF)

by Andy Smith

by Alex Trochut

Fonts! There are just so many of them. Where do you even start with narrowing down the thousands and thousands to a more manageable top 100? Luckily, a German magazine has done the legwork for you.

But how did they do that? Rating aesthetics isn’t the same as a baseball stat or something. It’s all in the eye of the beholder. Here is their take. The judges used three sets of objective data and assigned a percentage of importance to each one. FontShop sales accrued %40, Historical value and perceived meaning took up %30 and general aesthetic qualities filled out the remaining %30.

However, this list is comprised of pay fonts only. The biggest of the big. Free fonts or operating system fonts were not considered, nor integral fonts to existing software like Arial.

Below is a graphical preview of the top 33 fonts, followed by a text list of the entire 100. We wish the graphical preview could contain all 100 fonts but, you know, they cost money.

Top 100 Best Fonts Of All Time

Below you will find the full list of along with the designer & the year in which they were designed. Enjoy and don’t forget to actually use some of these.

1. Helvetica [1957 - Max Miedinger]

2. Garamond [1530 - Claude Garamond]

3. Frutiger [1977 - Adrian Frutiger]

4. Bodoni [1790 - Giambattista Bodoni]

5. Futura [1927 - Paul Renner]

6. Times [1931 - Stanley Morison]

7. Akzidenz Grotesk [1966 - G nter Gerhard Lange]

8. Officina [1990 - Erik Spiekermann]

9. Gill Sans [1930 - Eric Gill]

10. Univers [1954 - Adrian Frutiger]

11. Optima [1954 - Hermann Zapf]

12. Franklin Gothic [1903 - Morris Fuller Benton]

13. Bembo [1496 - Francesco Griffo]

14. Interstate [1993 - Tobias Frere-Jones]

15. Thesis [1994 - Lucas de Groot]

16. Rockwell [1934 - Frank H. Pierpont]

17. Walbaum [1800 - Justus Walbaum]

18. Meta [1991 - Erik Spiekermann]

19. Trinit [1982 - Bram De Does]

20. Din [1926 - Ludwig Goller]

21. Matrix [1986 - Zuzana Licko]

22. OCR [1965 - American Type Founders]

23. Avant Garde [1968 - Herb Lubalin]

24. Lucida [1985 - Chris Holmes / Charles Bigelow]

25. Sabon [1964 - Jan Tschichold]

26. Zapfino [1998 - Hermann Zapf]

27. Letter Gothic [1956 - Roger Roberson]

28. Stone [1987 - Summer Stone]

29. Arnhem [1998 - Fred Smeijers]

30. Minion [1990 - Robert Slimbach]

31. Myriad [1992 - Twombly & Slimbach]

32. Rotis [1988 - Olt Aicher]

33. Eurostile [1962 - Aldo Novarese]

34. Scala [1991 - Martin Majoor]

35. Syntax [1968 - Hans Eduard Meier]

36. Joanna [1930 - Eric Gill]

37. Fleishmann [1997 - Erhard Kaiser]

38. Palatino [1950 - Hermann Zapf]

39. Baskerville [1754 - John Baskerville]

40. Fedra [2002 - Peter Bil'ak]

41. Gotham [2000 - Tobias Frere-Jones]

42. Lexicon [1992 - Bram De Does]

43. Hands [1991 - Letterror]

44. Metro [1929 - W. A. Dwiggins]

45. Didot [1799 - Firmin Didot]

46. Formata [1984 - Bernd M llenst dt]

47. Caslon [1725 - William Caslon]

48. Cooper Black [1920 - Oswald B. Cooper]

49. Peignot [1937 - A. M. Cassandre]

50. Bell Gothic [1938 - Chauncey H. Griffith]

51. Antique Olive [1962 - Roger Excoffon]

52. Wilhelm Klngspor Gotisch [1926 - Rudolf Koch]

53. Info [1996 - Erik Spiekermann]

54. Dax [1995 - Hans Reichel]

55. Proforma [1988 - Petr van Blokland]

56. Today Sans [1988 - Volker K ster]

57. Prokyon [2002 - Erhard Kaiser]

58. Trade Gothic [1948 - Jackson Burke]

59. Swift [1987 - Gerald Unger]

60. Copperplate Gothic [1901 - Frederic W. Goudy]

61. Blur [1992 - Neville Brody]

62. Base [1995 - Zuzana Licko]

63. Bell Centennial [1978 - Matthew Carter]

64. News Gothic [1908 - Morris Fuller Benton]

65. Avenir [1988 - Adrian Frutiger]

66. Bernhard Modern [1937 - Lucian Bernhard]

67. Amplitude [2003 - Christian Schwartz]

68. Trixie [1991 - Erik van Blokland]

69. Quadraat [1992 - Fred Smeijers]

70. Neutraface [2002 - Christian Schwartz]

71. Nobel [1929 - Sjoerd de Roos]

72. Industria [1990 - Neville Brody]

73. Bickham Script [1997 - Richard Lipton]

74. Bank Gothic [1930 - Morris Fuller Benton]

75. Corporate ASE [1989 - Kurt Weidemann]

76. Fago [2000 - Ole Schafer]

77. Trajan [1989 - Carol Twombly]

78. Kabel [1927 - Rudolf Koch]

79. House Gothic 23 [1995 - Tal Leming]

80. Kosmik [1993 - Letterror]

81. Caecilia [1990 - Peter Matthias Noordzij]

82. Mrs Eaves [1996 - Zuzana Licko]

83. Corpid [1997 - Lucas de Groot]

84. Miller [1997 - Matthew Carter]

85. Souvenir [1914 - Morris Fuller Benton]

86. Instant Types [1992 - Just van Rossum]

87. Clarendon [1845 - Benjamin Fox]

88. Triplex [1989 - Zuzana Licko]

89. Benguiat [1989 - Ed Benguiat]

90. Zapf Renaissance [1984 - Hermann Zapf]

91. Filosofia [1996 - Zuzana Licko]

92. Chalet [1996 - House Industries]

93. Quay Sans [1990 - David Quay]

94. C zanne [1995 - Michael Want, James Grieshaber]

95. Reporter [1938 - Carlos Winkow]

96. Legacy [1992 - Ronald Arnholm]

97. Agenda [1993 - Greg Thompson]

98. Bello [2004 - Underware]

99. Dalliance [2000 - Frank Heine]

100. Mistral [1953 - Roger Excoffon]

Typography is the best, isn’t it? But it’s a field that is always growing, always changing. In short, we need apps! Apps! Apps! Luckily, the web is filled with tons of helpful typography and font apps that are just a hop, skip and a jump away. Here are 21 of the absolute greatest:

Typechart -T ypechart allows you to flip through, preview and compare web typography while retrieving the CSS feed. Not bad. It also lets you browse through just about any style and download the CSS of the style you choose. Truly a handy little tool.

CSS Type Set. – This fantastic set of tools lets you type in your desired text, and then play about with the hundreds of possible CSS permutations. When you find the one you like, simply paste the CSS into your stylesheet. Simple and effective.

Typetester. – Typetester is an online app for comparing different fonts for the screen. Test three fonts at once and pick which one you like the best. Thus the name. It’s not a fancy app but it does make the life of a web designer a bit easier. That’s the goal isn’t it?

STC fontBROWSER. – STC fontBROWSER is an online tool for browsing various fonts and then seeing how your text looks with each selection. Pretty handy for those times when you just can’t seem to make up your mind.

Font Tester. – This is an online font comparison tool. It’s free and rather usef ul. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. Not bad. Not bad.

CSStxt – CSSTXT is an online generator for creating CSS clocks of text. Choose from letter-spacing, word-spacing, font-size, line-height, border, font-size, font-family, align, and even color. It truly is the Godfather of CSS text generators.

WhatTheFont. – This is beyond cool. Ever wonder what the font is in your favorite publication, album cover etc? Just scan the image and plug it in to this website and let them do the foot work. Amazing!

Font Picker. – This tool simply analyzes your computer and yells you what fonts you have, then narrows down the field to help you pick out the right one for any given task.

Wordle – Beautiful Word Clouds. – Wordle is an app for generating “word clouds” from the text that you provide. These clouds give greatere importance to words that appear more often. You can tweak the results by size, color or any other number of ways. At first it may seem like a toy but there is some other stuff going on here.

Typotheque Hi-Res FontTester. – This tests the fonts available on the Typotheque website in a variety of useful and fun ways. Again, it’s limited to fonts available for purchase on their website so it’s not as useful as it could be but it’s certainly worth a look, especially if you do a lot of your font shopping via Typotheque anyways.

Linotype Font Finder. – This useul app asks you a series of questions and then slowly, but surely, ascertains the right font for you to use. It’s sort of the therapist of the font-finding world. Very useful, once you get rid of your inhibitions and give it a try.

Font Burner. – Font burner, simply put, makes it easy for you to increase the number of fonts available to you in your website. Sometimes this can be tricky, with several of the big name blogging programs not having that great of a font lineup. Font Burner gets you back to the starting line by adding a simple block of code to your site that bypasses that limiting architecture. Amazingly useful and a must have.

sIFR. – sIFR is similar to Font Burner. It is an app to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. Scalable Inman Flash Replacement or sIFRfor short. How cute!

Identifont . – Similar to the Typotheque app above, this program asks you a series of questions and then attempts to find the font for you. It also allows you to type any font’s name into an engine that will return sample text.

TypeNavigator. – This is a visual font tool that is fully interactive. It lets you find that perfect font that’s hiding out in your brain, through a series of questions, illustrations and examples. It’s an absolutely stellar tool worth at least one visit.

PXtoEM Conversion. – This is much more than just a simple PX  to EM converter. Click the convert button at the top of the page and select your body font size, and then you have the conversion based on that size. Then click the CSS button at the top of the page you will be presented with the CSS code based on your conversion. There’s also the option for a totally custom conversion. Simply put, this is a great tool.

Em Calculator. – Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative EM units. EM units, as everyone knows, are based on text size. No, I did not Google that. Ok, I did. Sigh.

Baseline Rhythm Calculator. – Type in your base Font Size (in px) and then type in your Base Line Height (Rhythm, in px.) The text on the page will then automatically change like magic according to your settings. It will also generate the CSS code for you.

Fontifier. – Fontifier turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica or Arial Sans. Of course, this does not work if your handwriting is illegible. Better work on that, Dr. House.

FontEditor BitfontMaker. – BitfontMaker is an online app for creating your own fonts. This is a very easy and forgiving program. Perfect for “newbs” to the world of font making.Yes, that mean’s you.

Typotheque – Typotheque isn’t totally useful, but it sure is cool. With your mouse click the letters on the visual keyboard and you have a man on screen who dances that particular letter. It simply must be seen to be believed.

Well, that’s it! Get to clicking and soon your typography and font skills will soar to all new heights.

Planning on bringing something into the real world by sending it through a printer? You had better read this. The University of Wisconsin-Green Bay has switched the default font for its emails from Arial to Century Gothic. The institution reported that the new font requires about 30% less ink, which costs up to $10,000 per gallon.  That’s a lot of late night pizzas.

Though the organization discourages printing emails, the university would save money when students deem it necessary. Ink accounts for about 60% of the cost of the printed page, a spokesperson said.

The university went with Century Gothic even though it’s not the only font proven to save on printing and ink costs. They claim Century Gothic is more efficient, however.

Here at WebRulon, we constantly scour the net to give you the best links “money” can buy. This time around? Typography. Here are a few helpful links that have popped up over the past week. Enjoy and, as always, thank us later.

25 creative use of typography in packaging design – Some of these are really cool, and oddly, most feature ads for liquor. Who knew the powers that be in liquordom were so creative. Shouldn’t they be too, um, drunk for that?

Best fonts of 2009 – Typography.com lays out their favorite fonts of 2009. This is especially useful if you were in a coma all year and missed them all.  But seriously, 2009 had some good stuff. Let’s own it in 2010.

45 creative examples of typography in the wild – This wild, wild list chronicles the best fonts that have appeared in the real world, meaning, they actually exist. Wait, but more than the way fonts already exist. Like a dude wearing a font suit. Seriously. Sigh. You’ll just have to read it and see.

That’s it for now, font freaks. Keep striving!

Looking for some inspritation? Check out these great typography magazines.

TYPO Magazine
URL: http://www.magtypo.cz.
Description: “TYPO is a unique magazine. The name TYPO gives away the main focus of the magazine – typography, which is discussed from different points of view and with connection to other fields such as architecture, photography, social science, and aesthetics. It introduces, in a very lively and readable manner, all outstanding individuals of typography and their work.”…
Purchase: Buy a Subscription to Typo Mag.

Baseline Magazine
URL: http://www.baselinemagazine.com/.
Description: “In this issue, we hope to bring back some of the wonder that comes with design exploration. Our travels take us to South Africa, Sarajevo, São Paulo, Iran, and Havana.
In sharing these stories with you, we hope that you’ll gain an appreciation for the wide variety of contributions made to our design community each and every day. We also encourage you to think about preserving the diversity of our design culture and even integrating these kinds of cultural nuances back into your own practice.”.
Purchase: Buy the latest Issue of Baseline (£13 or $26).

Caderno de Tipografia
URL: http://tipografos.net/cadernos/.
Description: “The “Studies of Typography” (Cadernos de Tipografia) focuses on issues related to Typography, typeface design, graphic design, the analysis of social and cultural phenomena related to editing, publishing and reproduction of texts and images.”.
Download: Latest Issue of Cadernos de Tipografia de 2008.

Better Web Typography
URL: http://www.netmag.co.uk/.
Description: “The world of print design still hasn’t made a substantial impression on the web. Sure, a few things are nicked now and again, but most web designers remain blissfully unaware of what their QuarkXPress- or InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when web designers should turn to print specialists for their know-how, and one of these occasions is the use of type”…
Download: Download Better Web Typography.

Four Minutes to Midnight
URL: http://lokidesign.net.
Description: “The Current issue of Four Minutes to Midnight, runs with the theme“conflict and silence” , it features the work of over 25 contributors, FMTM 9 is filled with 112 pages of radical textual & visual stimulation. Without a doubt, our sexiest issue yet!”
Download: Latest Issue of Four Minutes to Midnight

The Font Magazine
URL: http://www.fontshop.com/features/fontmag/.
Description: “In this issue, we hope to bring back some of the wonder that comes with design exploration. Our travels take us to South Africa, Sarajevo, São Paulo, Iran, and Havana.
In sharing these stories with you, we hope that you’ll gain an appreciation for the wide variety of contributions made to our design community each and every day. We also encourage you to think about preserving the diversity of our design culture and even integrating these kinds of cultural nuances back into your own practice.”.
Download: Latest Issue of The Font Magazine .