15 excellent examples of Web typography

I have spent the last month searching, stumbling, noting, bookmarking and analysing in a quest to find 15 Excellent examples of Web Typography. I’ve chosen them because they make excellent use of type. Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable.

In a few days, I will be taking an in-depth look at all these sites, delving into their grids, sifting through their CSS and dissecting their HTML, to discover what makes them tick — and what makes them excellent examples of typography for the Web.

Prepare yourself a drink, sip, sit back, scroll, click and — above all else — enjoy.

01: A List Apart for people who make websites

sd-alistapart.jpg

02: Shaun Inmanprofessional designer and developer

sd-shauninman.jpg

03: FontShopas its name suggests

sd-fontshop.jpg

04: Jesús Rodríguez Velasco blog of UC Berkeley professor

sd-rodriguez.jpg

05: BearSkinRug Shop professional illustrator, Kevin Cornell

sd-bearskinrug.jpg

06: Design View Andy Rutledge, design strategist

sd-andy-rutledge.jpg

07: Rikcat IndustriesRik Catlow, design director

sd-rikcat-industries.jpg

08: Quipsologiesnews and creative morsels

sd-quipsologies.jpg

09: Design Snipsweb design showcase

sd-design-snips.jpg

10: Red Interactive Agency web marketing and development

sd-red-interactive-agency.jpg

11: The Big Noob developed by and for…noobs

sd-the-big-noob.jpg

12: Design Can Change climate change

sd-climate.jpg

13: Process Type Foundry they make type

sd-process-type-foundry.jpg

14: Finch interactive and graphic design agency

sd-finch.jpg

15: SR28 Simon Reynolds, web designer and illustrator

sd-sr-28.jpg

Don’t forget to check back here for the second part, “15 Excellent Examples of Web Typography — a closer look.” It’s going to be dirty work, so your overalls, and be prepared to get your hands dirty, as we take these sites to pieces, look at grids, layout, and some very neat CSS tricks to improve your web typography.

What do you think of these examples? Are there others that you feel deserve a mention?

To ensure you don’t miss out on Part II, join the other +2000 TypeNuts and subscribe to I Love Typography today.

Read the second part, 15 Excellent Examples of Web Typography — Under the Bonnet.

ILT Investigates: type torture

Warning: readers may find some of the images in this article disturbing.

It was 2am when the call came in over the radio. Italic rain lashed down against the wind shield, liquefying the neon sign’s reflection. Clarendon looks good in Neon, but perhaps…

The radio interrupted my thoughts, bearing a voice that had woven itself through distant thunder…

“We’ve got a BK over on Lucida Avenue, opposite the Emigre Foundry. This one’s ugly, real ugly….”

By the time I arrived at the crime scene, the rain had subsided. I’d been on the force 25 years, but nothing had quite prepared me for this:

kerning

A week later, after an anonymous tip off, we brought in a guy for questioning. David Terrence Paine had a string of previous convictions. He was one sick puppy; got his kicks out of this kind of thing.

Yes, “BK” or Bad Kerning can be found everywhere. But before we get into bad kerning, let’s remind ourselves of what kerning is.

Sometimes there appears to be some confusion over what kerning actually is; it’s sometimes confused with tracking. So this is what kerning is:

av-kerning1.gifKerning refers to the spacing between pairs of characters or glyphs.

So, for example “A v”: the upper-case “A” is bottom-heavy, while the lower-case “v” is top-heavy; kerning can be used to reduce the space between this letter combination to make it look better and to improve readability.

Kerning should not be confused with tracking which is about the letter-spacing between a series of characters in a line, paragraph, or block of text.

In tech-speak, Kerning is “pair-wise adjustment of horizontal glyph metrics.”

For those of you interested in the etymology of the word “kern”, there’s an interesting discussion over at Typophile on the subject — it starts out as a discussion about parallels between kerning and life; but if you scroll down, you’ll learn something of the origins of “kerning”.

In the screen shot below you can see some of the kerning pairs on the right (this screen shot is taken from FontLab Pro, one of the applications you can use to design type):

FontLab Pro Kerning Pairs

Note that for the “AY” pair — highlighted in blue — the value is much lower (-64) than, say, for the “Ac” pair; because basically the “A” is bottom-heavy, while the “Y” is top-heavy, so they need to be brought closer together.

