I Love Typography

History of typography: Old Style

In the first part of this series, we looked at Humanist typefaces; we considered them in their historical context, and took a closer look at some of their distinguishing features and modern-day revivals. Today we’re moving along the time line and will spend a little time familiarising ourselves with some wonderful Old Style typefaces.

Humanist types, we discovered, have strong roots in calligraphy. Old style types, although they owe much to the same roots, show a marked departure from simply mimicking the handwriting of earlier Italian scholars and scribes. It’s from this period, that we can really see type getting into gear. It’s certainly one of the most exciting periods in type history.

old style characteristics

Old Style traits

The Old Style (or Garalde) types start to demonstrate a greater refinement—to a large extent augmented by the steadily improving skills of punchcutters. As a consequence the Old Style types are characterised by greater contrast between thick and thin strokes, and are generally speaking, sharper in appearance, more refined. You can see this, perhaps most notably in the serifs: in Old Style types the serifs on the ascenders are more wedge shaped (figure1.1).

Another major change can be seen in the stress of the letterforms (figure 1.2) to a more perpendicular (upright) position. You may remember our old friend, the lowercase e of the Humanist (Venetian) types, with its distinctive oblique (sloping) crossbar; with Old Style types we witness the quite sudden adoption of a horizontal crossbar (figure 1.3). I spent quite a time trying to discover why the lowercase e should change so dramatically. After searching high and low, and opening just about every type book I own, I decided to post the question on Typophile. Space doesn’t permit to recount the entire tale here, but for those interested in such details, then head on over to the Typophile e crossbar thread. (Thanks to Nick Shinn, David et. al. for their valuable input).

The First Italic Type

And, as we’re on the topic of dramatic changes, during this period we see the very first italic type in 1501. They were first created, not as an accompaniment to the roman, but as a standalone typeface designed for small format or pocket books, where space demanded a more condensed type. The first italic type, then, was conceived as a text face.

Griffo’s contribution to roman type include an improved balance between capitals and lowercase, achieved by cutting the capitals slightly shorter than ascending letters such as b and d, and by slightly reducing the stroke weight of the capitals.
A Short History of the Printed Word, Chappell and Bringhurst, page 92

The Old Style types can be further divided into four categories as in the figure below, and span the roman types from Francesco Griffo to William Caslon I. Unlike the relatively short-lived Humanist faces, the Old Style faces held sway for more than two centuries; a number of them are still popular text faces today.

old style chart

Typeface names in red; notable figures below.

Old Style faces

And here are some more Old Style faces: Berling, Calisto, Goudy Old Style, Granjon, Janson, Palatino, Perpetua, Plantin, Sabon and Weiss, to name but a few.

humanist-vs-old-style.png

So have you enjoyed our brief introduction to the Old Style types? For those of you who would like to test your knowledge, which of these is generally classified as Old Style:

Times New Roman, Baskerville, Concorde, ITC Cheltenham

And, for the type-masochists among you (I fear you are in the majority), here is some Old Style homework:

1. Where does the term Garalde originate?
2. Who commissioned Claude Garamond to cut the grecs du roi?
3. Most modern-day italics are not based on the first Aldine italic (1501) cut by Griffo. What are they modelled on?
4. What is the meaning of the term “Humanist axis”?
5. Owing to a bit of a mix-up, the Janson typeface is named after Nicholas Janson. Who should it be named after?

If you know the answers, then comment away; if you don’t have a clue, then no need to worry. I thought that by posing these questions, everyone could get involved, and that way we can all learn something.

In part three, we’ll take a look at Transitional typefaces. I hope that you’re enjoying the series, thus far. If you have any comments or suggestions, then get typing in the comments section below.

I’ll be in the UK for the next couple of weeks, so won’t be posting so often. However, upon my return we’ll be back to normal. There’s a whole lot more type lovin’ to come, so stay tuned.
footnote divider
Read Part Three: Transitional Style

Sunday Type

National Feijoa

Is it really Sunday again? Well, for some of you it will be Saturday, so here’s your Saturday/Sunday—or better still— Weekend Type. Oh, but first a quick announcement: the great response to the announcement of FF Meta Serif took us beyond the half a million page views. Thanks to everyone for being a part of that; more importantly, thanks for your contributions, your enthusiasm and support.

OK, so on with the show. Those of you who read the FF Meta Serif piece will know the name Kris Sowersby; he’s one-third of the trinity that worked on the serif version of Spiekermann’s ubiquitous FF Meta. I’m not sure which one he is, but I guess that Erik Spiekermann is the Father, so he’s either the Son or the Holy Ghost.

