Typeface

static/images/woodmarks_for_swarm.png

A typeface (= font family) is a set of one or more fonts each composed of glyphs that share common features.

For example, Comic Sans (designed by `Vincent Connare`_), Gotham, `Times New Roman`_, and Wingdings_.

Contents

1   Etymology

Traditionally, upper and lower case type were each kept in a separate case (or tray); this is why capital letters are called "upper case" characters while the non-capitals are "lower case"

2   Font

A font is a particular size, weight and style of a typeface. Each font was a matched set of metal type, one piece (called a "sort") for each glyph, and a typeface comprised a range of fonts that shared an overall design.

In modern usage, with the advent of digital typography, "font" is frequently synonymous with "typeface".

3   Contrast ratio

static/images/contrast_ratios_illustrated.png

Apple's typography guidelines suggest that developers aim for a 7:1 contrast ratio. Google’s guidelines suggest an identical preferred ratio of 7:1. But then they recommend 54 percent opacity for display and caption type, a style guideline that translates to a ratio of 4.6:1.

At first, text on the web was designed to be clear. The original web browser, built by Berners-Lee in 1989, used crisp black type on a white background, with links in a deep blue. That style became the default settings on the NeXT machine. And though the Mosaic browser launched in 1993 with muddy black-on-gray type, by the time it popularized across the web, Mosaic had flipped to clear black text over white.

When HTML 3.2 launched in 1996, it broadened the options for web design by creating a formal set of colors for a page’s text and background. Yet browser recommendations advised limiting fonts to a group of 216 “web-safe” colors, the most that 8-bit screens could transmit legibly. As 24-bit screens became common, designers moved past the garish recommended colors of the ’90s to make more subtle design choices.

As LCD technology advanced and screens achieved higher resolutions, a fashion for slender letterforms took hold. Apple led the trend when it designated Helvetica Neue Ultralight as its system font in 2013. (Eventually, Apple backed away from the trim font by adding a bold text option.)

As screens have advanced, designers have taken advantage of their increasing resolution by using lighter typeface, lower contrast, and thinner fonts. However, as more of us switch to laptops, mobile phones, and tablets as our main displays, the ideal desktop conditions from design studios are increasingly uncommon in life.