Well, we could talk all week about kerning, but we’ll save it for another day (“the excitement is killing me”, I hear you say). In fact you never have to look far for examples of poor letter spacing. This is from today’s National Newspaper:

poor kerning

Can you spot it?

In a future article we will revisit this topic, and look at the difference between metric and optical kerning; and, why it’s sometimes necessary to get our hands dirty and manually adjust kerning. We’ll also look at kerning for the Web (is it possible?), and alternatives to kerning pairs.

In the meantime, can you think of letter combinations that might require extra space (a positive kerning value)?

And finally, a TypeNuts cartoon, only I’ve omitted the captions. Perhaps you can come up with something better than mine:

typenuts typographical cartoon

Ensure you don’t miss out on the next article by subscribing to I Love Typography.

fresh Faces, fine Fonts: Montag

A New Rounded Sans Serif in Town

Today we’re going to take a brief look at a new face on the block, namely Montag. I’ve just purchased this one, and I love it. In my excitement, I must be careful not to overuse it.

Montag is one of the latest typefaces from Jeremy Dooley of the Insigne Type Foundry. This is a very modern, fresh-looking, rounded san-serif, that has even been described as “gloopy”. It’s available in six flavours, and is already in MyFonts Bestsellers list; an impressive achievement for a newcomer.

Montag is an extended, rounded sans-serif. In many ways it can be seen as a more conservative, extended version of Chennai. As with Chennai, it includes simplified versions of many characters for titling or when a more futuristic appearance is called for. Choose Montag whenever you need a distinctive sans serif.–Jeremy Dooley

montag-sample.gif

Take a closer look at Montag Regular with the new iLT Font Carousel. Hop on and enjoy the ride:


I’ve heard a few people refer to this typeface as fun, but I don’t see it that way—perhaps that’s the usual cliché for rounded sans-serif faces. I think it looks clean and professional, and would even work well for identity. The first font that came to mind when I saw Montag, was VAGRounded Light, one of the Volkswagen fonts. I’m not suggesting that they are so similar in construction (though they have those rounded terminals in common), but they do “speak with the same accent”, they “smell” the same.

If you wish to become more intimate with the fonts you use, here’s a suggestion; well, something that I do when I buy a new font: print out samples, or even individual letters at large point sizes, then stick them on the wall—anywhere will do; that way you can contemplate them in the bathroom, muse over them while working, and you’ll come to have a greater appreciation for the font—it’s really about becoming friends with the font, allowing the font to “gain our trust”.

As a side effect to the above experiment, you will also find that you can easily identify this font when you see it in use elsewhere. And, although this is unlikely to make you any friends (“Brenda, look! That’s Montag!”), it will teach you something about the context in which your new font should be used.

Jeremy has kindly provided these sample pages for you to get a taste of Montag:

Montag promo page (pdf)

Montag promo book (pdf)

So, what do you think of Montag? Would you use it? If so, where and when?

Coming within the next 48 hours:
iLT Investigates: Type Torture and TypeNuts (perhaps the world’s only Typography Cartoon Strip, perhaps, maybe—I’ll check…).

To stay up-to-date, why not subscribe to I Love Typography with a mere click of your mouse.

veer-ilt-logo.png

Decline and fall of the ligature

If the ligature could speak, it might well ask, why does nobody love me? Well, let’s put the record straight, but before we do — just in case you’re wondering, what the hell’s a ligature, let’s take a brief look.

ligature-doctor1.jpg

First, the typographic ligature should not be confused with the ligature of medicine; in medicine, a ligature is “a filament or thread used to tie something, like a blood vessel to prevent it from bleeding.” Interestingly. ligatures are also used in the treatment of Haemorrhoids. Confusing the two could result in serious injury or, at the very least mild discomfort. Who would have thought a health warning was necessary in an article on typography. OK, so now that that’s clear, let’s get a little more intimate with the ligature:

ligatures.gif

These are the most common ligatures, ff, fl, fi, ffi and ffl. A ligature is not simply two letters arbitrarily glued together. The two letters are crafted into a single letter (technically speaking a single glyph). Certain letter combinations are simply crying out for ligatures.