For those of you who don’t know Kris, he’s a professional type designer from New Zealand, and the man behind the typographic design studio KLIM (not to be confused with KLM, the Dutch airline). He’s also the designer of the sans serif National,

national-klim.gif

National is a deceptively simple sans serif with subtle quirks in the details that give it a distinctive—but not distracting—personality.

and the gorgeous serif typeface, Feijoa:

feijoa-klim.gif

For those who like to drool over type designers’ sketches, then head on over to Kris’ sketches page (go fetch a napkin first).

kris-sowesby-moleskine.jpg

Kris has kindly agreed to review some typefaces here on iLT, so stay tuned. I’ll try to arrange an interview too.

Other news:

Upon reading the So You Want to Create a Font series, Dan Reynolds a student on Reading University’s MA in Typeface Design (also designed Morris Sans and is Linotype’s Editor of Font Content), sent me some great links to additional resources:

Student blogs:

Paul Hunt | Sébastien Sanfilipp | Alice Savoie

and a site showcasing the work from the MA Typeface Design class of 2007.

gina.png

You can read Dan’s own TypeOff blog here.

Well, time for me to get back to writing Type Terminology: Old Style, the follow-up to the Humanist article.

Oh, just one more thing (almost forgot): I’ve created a few desktop wallpapers and a RSS Feed Desktop Widget. If you’d like to share the love, then why not make your own desktop wallpaper and upload it.

Have a great weekend, everyone.

veer-ilt-logo.png

At last! FF Meta Serif

Wedding Bells

I would usually never post two articles in a single day (I won’t be making a habit of it). However, the excitement was just too much, and the news too hot. Many of you will be familiar with Spiekermann’s wonderful FF Meta. But for years FF Meta lived a lonely existence with no Serif companion to keep it company. Well, now FF Meta has a wife; meet Mrs FF Meta, officially called FF Meta Serif.

ff-meta-serif.png

I must admit that I prefer the name FF Meta Serif to the working title, MetaAntiqua. For more information about this beauty, visit the original FontShop news item, where you can also download lots of gorgeous specimens.

All through the ’90s, Erik Spiekermann made several attempts at designing a counterpart for his groundbreaking FF Meta….True to his principle of collaboration, Spiekermann enlisted the help of accomplished type designers Christian Schwartz and Kris Sowersby.
FontShop News

So, what do you think?

Being Kind to Widows and Orphans

Typogrify Plugin

No, this is not one of those charity posts. It’s all about my favourite plugin. Imagine a plugin that could improve the typography of your page with no complicated setup. Controlling type online can at times be difficult. However, things have just gotten a whole lot easier with the release of the Typogrify plugin. Originally released by Christian Metts for Django, it uses among other things John Gruber’s Smartypants engine (that converts straight quotes to curly quotes, double hyphens to em dashes [—], etc.).

Shaun Inman developed the widont plugin for WordPress. Hamish of hamstu.com, decided to go the whole hog and port Typogrify to PHP, making a WordPress plugin out of it. I would have reviewed it sooner, but I wanted to be sure that it did what it says on the “box”. I’m pleased to say that it works like a charm, and I would recommend it anyone and everyone.

Typogrify WordPress Plugin by Hamish

I won’t go into the details of how it works, but basically this is what it does:

  • Fixes widow: basically puts a non-breaking space [ ] between the last two words of a paragraph, thus in effect gluing them together and forcing them onto the next line;
  • Sorts out quotes, so that you’re never left with curly quotes that point the wrong way;
  • Turns ellipses into entities. So those three dots (…) become a real ellipsis […];
  • Wraps ampersands (&) in class = ‘amp’. Why? So that you can easily style them;
  • Wrap multiple adjacent capital letters (all cap’s) in class = ‘caps’;
  • Make those who use it more attractive to the opposite sex; Hamish is still working on this beta feature request.

orphan example

And if you don’t think typographic orphans are serious enough to worry about, then think about the kids! The child on the left is looking at a paragraph with no orphans; the child on the right has just seen a widow.

effects-of-widows.jpg

Something I’d really like to see for the future of this plugin, is more multilingual support. Every language has some of its own unique typographic conventions; and what’s considered “correct” in German or French, isn’t so in English.

I like the features panel and, in particular, the ability to surround em dashes with a thin space. It’s a great idea to have as an option, as this is a subjective stylistic choice.