So why are designers resorting to lighter and lighter text? When I asked designers why gray type has become so popular, many pointed me to the Typography Handbook, a reference guide to web design. The handbook warns against too much contrast. It recommends developers build using a very dark gray (#333) instead of pitch black (#000). The theory espoused by designers is that black text on a white background can strain the eyes. Opting for a softer shade of black text, instead, makes a page more comfortable to read. Several designers pointed me to Ian Storm Taylor’s article, “Design Tip: Never Use Black.” In it, Taylor argues that pure black is more concept than color. “We see dark things and assume they are black things,” he writes. “When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.”

4   Fonts

4.1   OCR-A

A font designed in the 1960s to make printed text readable by machines.

5   Further reading

6   Study

The study of typefaces is called typography.

7   Function

static/images/walker_1855.jpg

A page from a journal written from June 9-10, 1855 during the Crimean War by Captain Mark Walker. It reads:

…wounded Major Armstrong + Capt. Le Marchant 49 wounded + Lt Stone’s 55th killed. Today it is blowing very hard and the dust is abominable — have just heard of 4 officers [of the] 88th having been killed and Col. Sherman Major Dick-son + Capt. Foster [of the] 62nd Many I know and respect very much it is said the loss has been in the Divisions about 500 killed and wounded — besides many in the Light Division. Lord Raglan went toward the hospitals this evening visiting the wounded. There is a general order eulogizing the troops though it is whispered they did not do so well. Little I fear has been gained for a great loss —

Saturday 9th. Still blowing very hard + dusty. The bateries [sic] are firing away. Yesterday the ships in harbor threw shells all day at the Mamelon, the Redan, and the Malakoff. [The Russians] fired very little. I fancy they are preserving their ammunition in case of an assault — a generous one I should think — hill down to the plains.

Sunday 10th. Last night I went on with the reserves. Just as I got into the rear approach which joins the trench on the right heavy firing commenced at the Mamelon. While I was in the act of hurrying the men up a howitzer shell dropped beside me and exploded. A piece struck me on the right elbow and smashed it. I immediately tied a large handkerchief above the fracture and walked to the rear until I met some of the 55th who put me on a stretcher and carried me to Camp. I received great kindness from my new brother officers. After some time I was carried to a hut at the General Hospital where I now am. I was put under choloroform [sic] and on coming to consciousness I found my arm taken off above the elbow during the night and today I suffered a good deal of pain. The loss I have experienced is very great but I am very thankful that my life has been spared. The hut has been filled with sympathizing visitors particularly my [old comrades of the 30th…]

Note the handwriting changes suddenly, halfway down the page, due to having to write in a new unfamiliar hand.

static/images/cern_higgs_boson_announcement.jpg

On July 4, CERN announced its evidence for the existence of the Higgs boson in Comic Sans.

Typefaces can affect how we think about the content.

The conscious awareness of Comic Sans promotes — at least among some people — contempt and summary dismissal

If we’re able to identify why we trust Baskerville so much—the form, the weight, the context in which it's presented—is it possible to design a font to achieve certain emotional effects? This is partly what a type designer does, synthesizing fonts that work within certain parameters and constraints.

8   Substance

9   Classification

9.1   Serifs

  • Has little edges on ends of letters

9.2   San-Serifs

  • No edges on ends of letters

10   History

Since the advent of typewriters (from John J. Pratt’s pterotype in the 1860s to word processors in the 1980s), few people write by hand anymore, and we now have a vast array of typefaces available to us. (Written manuscripts, letters and journals were once unique objects often containing clues about the writer and the context of when and how they were written.)

Charles Bigelow and Kris Holmes (proprietors of the firm and husband-and-wife team), designers of the Lucida font and proteges of the legendary designer Hermann Zapf, designed three separate fonts called Lucida Icons, Lucida Arrows, and Lucida Stars. Users could pluck the appropriate icon by typing the letter assigned to it to ornamentate their documents without worrying about file size or poor quality.

Microsoft bought the rights to Lucida Icons, Lucida Arrows, and Lucida Stars in 1990, and combined its favorites into a single font called "Wingdings" that was included in a beta test of Windows that year. Storage size limited how many characters the company could include — it was only willing to include so many fonts in its floppy disc release

Microsoft called it "Wingdings" to combine "Windows" with an old printing term, "dingbat". What's a dingbat? When using a `printing press`_, printers needed a shortcut when it came to ornamenting their text. Every figure or letter had to be hand-carved and laid out before anything could be printed, so it was too laborious to make a new template for every drawing or figure. Enter dingbats. These tiny pieces included a variety of reusable shapes that could be slotted into text and used as ornamentation in a book.

Wingdings was occasionally misunderstood. While it was intended to be picked apart, used individually for a splash of imagery, users interpreted it as an unusual font for writing words.

The history of character fonts goes back even further than the dingbat.

—Phil Edwards. August 26, 2015. Why the Wingdings font exists. http://www.vox.com/2015/8/25/9200801/wingdings-font-history

11   Examples

11.1   Comic Sans

static/images/comic_sans.jpg

Description of Comic Sans in Microsoft Publisher For Windows 95 companion manual.

Comic Sans is a typeface.

11.2   Gotham

Gotham is a font.

Gotham tends to be a popular font across the Internet and was used in Barack Obama's campaign. The new logo for One World Trade Center also uses a Gotham variant.

Used by Twitter. The font is the product of Hoefler & Co. (neè Hoefler & Frere-Jones), a type foundry operating out of New York City

12   See also

13   Further reading


See: http://typeplate.com/


TIL Cliché comes from the sound made when plates with commonly used words or phrases were fitted into a printing press. These plates were called stereotypes. • /r/todayilearned


Bembo has a long history and is fairly influential. See very long Wikipedia page for it. Also, Edward Tufte -- who is a god to many graphic designers -- praises Bembo and uses it in all his books.


The "two spaces after a period" rules only applies to monospace fonts, such as those used with a typewriter. With fonts using proportional spacing, the rule is incorrect.