f plus i ligature in Adobe CaslonLet’s take, for example the combination of “f + i”: the letter “f” in both its lower-case and upper-case forms is top heavy; look at that overhang! In the example to your left, notice how the overhang of the “f” overlaps the “i” dot (tittle). Combining the “f” and “i” into a single glyph makes the “f” look that much more stable. It’s not going to fall over, because it’s using the “i” as a crutch. The overhang of the “f” (the terminal) also doubles as the dot of the “i”. You could say that ligatures are natural letter-friends.

fi-garamond-ligature.jpgWith the invention of Metal Movable Type in the 15th century, ligatures flourished and were a great time saver when setting type. For example, instead of having to set an “f” and an “i”, a single ligature block could be used instead. That may not seem like a great time saver, but when you’re setting an entire book 0f 40,000 words in movable type, then it could certainly make a difference.

For those of you interested in the origin (etymology) of the word “ligature”, it comes from the Latin ligatus, which basically means to tie or bind. And when you look at the above examples, you can see that ligatures are letters that have been bound or tied together (how happy they are about that, I have no idea).

So, the next time you’re reading, be sure to look out for ligatures.

The Decline of the Ligature

So whatever happened to the ligature? Well, to cut a long story short, the modern-era of printing, the typewriter and Desk Top Publishing (DTP) were all nails in the ligature’s coffin. Richard Wendorf, in a 2005 lecture The Secret Life of Type, even suggests that the death of the ligature was brought about by a desire to reduce the number of type pieces, and was also influenced by the popular publisher John Bell (1745-1831), who abandoned ligatures; and is also said to be responsible for the death of the long S.

Interesting type fact!
The most common ligature is the “&” (ampersand). This was originally a combination of the letters “e” and “t”, et, the Latin for “and”. However, the ampersand is generally no longer considered to be a ligature — but that’s how it started out.

The examples we looked at above are some of the most common ligatures; however, it’s possible to make a ligature from just about any letter combination. In fact there are entire ligature typefaces out there. Here’s an example of Mrs Eaves Just Ligatures, designed by Zuzana Licko of the Emigre Foundry:

just-ligatures-mrs-eaves.gif

Well, I’m sure we could write a whole book on ligatures alone; however, something tells me that it might not be a best-seller. In future articles we might take a closer look at the ligature, its history, and how and when they should be employed; and, even their use on the Web.

And, if you think that no-one loves the ligature, then take any book or magazine out of your bookcase, open it up, and look for “fi”! Now what do you think of ligatures?

If you missed earlier articles in the Type Terminology series, you can catch up here:
Who Shot the Serif
The Return of the Serif

Coming soon:
More TypeNuts and Typoholism: Facing your addiction.

Quien mató al serif?

Una de las razones por las cuales empezé ‘Amo a la Tipografía’ fue porque sentí que simplemente no se ha dicho suficiente sobre el tema. Por segundo, y más significativo, siempre hallaba dificil localizar rapidamente recursos tipográficos. El proposito de este blog es ser uno de esos ‘recursos’, una tienda todo en uno, sobre todo de tipografía, de la terminología a nuevos tipos de letras , de ejemplos inspiracionales tipos de letras para escojer el mejor fuente para un trabajo, ya sea en o fuera de línea.

Bodoni,  solo hay  lugar  para un Serif en este pueblo.

Entonces para no quitarles el tiempo, hechemosle un vistazo a la clasificación de la terminología de tipos de letras. Ahora, antes de que mis y aliteraciones te manden corriendo, dejenme decirles que no hay nada que temer. Pero para que debería de importarles la terminología de los tipos de letras? Acaso en realidad importa si no reconozco mis ascendentes y serifs de mis descendentes y espinas.

Bueno, lo que descubrirás, es que aprender sólo un poco sobre terminología te ayudará a tener una apreciación más amplia sobre los tipos de letras; también te ayudará a identificar diferentes tipos de letras y fuentes , y eso te ayudará a hacer mejores y más informadas elecciones sobre las fuentes que usas. Oh, y por último, aprenderás lo que los fish scales y serifs tienen en común.

Hoy nos intimidaremos con el serif (aprenderás mas sobre sus amigos en futuras posteadas sobre Términos de Tipografía):

Términos Tipográficos

Uno de los términos de tipo de letras con el que la mayoría estan familiarizados es el “Serif” y se distingue facilmente de los Sheriffs-Jhon Wayne ha matado unos cuantos sheriffs; y desde el fondo de mis conocimientos, él nunca ha matado un serif. Los serifs son casi siempre pequeños, pero son rudos.