And finally, you don’t even need WordPress to use it. Download the plugin and check the readme file for instructions on how to use outside of WordPress.

Let me know how you get on with it. A big thank you to Hamish for all the work he’s put into this. Porting a plugin is about more than simply re-writing code in another language. He’s done a great job.

If you can think of additional features you’d like to see, why not leave a comment here or on the original post.

Sunday type: shush, I’m kerning!

Well, it’s Sunday again, and how quickly this week has passed. I received numerous positive emails about the Type Terminology: Humanist article, and they all indicate that readers want to see more like them. The next in the series will cover Old Style. I’m in the process of researching and writing the other five parts to this series, so keep your eyes peeled and readers at the ready.

Today we have a number of interesting news items; the first of which is:

lemondejournalptf_sample3.gif

The Le Monde Journal PTF special offer is available through 30 November 2007 (only 20 days remaining). To celebrate the launch of Le Monde Journal PTF, clients can pay a special price of only € 168 (standard price at € 210). For six fonts of this quality, the special price is very special indeed. This is a very versatile face, looking great for titling through body text; and one that you will use for many years to come. It’s a modern-day classic, and a bargain — though most certainly not of the bargain basement type. If you can’t afford it, then raid your children’s piggy banks, look down the back of the sofa, go without food for a week; this one’s worth every Euro.

Karen Cheng

And talking of type design, here’s an audio plus slides of Karen Cheng’s lecture at ATypI (Association Typographique Internationale) in Brighton. Karen is perhaps best known for her book, Designing Type; and if you are or you have the slightest notion about designing type, then this book must find its way into your hands. If you are new to type design, then you will love this book. In fact, Alec Julien (of the So You Want to Create a Font series fame — viewed almost 60,000 times) has written a review that I’ll publish towards the end of this month. I’ve listened to the following three times (checking sound quality, of course).

http://www.spike.com/video/2911205

[If the video does not appear, then visit this link.]

Many thanks to the wonderful River Valley Technologies for their permission to use the video here. They have numerous great type- and design-related video and audio files hosted there. Another great series that’s worth checking out is Non–Latin Typeface Design.

web typography

wdn-logo1.gifFive Essential Composition Tools for Web Typography. Have you ever seen a web site so clear, logical, and exquisitely composed it made you stop in your tracks? Have you wondered how the designer achieved such a stunning and cohesive design? In this presentation, Kimberly Elam reveals the relationships between proportion, visual systems, composition and aesthetics. For more information on this event (to be held in Vancouver, from January 28), visit the Web Directions North Web Site. Japan is a little far from Vancouver, so if you get the opportunity to go, then please report back on Kimberly’s lecture.

teaching type

The Type Workshop has agreat set of images that demonstrates some of the fundamentals behind designing type. Well worth printing for reference:

typebasics-05.jpg

Boulton on type

Mark Boulton has just posted the slides and notes to his Better Typography lecture for the Web 2.0 Expo’ in Berlin. As usual, sound stuff; a great presentation covering the basic elements of good typography from structure and form to micro and macro typography. Bookmark this one for future reference.

Don’t letterspce the lowercase without reason

Kuka the robot calligrapher

If you’re a calligrapher, you might be a little nervous about this one: a robot programmed to pen the entire Martin Luther Bible. Why? Not sure really, but an interesting feat nonetheless. Wish I’d had one of these in High School. Thanks to the Ministry of Type for this story.

robot-type.jpg

And almost finally, if you’re a fan of free and of the handwritten grunge font, then you may well be partial to Ohelo De Boi. You can download it from Dafont. Thanks to Jo of Josweb for bringing this one to my attention. I’ve already used this (sparingly, of course) for a design project. Note: you may need to get your hands dirty, and do some manual kerning — but what better way to spend your Sunday afternoon. When your husband or wife asks, “What’s for dinner?”, you can shut them up with a, “shush, can’t you see I’m kerning!”

ohelo-de-boi.jpg

And finally, finally, wherever you are and whatever you’re doing — kerning, gardening, playing with the kids—have a great Sunday.

Subscripts: Smashing Free Fonts

Smashing Magazine has just posted 40+ Excellent Free Fonts For Professional Design. I don’t like them all, but it’s certainly worth heading over there. Some of my favourite freebies are in there, including the gorgeous Fertigo from Jos Buivenga of exljbris.

fertigo.png

moderna1.png

