Making Fonts

from How-To Geek "How to Understand Typography Like a Professional Designer"

Look at the "How To" Page

Making Type (by Ira Socol)

Typography is everywhere, and it is so much a part of everything we see that we hardly even see it anymore. But the letters we use don't just represent parts of words, they represent ideas, emotions, and time periods.

Even before we can read, we know what certain typographic symbols mean, and we connect them to ideas about both the people who have given us those symbols, and ourselves.

German sign indicating "Attention! You are now leaving West Berlin" (top)

and a McDonald's with "deconstructed" type at EuroDisney in Paris. (below)

When I was growing up a supermarket was built next door to where we lived. At first it had a big sign proclaiming "First National Stores" - in a logo developed during the early 1950s. This wasn't technically "type" because, if we look, we can tell that it was hand-lettered. Back before the 1970s it was impossible for letters made from "type" to be this close together.

Later, in the 1970s, as "cold type" and "photo type" appeared, the supermarket changed its logo and sign once more. It used an "over-bold" (very heavy) version of a (then) contemporary font, and using these new type technologies pushed the letters together until they touched. This logo is also "in reverse" - that is, white letters on a dark background.

The phototypositor (left) let people push letters together for the first time.

Letraset "press type" letters (above) were lined up and rubbed down onto "boards." This allowed typesetters to do lots of different kinds of things.

Then, finally, Finast closed all of their stores in my home town (I think there were four, two of which I could walk to in five minutes, not only type has changed). They were last seen in New England as "Edwards-Finast" using a look popular in the 1980s, a kind of "stenciled" (and slightly blurry) look.

When I looked back, I found earlier versions of how First National Stores expressed themselves. From back before I can remember. These signs are very different.

But I remember lots of other forms of type, type and logos that now look different from what we see now. I remember airlines through their choices of typefaces. And basketball teams that disappeared long ago. And even how television networks have chosen to present their letters.

So there are lots of different typefaces. And people invent new ones all the time, especially since computers have made that much easier (you had to actually draw each letter in the old days).

Create your own fonts with the Fontstruct site or use Font Creator.

There are millions of fonts to choose from, free. DaFont is one site.

from How-To Geek "How to Understand Typography Like a Professional Designer"

Fonts fall into a few big groups: One way to divide them is into Serif and Sans-Serif fonts. Serifs are the little lines at the ends of the lines of letters. They are an ancient idea, they showed where the chisel first hit the stone when those carving letters in Greece and Rome 1,500 to 3,000 years ago.

Sans-Serif is simply French for saying "without serifs." In the 20th Century sans-serif fonts were often considered "modern," but that "modern" can now seem "old-fashioned." Styles in type are like styles in everything else. People often say that serif fonts, like the one used here, are more readable. But they also say that sans-serif fonts are more readable on computers. But really, these days, its all personal preference. For most people serifs seem to make it easier for the eyes to follow. And computers no longer have blurry cathode ray tube monitors, which caused some problems with serif fonts on screen.

So now is the time to decide for yourself. If we design our web sites correctly our users can switch to the fonts they like. If we give people digital texts instead of paper books or handouts, they can change to any font in any size.

from How-To Geek "How to Understand Typography Like a Professional Designer"

Another way to divide up fonts is to say "text fonts" and "display fonts." Display fonts can make great logos, maybe even headlines, but can be quite hard to read:

So there is a reason newspapers and news sites tend to "keep it simple":

So, next time you see a sign, a poster, a book, a handout from your teacher, a website, look at the fonts and decide what the choices the designer made "make"? What are they saying beyond the words they are using?

Many Chinese restaurants used to use fonts like this one above. Why? What do you think of this?

From the 1920s through the 1950s "art deco" fonts like this were considered very modern. What do they look like now?

Here's a display font that might be beautiful, but might also be tough to read. This style is called "art nouveau."

When I was growing up every neighborhood had a restaurant with a sign like this, most advertising Coca-Cola, though in my hometown, where New York's 7up was bottled, they all had a 7up sign instead. Does this look old now? Does it suggest a good place to eat?

But almost every town in America also had a Woolworth's (kind of like a Family Dollar), and every Woolworth's had a "Luncheonette" too. In the Southern United States Woolworth's "lunch counters" had a huge role in the Civil Rights/Desegregation movement, so these signs mean a lot to people who lived through that era.

In New York City we also had fast food restaurants called "Chock full o' Nuts." They had a unique font that is still remembered.

For me, another memory is how police cars looked, especially New York City Police Department (NYPD) "radio cars." When I was a cop in New York the cars look like the one above. Baby blue and a font called "Microgramma." Now they look like the one below, white and navy blue and a "slab serif" display font. Besides not needing to order a special paint job anymore, why do you think the NYPD switched?

Of course when I was growing up the NYPD cars looked very different. They were green, black, and white. The font is Franklin Gothic.

Parts of Typefaces

The Anatomy of a Letter

from How-To Geek "How to Understand Typography Like a Professional Designer"

Typefaces are like any other technology, there is a special vocabulary:

the following is all from How-To Geek "How to Understand Typography Like a Professional Designer"

• Body Copy: Large blocks of type set to be read with the greatest of possible ease. Body copy should all be set in the same font, with shared point sizes for the face and leading.