Antes de escribir esto, le mande unas preguntas sobre la terminologia de los tipos de letras a amigos que saben un poco sobre el tema. La mayor cantidad de respuestas la tuvo la pregunta “¿Que es un Serif?” con algo como “son los pedacitos enrollados al final de una letra”. Y aunque no leerías algo asi en un libro acerca de tipografía, las respuestas son casi correctas ( excepto por que los serifs no siempre estan enrollados).

¿Entonces por qué la palabra “serif “? Estabién, comunmente se dice que el origen del serif puede ser de la antigua Roma. Antes de que una inscripción sea tallada en una piedra, las letras se pintaban primero. Cualquiera que haya tratado de pintar letras, sabrá que uno es un poco más grande al final de la brochada. Entonces los talladores de piedra tallarían las letras tranquilamente con los pedazos enrollados en los finales de las pinceladas – de esto nació el serif.

Como sea, parece que nadie sabe sobre la etimología de la palabra ‘serif’; algunos dicen que viene de la palabra danesa schreef, que significa ‘escribío’ o ‘escrito’, mientras que algunos recursos revelaban que “sanserif” actualmente quiere decir sin serif ( cosa que nos lleva a la pregunta , de donde se originó sanserif?).

Interesantemente, el equivalente significado en japones de uruco que significa escamas de pescado, y en chino, el termino trasladado literalmente al ingles, sale como “forma con/hecho con pies”. En chino es para mí el más descriptivo. Entonces si uno te dice que le “des pies”, sabras que te estan pidiendo un fuente de serif. Pero si alguien grita, “no tiene pies!”, entonces creo que buscan Helvetica.

El typoWiki define serif asi:

Un serif es una dobladura al final de una letra.

y Wikipedia asi:

detalles no-estructurados al final de algunas de las brochadas que hacen a las letras y simbolos.

Hay numerosas especies de serif. Los dos tipos más importantes son Adnate y Abrupt (estos dos se subdividen en muchos grupos que veremos en el futuro). El serif Adnate es mas orgánico. Noten como los serifs unen las astas con una curva; en cambio el Abrupt serif-como su nombre lo dice-es cuadrado y más rígido; el Slab Serif es un buen ejemplo de un Abrupt Serif. No es rudo; es sólo cuadrado.

times-std.png

A slab serif is an example of an abrupt serif. This font is called Xenia OT

En futuros articulos le hecharemos un vistazo cercano a lo que es:

Serifs, de o fuera de moda;

Serif o Sanserif-cuál usaría?

Buenos tipos de Serif para la web y la impreción.

Bueno eso es todo por hoy en serifs. Actualmente, hay mucho mas que decir, pero le dare un descanso a tu barra de desplazamiento. En futuras posteadas veremos más Terminología Tipografíca. Eventualmente, estas series seran editadas y publicadas como un PDF descargable “e-type-book” asique está atento a la segunda Parte subscribiendote.

Aprendiste algo?
Traducción por: Patrick Mondolis

(read this article in English)

Typenuts, The Funny Side of Typography

First, a big thank you to all of you loyal iLT readers and subscribers. Perhaps I should change this site’s name to welovetypography.com, or Ilovetypographyandyoudotoo.com. Anyway….

Well, many have commented that they enjoy a little humour with their typography, so let me introduce you to TypeNuts, the new iLT comic strip. This is my first attempt at a comic strip; well, it’s not really a “strip” as such; anyway, I hope you enjoy them.

So without further ado, TypeNuts Part One:

typenuts21.jpg

Stay tuned for the next part in the Type Terminology Series. If you haven’t read parts one and two yet, then:

Here’s Part 1: Who Shot the Serif;
and here’s Part 2: The Return of the Serif.

And just to whet your appetite, here’s what’s to come next year:

ilt-book.jpg

Until next time, Happy “typing”.

johno

The Return of the Serif

Part Two
In part one, Who Shot the Serif?, we learned among other things that serifs — like milkshakes — come in many flavours: The main two flavours are Adnate and Abrupt; with Adnate serifs generally being more organic; Abrupt Serifs on the other hand are usually squarer, bigger, chunkier (the Arnold Schwarzeneggers of the font world).

serif-family-tree1.gif