Fertigo is my favourite in the list. How about you?

History of typography: Humanist

Every subject, from dentistry to dog handling has its own vocabulary — terms that are peculiar (unique) to it. Typography is no exception. Learning the lingua franca (lingo) of type will make typography that much more accessible; and that will, in turn, lead to greater understanding, and hopefully a greater appreciation for all things “type”.

Today we’re going to take a look at just one of those terms, namely “Humanist”. You may have come across this term before (or you may even be thinking, what the hell’s that?). The term Humanist is part of the nomenclature that describes type classification. During the 1800s a system of classifying type was derived, and although numerous other systems and subsets of this system exist, this basically is it:

Humanist | Old Style | Transitional | Modern
Slab Serif (Egyptian) | Sans Serif

By the end of this six-part series, you will be quite au fait with all of these terms; and just imagine the joy you will experience when you proudly exclaim to the delight of your spouse, girlfriend, boyfriend, neighbor, guy at the corner shop,

Look at that Humanist inspired type! Note how the bar of the lowercasee”….

So, without further ado, let’s begin our journey — a journey that will take us from the incunabula to the present day.

[Incunabula] can refer to the earliest stages in the development of anything, but it has come to stand particularly for those books printed in Europe before 1500. — A Short History of the Printed Word

The model for the first movable types was Blackletter (also know as Block, Gothic, Fraktur or Old English), a heavy, dark, at times almost illegible — to modern eyes — script that was common during the Middle Ages. Thankfully, types based on blackletter were soon superseded by something a little easier to read, (drum roll…)—enter Humanist.

gutenberg-bible-detail-page1.jpg

The Humanist types (sometimes referred to as Venetian) appeared during the 1460s and 1470s, and were modelled not on the dark gothic scripts like textura, but on the lighter, more open forms of the Italian humanist writers. The Humanist types were at the same time the first roman types.

jenson.jpg

Characteristics

So what makes Humanist, Humanist? What distinguishes it from other styles? What are its main characteristics?

1 Sloping cross-bar on the lowercase “e”;
2 Relatively small x-height;

Humanist characteristics

3 Low contrast between “thick” and “thin” strokes (basically that means that there is little variation in the stroke width);
4 Dark colour (not a reference to colour in the traditional sense, but the overall lightness or darkness of the page). To get a better impression of a page’s colour look at it through half-closed eyes.

Examples

And here are some examples of Humanist faces:

Jenson, Kennerley, Centaur, Stempel Schneidler, Verona, Lutetia, Jersey, Lynton.

centaur1.gif

Although the influence of Humanist types is far reaching, they aren’t often seen these days. Despite a brief revival during the early twentieth century, their relatively dark color and small x-heights have fallen out of favor. However, they do deserve our attention — our admiration even — because they are, in a sense, the great grand parents of today’s types.

Grab your passports and pack your toothbrushes because in part two we’re off to Venice to take a closer look at “Old Style” type. For those of you interested in testing your knowledge, can you tell which of the following are not generally considered to be Humanist types:

Erasmus, Times New Roman, Caslon, Cloister, Guardi, ITC Garamond

Further reading:

Wikipedia entry for Blackletter
A Short History of the Printed Word, chapter 4 — Chappell and Bringhurst
Type — The Secret History of Letters
, chapters 1 and 11 — Simon Loxley

Read part 2: Type Terminology: Old Style

Related post: The origins of abc.

Sunday Type: FONT

FREE FONT
Well, it’s that time of the week again. It’s Sunday. Some of you will be working while others will be “chilling”—am I too old to use words like “chilling”? Anyway, today I have something free (several free things, in fact)—but good free, not bad free.

Most things in life that are free are usually useless. But there are exceptions of course. I recently received a copy of FONT through the post—all the way from San Francisco to my sleepy little village in Japan. The free mini magazine from FontShop was quite a pleasant surprise. Not only is it well put together—typographically speaking—but it’s a good read.

font-magazine.jpg

So, what’s the catch? Well, sorry to disappoint you, but there isn’t one really. Simply head over to the FontShop account page and create an account (you are not obliged to buy a thing); and then go to your account settings, and set your subscription options. There’s also an interesting piece by Erik Spiekermann introducing the magazine, and explaining why, in this digital age, they decided to publish something for print. And no, I do not work for FontShop.

have you got the bug?

Firebug is THE FireFox browser extension. In addition to offering a whole host of tools for web developers, it can also help you to tweak your type. You can quickly make adjustments to line-height and font-size, letter-spacing, and even change your type on the fly.