• Majuscule: Otherwise known as Uppercase letters. Most of our alphabet borrows its Majuscules from the Latin, or Classical letterforms.

• Minuscule: Counterpart to Majuscule, Minuscules are our lower-case, copied and modified throughout the years to better fit their Classical letterform counterparts.

• X-Height: In a miniscule set of a font, the so called “height” is the space between the baseline and the mid-point, which is often the height of the lowercase letter x.

• Baseline: The invisible line where the fonts “rest.” Descenders can dip below this line, but have a resting point that sits on it.

• Ascender: In the set of Minuscules, the Ascender is the part of the font that goes beyond the X-height, approaching the Capital letter height. Letters with ascenders are those like l, b, f, or k.

• Descender: Also in the Minscules, the Descender is the part that dips below the Baseline. Letters that have descenders are p, q, y and, in some faces, f.

• Ligatures: Sometimes lowercase letters collide within words and create tangent points and bizarre shapes that can cause a reader to stumble without realizing why. Typographers artfully combine letters like “fi”, “ti”, “ffi” in ways that are easy on the eye and are often undetectable as separate characters. Many quality fonts include these Ligatures among their Glyphs.

• Bowl: Enclosed round space within letters like the “o” and “p” or “B”.

• Counter or Counterform: Open rounded space within letters like the “c”, “G” or “U.” The lowercase “e” has a bowl and a counterform.

• Letterspace: The most literal typographic term, Letterspacing is adding blank space between individual letters. It is only adding space and is not to be confused with Kerning. Some fonts are easer to read Letterspaced, while some are harder.

• Kerning: Letters are Kerned when the spaces between letters are closed up, bringing them closer together. Some letter combinations like “AV” often need Kerning to not look awkward and filled with excess space. Most kerning in modern computerized type is done automatically by the software, but may need personalized attention depending on the font or the situation.

• Lead or Leading: Lead is the space between baselines of text in body copy. For instance, “double-spacing” your research paper in Word is increasing the Leading. Leading is set in points and is normally set at the same point as the font or slightly higher. This is pronounced “Lead” as in the heavy metal substance in the case of “Lead” and “Leading.”

• Serif: Serifs are traditional flourishes, points, and shapes on the ends of the strokes of letters. These are hallmarks of older style fonts with roots in Roman, Italian, and German scripts. These were originally part of naturalistic pen strokes and became part of the first sets of fonts. It took longer than you might think for the first fonts without Serifs to be created and and widely used.

• Type Nerd: Exactly what it sounds like, Type Nerds relish pointing out when somebody uses Faux Bold or a Double Prime instead of true quotes. Typography is an art form created by sticklers, and so creates a lot of Type Nerds.

Basic Types of Fonts

Serif: What has become the standard of standards, Serif fonts have those flourishes, points, and shapes on the ends of their strokes. Serif fonts are often considered “Traditional,” and are often used for more to say something about this tradition in more conservative, old-fashioned designs. Body copy set in Serif fonts is often very readable. Common Serifs are Times, Georgia, Garamond, Minion, and Baskerville.

Sans Serif: When the first Sans Serif fonts were created, people called them “Grotesque.” This name still exists today as one of the first generation of Sans Serif fonts. Sans are the more modern hipster cousins to Serif fonts. Much of typographic design today uses Sans fonts. Common Sans are Helvetica, Impact, Futura, Frutiger, Myriad, or Tahoma.

Slab Serif: A Serif font popularized in the 19th century when the Western world was developing a keen interest in the history of Egypt. Slab Serifs have blocky slabs of serifs as opposed to the pointed or flourished ones that hallmark the Serif fonts based on humanistic, handwritten letterforms. Common Slab serifs are Rockwell and Courier, the typewriter font.

Blackletter: Unfortunately, these are often called “Old English” fonts. Blackletters were the first fonts to be printed by movable type, and were therefore the first font in the repeatable, modern sense. They are based on a caligraphic tradition and were first used by Gutenberg to print the famous Gutenberg Bible. A common Blackletter is Fraktur.

Dingbat: Decorative, non letterform Glyphs used for various decorative purposes. Common Dingbat fonts are Zapf Dingbats and Wingdings.

Display font: Fonts designed specifically for short, eye-catching text. Posters, advertisements, and web design headers are best done in Display fonts.

Body Font: Fonts designed to set large sections of body copy. Books, newspapers, and the content of blog posts should all be set in appropriate body fonts.

Calligraphic or Script Font: Fonts designed based on a person’s handwriting or designed to look like handwriting. These can be as elaborate as Edwardian Script or as simple as the humble yet loathed Comic Sans MS.

Novelty Font: Digital typography has allowed designers to create all manner of bizarre, but oddly good-looking fonts. These can range from useful to useless, from copying a movie title font, to borrowing the style of Graffiti artists. Novelty is sort of my own umbrella term. I use it to illustrate the difference between the modern trend of font design versus the long, established history and undisputed types of fonts.

Historic Ideas

Notice in both the Edsel car advertisement and the Life Magazine logo below that in the era of "machine type" (metal) the letters were always a certain distance apart. Then, you can see a much earlier Life Magazine with hand drawn letters, and a recent version of Life with the letters in the logo much closer together.