Today we’re going to take a brief look at the Serif family tree. And if we’re going to use the family tree “metaphor”, then lets stretch it a little. So without further ado, let me introduce to you (drum-roll…) Mr Abrupt Serif and his wife, Mrs Adnate Serif.

In an exclusive interview (they turned down a lucrative offer from FontShop), I was able to gain some insights into the private lives of the Serif family.

The following is an excerpt from the interview (speaking from their home in Serifsville, Georgia).

ilT:

Could you tell the iLT readers a little about the Serif family heritage?

Mr AS:

On my side of the family I’m most proud of my son Slab Serif. (My wife and others often call him Egyptian). Slab Serif’s children include Clarendon, a fine young lady. Most would agree that she and her siblings—Xenia, Geometric Slab Serif, and Rosewood—are very artistic, very decorative. Rosewood has starred in numerous Westerns; he’s a bold, strong character, who was once very popular in advertising. On my wife’s side…

geometric-slabserif-712.png

rosewood-regular.png

Mrs AS [interrupts]:

…yes, my side of the family is certainly more refined, perhaps I could go so far as to say, more natural, more organic. For example, my Baskerville (a fine young man, a real perfectionist from the Transitional Serif family) when born (I think it was about 1754), was considered anorexic, with his razor-thin serifs; however, he’s stood the test of time, and his contrast makes him easily legible.

baskerville-regular.png

baskerville-italic.png

ILT:

What about Old Style? Where does she fit in?

Mrs AS:

Well, some call her Old Style; I prefer to call her Humanist. Her great-great grandfather was the 16th Century typographer Claude Garamond. Humanist owes a lot to the calligraphic style of writing. Here’s a picture of Sabon, one of Humanist’s children. She looks as though she’s been designed with a wide-nib ink pen, doesn’t she?

sabon.png

itc-garamond.png

A big thank you to Mr and Mrs Serif. They have a busy schedule, what with books magazines, poster campaigns, and their recent popularity on the Web. We didn’t really look at Modern Serifs (e.g. Bodoni and Didona) and Latin Serifs (e.g. Quant Antiqua). Can you think of more examples?

didona.png

quant-antiqua-a-latin-serif.png

A full transcript of the interview will be available in the “Who Shot the Serif?” e-book, an edited and expanded compilation of all the Type Terminology articles.

To ensure you don’t miss out on the next in this series, subscribe to I Love Typography today.

Coming up

Typoholism: The Disease, The symptoms;
The Typographic Dating Game; and much, much more…

Have you enjoyed our examination of the serif?

veer-ilt-logo.png

Typography Kills!

Shock, surprise, awe. Just some of the emotions I’ve experienced since launching I Love Typography. I never imagined that there would be such a positive response to a blog about typography.

Thousands of visitor from all around the globe, numerous comments and several hundred emails expressing thanks, or requesting further information and requests for interviews; and, even emails asking my opinion on the choice of a particular font for a design project. So to all of you readers and subscribers, I would like to say (in 76 point, Template Gothic Regular):

thank-you-template-gothic.png

iLT even made it into Smashing Magazine’s 45 Excellent blog designs, which was a pleasant surprise. However, praise for the success of this blog must go to you, yes YOU the reader. Your comments really add value to this blog, listing additional resources, opinions and even the results of your own research. In doing so, you are not only contributors but, in effect, co-authors of iLT.

Killer Typography

If you’ve read Who Shot the Serif?, you would have learned that type can be tough, but who would have thought that typography kills:

killer-typography.gif

Interestingly, because this story is syndicated, I found the same typo (or should that be “topo”?) repeated on at least eight other news web sites. The above one is taken from United Press International.

Upcoming…

I’m researching the next article in the series of Type Terminology. I’ve decided to post one main article each week, with some smaller snippets of typography news, views and yes, even typographic humour (yes, that really isn’t an oxymoron) in between. I’ve also composed a typography crossword. The quickest correct entry will win a new copy of David Carson’s most recent book, Trek — shipped straight to your door, wherever you are (unless you’re reading this from the Mir Space Station, in which case delivery might be a little tricky).

Once again, thank you to everyone who stopped by to read, and another big thank you to everyone who has commented and subscribed — you’ve inspired me.