Firebug extension for tweaking web typography

Something that I find useful when I want to convert pixels to ems or vice versa, is the Show Computed Styles option. Once selected this will display ems as pixels. Ems are great, of course, but the em is a relative measurement, so it’s sometimes really useful to see those ems as values in pixels.

You can also edit the CSS or the HTML and instantly see the results. A great tool for tweaking your type and layout. Oh, and it’s free.

iLT Wiki

The I Love Typography Wiki is closer to being launched. Ebsen has really put a lot of time and effort into it. We’ve been working together on this project, and it’s really starting to come together. However, we will need some willing volunteers. So, if you’d like to write a type-related article for the Wiki, or you are familiar with how Wikis work and wish to help out as an admin or editor, then let me know.

wiki3.gif

The whole idea behind the Wiki is summed up in two things: 1. Build community; 2. To educate and share knowledge about type and typography. And the entire contents will be available under a Creative Commons License, so that all the information can be reused, copied, pasted, quoted—completely free of charge. More news to come on this soon.

exljbris

And finally, be sure to check out exljbris and see some of the wonderful free (yes, free) fonts from the very talented Jos Buivenga.

delx_charchanges.gif

Coming up soon, we have several interviews, a series of five articles on type classification, so that you’ll never again confuse your Humanist with your Transitional; a book review from Cody, a case study from Alec Julien, and lots, lots more. Enjoy your Sunday!

Apostrophes don’t swing both ways

I admit it. I have a serious apostrophe pet peeve. I hate to see backwards apostrophes used in place of omitted letters.

Example: I’m really into rock ‘n’ roll, especially from the ‘60s.

Those reversed marks get me every time. Might as well just stick the sharp end of an apostrophe in my eye. Whenever I see the marks used improperly on television signage, I fire off e-mails to the shows’ “contact us” links. I yammer on about the correct use of these marks to my visual communication students. I seek out examples to scan or photograph that illustrate this common mistake.