Apologies to those who have sent emails that I haven’t yet responded to. I’m working on it. I will do my very best to answer all the emails you send, but sometimes my day job (this blog makes no money) means that I can’t always respond to mails as promptly as I’d like to.

In the meantime, I should like to remind everyone to get involved in the Type You Like project. Simply send in images of…well, type you like. There really aren’t any rules — perhaps you’ve fallen in love with the font used on your shampoo bottle, or there’s a street sign that caught your eye…pretty much anything. You can upload your image quickly and painlessly on the Type You Like submissions page, or you can just as simply email it to m@ilovetypography.com.

All entries will be included on a rather large iLT poster, and they’ll also be featured right here on iLT. Thanks to the almost 100 people who have already submitted their images and photos. And last but not least, a big thank you to Lauren over at Creative Curio for her comments, suggestions and support. You’re a star.

To make sure you don’t miss out, you can subscribe to iLT.

Until the next time, Happy “Typing”.

Johno
iLT

Who shot the serif?

One of the reasons for starting this site was that I felt there just wasn’t enough being said about the topic. Secondly, and more significantly, I always found it difficult to quickly locate typographic resources. The long-term aim of this blog is to be such a resource, a one-stop-shop for everything about typography, from terminology to new typefaces, from inspirational examples of type to choosing the best typeface for the job, whether that be on- or off-line.

john_wayne.jpg

So without further ado, let’s take a look at type terminology. Now, before my alliteration sends you running, let me say that there is nothing to fear. But why should you be interested in the terminology of type? Does it really matter if I don’t know my ascenders and serifs from my descenders and diacritics?

Well, what you will discover, is that learning just a little about the terminology will help you to have a greater appreciation for type; it will also help you to identify different typefaces and fonts — and that in turn will help you make better, more informed choices about the fonts you use. Oh, and lastly, you’ll learn what fish scales and serifs have in common.

Today we’re going to get intimate with the serif (you’ll learn more about her friends in future Typography Terms posts):

serifsandsherifs1.gif

One of the terms of type that most are familiar with is “Serif” and is easily distinguishable from Sheriff — John Wayne has shot and killed several sheriffs; to the best of my knowledge, he has never out-gunned a serif. Serifs are often small, but they’re tough.

Before writing this, I sent several questions on type terminology to friends who know little about the topic. Most answered “What’s a Serif?” with something like, “it’s the curly bits at the ends of letters”. And although you are unlikely to read that in a typography text book, that’s just about right (though they’re not always curly, of course).

So why the word “serif”? Well, it’s commonly held that the origin of the humble serif can be traced back to ancient Rome. Before an Inscription was carved into stone the letters were first painted on. Anyone who has tried painting letters will know that one is left with slightly wider sections at the ends of the brush-strokes. The stone carvers would then faithfully carve out the letters including the flares at the end of the strokes — thus was born the serif.

However, it looks as though no-one knows much about the etymology of the word “serif”; some say that it comes from the Dutch schreef, meaning “wrote”, while other sources say the term “sanserif” actually pre-dates serif, so that sanserif on its own simply meant without serif (though that begs the question, where did the word sanserif originate?).

Interestingly the equivalent term in Japanese, uruko, means fish scales, and in Chinese the term, translated literally into English, comes out as “forms with/made with legs”. The Chinese one is perhaps the most descriptive. So if someone tells you to “give it legs”, you’ll know that they are requesting a serif font. And if someone shouts “he has no legs!”, then I guess they’re looking at Helvetica.

The TypoWiki defines a serif thus:
A serif is a flare at the end of a letter terminal.

And Wikipedia as:
non-structural details on the ends of some of the strokes that make up letters and symbols.

There are numerous kinds of serif. The two main types are Adnate and Abrupt (these are further subdivided into many more groups which we’ll look at in future). The Adnate serif is more organic. Notice how the serifs join the the stems via a curve; the Abrupt Serif — as its name suggests — is squarer and more rigid, and doesn’t flow into the base letterform; the slab serif is a good example of an abrupt serif. It’s not rude; it’s just square.

times-std.png

A slab serif is an example of an abrupt serif. This font is called Xenia OT

In future articles we’ll be taking a closer look at these related topics:
Serifs, in and out of fashion;
Serif or Sans serif — which should I use?
Great serif typefaces for Web and print.