And recently, after delving into the subject of apostrophes in even greater detail than I ever anticipated, I felt ready to sign up and join the club on some Web sites I stumbled upon, including: The Apostrophe Protection Society (a site “with the specific aim of preserving the correct use of this currently much abused punctuation mark…”) and Apostrophe Abuse (a collection of “links and visuals illustrating an orthographic pet peeve.”

Who knew that the apostrophe could generate such impassioned pleas for proper usage?

The mark is a simple one, and Wikipedia offers a succinct description of it typographical characteristics: “The apostrophe originates in manuscript writing, as a point with a downwards tail curving clockwise. This form was inherited by the typographic (or typeset) apostrophe ( ’ ), also called the ‘curly apostrophe.’ Later sans-serif typefaces had stylized apostrophes with a more geometric or simplified form, but usually retaining the same directional bias as a closing quotation mark.”

For some people, it’s difficult to figure out where and when to use an apostrophe to indicate the possessive in nouns and pronouns (Is it the peoples’ or the people’s clubhouse?), but at least the apostrophes in these cases usually hang correctly (if they’re there at all).

An apostrophe is an apostrophe is an apostrophe, I tell my students. When used to indicate omitted letters that fall on the left side of the letters than remain, don’t turn it into a right closing quotation mark (like you see in this slice of Boston Cream Pie I ate recently, above). It’s as simple as that.

Another Wikipedia tidbit: “Misused apostrophes are sometimes referred to as ‘idiot’s apostrophe,’ a literal translation of the German expression ‘Deppenapostrophe,’ which criticizes the misapplication of apostrophes.”

“Idiot!” is exactly what I want to shout out to the professional writers of TV shows who don’t have a clue which way the apostrophe swings.

I’ve witnessed apostrophic (“of or characteristic of apostrophe,” says one online dictionary) occurrence on national television a few times recently, which prompted me to fire off a couple of e-mails to Court TV and the E! Channel. (Even The Daily Show with Jon Stewart used an apostrophe incorrectly in the name of a book title on a sign that sat behind the host’s desk — but I let that one go.)

The response to my e-mails (from my perspective, a huge copy editing favor?) Zilch.

Deppenapostrophe!


I’m not over the edge yet. But when I am, I may have to seriously consider joining The Apostrophe Abolition Campaign (www.killtheapostrophe.com), a Web site “for those who want to remove the apostrophe from the English language, on the basis that it serves only to annoy those who know how it is supposed to be used and to confuse those who dont.”

[Julie Elman is an assistant professor at the School of Visual Journalism at Ohio University in Athens, Ohio. Before moving to Athens in 2005, she worked in the newspaper business for 15 years as a photojournalist, picture editor and designer.]

Download this article as a PDF!

footnote.gif

I wonder whether anyone can name the typeface used in the first image — to set ‘60s.

So you want to create a font. Part 2

Choices, Choices, Choices

[So You Want to Create a Font — Part 1]

The sheer number of fonts out there (MyFonts.com sells over fifty-five thousand) is a testament to the fact that there are nearly an infinitude of creative choices that can be made when designing a font. Of course there are the basics: serif vs. sans serif (and the numerous subcategories of each of these); handwritten vs. precision print-quality; wide vs. narrow; bold vs. light. But beyond these obvious choices are some specifics you may not have thought of:

  • closed or semi-open or open 4?
  • three-line or two-line Y?
  • descended or base-lined J?
  • two-storey or one-storey g?
  • two-storey or one-storey a?
  • crossed or joined or rounded W?

Examine a bunch of your favorite fonts to get ideas about these specifics and others—see if there’s a method to the decision-making of others. Do three-line Ys seem more traditional to you? Is that what you’re going for with your own font? Does a descended J fit your font, or are you just trying to force it in there?

Here are some other issues you may not have pondered:

  • the height of the horizontal bar of your e
  • the number of points in your *
  • the degree of the slant of your #
  • do your y and q have tails?

Don’t get so bogged down in details that you never get to the actual font-creation. But it does pay to think about some of these things before you dive into creating your font. A little well-spent time outside of your font creation software can save a lot of time inside of it, correcting problems or recreating glyphs.

Vertical Metrics

Another set of decisions to grapple with concern vertical metrics: the measurements that define the heights of your glyphs. Here’s some terminology for you:

  • The Ascender line defines the position of the top of lowercase characters (usually the topmost point of b)
  • The Caps Height defines the height of the uppercase characters (usually the height of H)
  • The x-Height is the height of most lowercase characters, like v
  • The Baseline is where your glyphs sit
  • The Descender line defines the position of the bottom of the lowercase characters (usually the bottom point of p)

Questions regarding vertical metrics you should definitely address before you start creating your font include:

  • Will your tall lowercase letters ascend to a line higher than your capital letters? (Many fonts do this, but not all.)
  • Where will your x-height lie? (You can achieve interesting effects by raising or lowering the “standard” x-height.)
  • How low will your descender go?

There are also some rules of thumb to consider when dealing with vertical metrics of your font.

Glyphs that curve at their bottom generally descend a small amount below the baseline. Likewise, glyphs that curve at their top generally ascend a small amount above the standard x-height or caps-height.

These rules of thumb are in place because generally speaking if a rounded glyph doesn’t ascend or descend more than a straight glyph, it appears to the eye that the rounded glyph isn’t the same size as its straight counterparts. That said, there’s no law that says you have to observe this. If your font works better where all of the glyphs are on exactly the same baseline and heights, than that’s what you should do. But doing it because you didn’t know any better isn’t really a great strategy.

Horizontal Metrics

You will be spending a great deal of time dealing with the horizontal metrics of your font. The major horizontal metric—kerning (to be addressed below)—can take many hours of fastidious work to get right. (Surely you’ve read Johno’s article on kerning, right? No? You really should. Go ahead. I’ll wait here.) But before we get to kerning, we should think about sidebearings.

Good sidebearings can help make for easier kerning, saving you some of those precious hours you’ll be spending at getting your horizontal metrics just right.

U Sidebearings

Sidebearings are the spaces on the left and right of your glyphs. In the image above, the “U” has the same symmetric left sidebearing as right. This is generally the case, but needn’t be. In some cases, one sidebearing can be positive and the other negative—that is, one sidebearing can be inside the font:

j Sidebearings

Notice that the left sidebearing (LSB) for the j is inside the boundary of the actual glyph — it actually cuts off part of the glyph. Why would you want to do this? Well, here’s how this j interacts with neighboring letters:

j Sidebearings

The inside-sidebearing tells your computer to render the j closer to its left neighbors than it would otherwise be. If the sidebearings were more symmetric, the spacing between the j and its left neighbors would be vast and unappealing:

j Sidebearings

This could all be fixed with kerning, but if the j is always (or nearly always) meant to be closer to its left neighbors, then having the negative left sidebearing means that you have less kerning to do, and that for users who don’t use kerning (most word processors, sadly, turn kerning off by default), the letters will be reasonably well-spaced.

Kerning

Having read Johno’s article on kerning, you’re up to speed on the basics, right? Well, here are some specifics about how kerning will pan out for you as a font designer.

Having good sidebearings is like having a head-coach who has a good overall gameplan — you’re preparing your font for those who don’t use kerning, and making it presentable in most cases — but to really make things work beautifully in specific cases, you’re going to have to have a good offensive coordinator who gets his hands very dirty with the details — you’re going to have to kern.

One thing I like to do right after setting up the sidebearings is print out a list of my font’s pairs and visually inspect it for trouble spots that will need kerning help. In fact, I wrote a script to generate an Open Office document with these pairs; the document is available here for downloading. Just open in it in Open Office, select all of the text, and change the font to your font. Print and examine.

Kerning Test

Once you’ve identified problematic pairs, it’s time to get your hands dirty and fix things. Here’s an example of one of my fonts, and how the V-e pair looked after generating sidebearings, but before kerning. Notice how big the gap is between the glyphs.

V-e Pre-Kerning

And here’s how it looks after kerning:

V-e Post-Kerning

The idea is to make the letters flow naturally from one to the other. I often like to think of kerning as making my glyphs snug against each other.

A couple of things to keep in mind about kerning:

  • If you find yourself making kerning adjustments to every pair in your font, you might have a problem with your sidebearings. Good sidebearings should generally mean that some of your pairs are set up not to need individual kerning.
  • People will tell you that you only need to kern the most used pairs. For instance, with q you’ll only need to kern qu and maybe qa, not qz, because who the heck is going to be using qz in print? I, for one, kern every pair I can, no matter how obscure. Purists may faint and/or gasp in horror. But who am I to constrain the users of my fonts to only having standard pairs be beautifully kerned? If someone wants to print out qz, they should have qz print out beautifully.
  • Most font-editing programs have an auto-kerning feature. This can be a good place to start, but the received wisdom is that after auto-kerning you should really still go in and tweak things by hand. There’s no algorithm that the human eye can’t best.

Scratching the Surface

We’ve really just scratched the surface, here. And, if left untreated, font-itis might set in. I hope it does. After a couple of years of font designing, I still learn something new every time I fire up FontLab Studio. And I hope I always do.

[Alec Julien is a web developer and amateur typographer living in Vermont, US. He dreams of someday living somewhere warm, and typesetting a novel.]

veer-ilt-logo.png

Sunday type: Spiekermann

Erik Spiekermann is the HighLander of type. He was no doubt present when Gutenberg got his finger stuck in one of his prototype presses; and he’s still here—his enthusiasm for all things type has not waned. Designer of numerous typefaces including the huge FF Meta family, ITC Officina, FF Unit and many others; “information designer”, author, winner of the Federal German Design Prize, and certified typomaniac, Spiekermann is…well, it’s difficult to sum him up in a sentence, so you decide.

If you have no idea who Erik Spiekermann is, then, well, I don’t know what to say—go stand in the corner. Alternatively, take a look at this video:

http://www.spike.com/video/2906180

I have never met the man, so I’d be interested in hearing from those who have.

Tomorrow we have the second instalment of Alec Julien’s hugely popular So you Want to Create a Font. That article has been viewed almost 40,000 times thus far. To ensure you never miss out, Subscribe to I Love Typography, and feel the love that only type can bring.

A big thank you to everyone who has read and commented and sent me emails. Another big thank you to Ebsen who is working tirelessly on the iLT Wiki—he’s a true type trooper. More news on the Type Wiki soon; and to Hamish who’s putting his programming skills to work on a new and much improved Fontometer.

If you can read German, you might want to head over to the FontBlog where iLT is mentioned for it’s recent review of Made With FontFont. And it looks as though they are considering offering a money-back guarantee on the book! Though with my 12 words of German, I could be mistaken.

And finally, lots of people mailed me to ask if they could have a high-res version of a photo I used in the Made With FontFont article, for use as a Desktop Wallpaper. So here it is:

Made With FontFont

BOOK REVIEW

Made With FontFont: Type for Independent Minds is a celebration of 15 years of the FontFont type library. The low-down (why do we never say “the high-up”?): it’s big, it’s yellow, has 351 pages and it’s divided into an introduction and five sections.

Introduction

A brief history of the founding of type distributor FontShop by Spiekermann in 1989; the beginnings of the FontFont type library and of FontShop International (FSI), the font publisher.

1 Thinking FontFont

An anthology of essays and type critiques.

2 Talking FontFont

Interviews with five FontFont designers. My personal favourite is Christopher Burke on Type (pages 132–145), the type designer behind faces like FF Celeste and FF Parable, and author of Paul Renner: The Art of Typography.

3 Making FF

Type designers visualise their motives, methods and sources. Includes a short and entertaining piece by Nick Shinn on A Brief History of Fontesque.

4 Showing FontFont

A collection of contemporary type specimens. Too many to list here; and anyway that would spoil it for you. Some of my favourites are in there: Scala, Eureka (I always think of Eureka as the typeface that punches you in the face, then throws water over you to rouse you from your knuckle-induced stupor). Eureka Serif is in my opinion the French Madam of serifs. Use it; you’ll fall in love with it—the face, not the French Madam, that is.

5 Made With FontFont

FontFont Fonts in use in the ethereal and prosaic worlds. An essential section. Type specimens are great, but it’s not until one sees a typeface in use—in the real world—surrounded by noise and nonsense that it really earns its keep.


I have recently finished re-reading this bright yellow type tome, and have concluded that it’s one of the very best books on type. Initially, I was reluctant to buy this title because it’s a book about a single type library, However, the FontFont library is pretty big.

I also thought that perhaps it’s nothing more than a big ad for FontShop aimed at flogging more fonts. Sell more fonts it will undoubtedly do, but reading this book will reveal its true intentions.

Behind this book, and woven through its pages is a passion for type—I guess that comes as no surprise when one sees Spiekermann’s name on the cover. If enthusiasm for type were hard currency, then he’d be the richest man in the world.

If you were to quickly flick through this book, then you might easily mistake it for yet another one of those insipid follies, those coffee table adornments, the kind of books you could put together from the ad pages of Vogue, and other flotsam. Made With FontFont is different, and is worth spending your money on.

My only criticism is the cover. Don’t get me wrong, I love yellow—and it’s very yellow; but I hate the cover design and the silly paint dribble nonsense on the spine. However, behind the awful cover (you may love it) is a 350-page type feast, so go on gorge yourselves. You’ll find that you’ll just want to lick some of the pages (I hope I’m not the only one suffering from such urges).

Made With FontFont is many Things: it’s a history of the founding of the FontFont library; it’s an inspiration with its numerous examples in as many faces and design styles; and you’ll come away from it with a greater appreciation for type and typography.

From a personal perspective, some of the examples of type use have helped to dispel some of my own type prejudices; and brought me to look at some long-disdained typefaces in a completely new light.

And Finally…

Perhaps it’s a small thing, but I think it’s important: you all know dummy text or filler text, that lorem ipsum and other equally unintelligible nonsense?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id mauris. Phasellus hendrerit. Vivamus egestas mi in nisi. Quisque nibh. Aenean ipsum nulla, fringilla ut, rutrum in, feugiat ultrices, ante. Nunc nec diam quis odio laoreet tristique. Mauris tempor venenatis neque.—Anonymous

Well, this book’s dummy text is not a dummy at all. Most of it makes for interesting reading; some of it contains some real gems:

Advertising and design serve to amplify the value of useful things.—originally from Ellen Lupton’s Mechanical Brides.

So rather than the dummy text being a brazen waste of good white space, instead it’s filled with readable and informative copy. That’s the crux really—it’s readable. How many of you read the lorem ipsum paragraph above? My guess is that none of you read it (unless you’re insane or very bored or both, in which case you’ll need to flick through another yellow book until you reach the 0800 SHRINK section).

Type only comes to life when we read it. Our “reading” eyes do to type what Jesus did for Lazarus—they resurrect it. Lorem Ipsum is the dead fish of type—it’s useless and it smells. Now you know why it’s really called “dummy text”. (for some alternatives see Dummy Generators, or use copy from public domain books.)

And finally, finally, if you want a great type book, buy Made With FontFont. If you don’t like it, I’ll give you your money back (did I really say that?).

Have you read it? What do you think?

Coming soon we have the second part in our hugely popular So You Want to Create a Font, by iLT’s US correspondent Alec Julien; and lots, lots more type goodness. If you haven’t already done so, then Subscribe to I Love Tyography and fill your RSS reader with typographical loveliness.


Page 25 of 28« first22232425262728
October Fonts September Fonts August Fonts 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