Well, that’s all for today on serifs. Actually, there’s a lot more that can be said, but I’ll give your scroll-bar a rest. In future posts we’ll be taking a look at more typography terminology. Eventually, I hope to publish this series as a free PDF, so stay tuned for Part II by subscribing.

Have you learned something?

Part 2: The Return of the Serif.

veer-ilt-logo.png

Identify That Font

Ever seen a typeface (font) you like but couldn’t identify it? I once knew an Art Director who was able to identify just about any typeface I showed him. However, in recent years, even he responds with, I don’t have a clue.

So where to turn? Well, rather than publishing my Art Director friend’s email address here, I’ll introduce a few resources to get you started. Although none of the following resources is infallible, they will definitely give you a head start.

What The Font?!

MyFonts’ What The Font is perhaps the first place to turn to. As with most of the sites I list, here you can search by foundry, designer or name; however, that’s rarely very useful. If you know the designer or foundry, then it’s usually very easy to quickly identify the font. Where What The Font is particularly useful is that you can upload samples of your type, which it then attempts to identify within a matter of seconds. I had mixed results.

Step I: upload your sample. If the sample image has a lot of background noise or is low contrast, then spend a minute in PhotoShop, to lighten or remove the background and increase the contrast.

aaa.gif

Step II: ensure that What The Font has correctly identified the glyphs, then hit “search”:

picture-6.gif

Initially I uploaded this image, a thumbnail of the header image for this blog:

identify Georgia font

and What The Font suggested, among others, Magna T Light and Freight Text Book which, to be fair, are pretty similar to Georgia. However, when I uploaded a slightly larger version of the same image, it was identified correctly. So upload the largest sample you have (maximum image size is approx 360px wide).

If your sample isn’t identified, then you can submit it to the What The Font Forum, a place inhabited by type-nuts, who will often go out of their way to identify your typeface. This forum has a very high success rate!

Typophile

A community of … typophiles that has numerous other resources, blogs, typography-related news and even a typography Wiki. Though Typophile does not have an automated type identifier, it has a great forum of dedicated and friendly type-geeks.

Typophile

FontShop

Although, as its name suggests, you can shop for fonts, the content recently has expanded to include a good blog, a free magazine, and really up-to-the-minute typography news and views.

FontShop

Fontshop’s approach to font identification is a general to specific one; you first identify the general form of the characters (glyphs), and then answer increasingly more specific questions about their form. Again, this is not only a good tool for font identification, but for finding new typefaces for your projects.

Something else I can recommend from FontShop is the FontBook. Weighing in at 3kg, with 32,000 type samples, it’s more of a yellow monster of a book. However, if you’re really interested in type, then reserve a place in your bookcase. I’ll be offering one of these as a prize soon, so subscribe to ensure you don’t miss out.

fontbook_sample.jpg

Sample page from the FontBook.

[Update:] The FontBook is now available as an iPad app.

Another title that I can heartily recommend (not from FontShop) is Rookledge’s Classic International Typefinder, by Gordon Rookledge et. al. It includes a useful section of so-called Special Earmarks — a typeface’s or character’s most distinctive characteristics; very useful for identification.

rookledge type finder

Identifont

takes a different approach with relative success. I often use it for a slightly different purpose: finding similar typefaces to those I’ve used before. I like font x, but I want something a little more rough around the edges, or I want something with a double-storey “a” — that kind of thing.

Identifont has you answer a series of questions, like “Do the characters have serifs?” and “What shape are the serifs?”.

Identifont, typeface identification

After this process of elimination, Identifont makes suggestions based on your answers. I like that they always have a “not sure” option; depending on the quality of your sample, it may not always be possible to accurately answer the question posed.

Tracking down a font or typeface is not always easy. No-one knows how may typefaces there are, though some guesstimate in excess of 100,000.

If you spend a little time trying to identify fonts, then you’ll learn a lot about them in the process. You’ll also increase your “repertoire” and therefore make more informed choices about the fonts you choose for your next design project.

In future I’ll feature some fonts that are difficult to tell apart at first glance, and show you the elements that distinguish them. Are there typefaces that you find difficult to tell apart?

If you have your own tips, or stories you’d like to tell, then, scroll down and type away.

[Update:] Another great way to learn how to identify fonts is by playing the hugely popular FontGame for iPhone and iPad.


Page 32 of 33« first27282930313233
July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts