TYPOGRAPHY

It’s easy for typefaces and fonts to be overlooked by beginning designers, but in many ways your choice of font says as much about your project as the colors you use. And if your work is being read by others, the font choice acts as a subconscious filter that affects the way in which the reader approaches your content.

But what is typography?

.

That’s a big question, but I define it along these lines: Typography is the use of font and text as aesthetic tools, communicating ideas of style, tone, genre, and more.

There are arguably three major tenets to typography: Legibility, readability, aesthetics.

Legibility is the ability of the reader or viewer to distinguish one character from another. Is that a G or a Q? In some fonts it’s easy to tell the difference, but in others they might look so similar as to inadvertently trip up a reader. New fonts are now being developed with dyslexic readers in mind that prioritize legibility between like characters.

Readability is the ability of the reader to identify and process whole words in sequence, ultimately influencing the rate of reading comprehension. This includes many factors outside of font choice, such as cultural and individual familiarity and comfort.

Finally, aesthetics influences how your work interacts with your reader or viewer. Aesthetic considerations include how visually attractive a font is, how relevant the font is to the subject, how well the font might grab a reader’s attention, how well the font can sustain a reader’s attention, and how the font is displayed or presented that might affect the way that a viewer or reader approaches the text. In short, aesthetics is how the font complements the subject and fits the context of its use.

TYPEFACE VS FONT

Before we dive into too many details about typefaces and fonts, it’s helpful to distinguish between the two. Basically, typefaces are the overall geometric design of the text, whereas a font is an individual variation of a typeface.

A typeface is often referred to as a ‘font family’, which is somewhat helpful in understanding the relationship between the terms.

Fonts, then, are variations of size and weight, among other things.

EMPHASIS

Another of the more common font variants involves emphasis, meaning to make a font bold or italicized.

Emphasis also technically includes underlining or using a strikethrough effect, but these don’t affect the fundamental designs of the font.

WEIGHT

Relevant to the idea of emphasis is that of weight. Changing the weight of a font makes the characters thicker or thinner, but doesn’t affect the height of the characters.

When you make a portion of text bold, you’re adjusting the weight of just the selected text.

Oftentimes the weights are accompanied by unique name variations, such as light, thin, normal, standard, semibold, thick, bold, black, etc.

CONDENSED

Another common font variation is ‘condensed’, which is a variation in which the characters are often tighter along the horizontal scale.

Condensed font variations are often paired with a bolder weight as well, to help with legibility and readability, but not always.

THE ANATOMY OF TYPE

Any given font is defined by a number of measurements and traits, but here are a handful that pertain to the respective heights of certain parts of the font.

BASELINE

The baseline runs along the bottom of uppercase letters, as well as most lowercase letters that don’t have descenders.

CAP HEIGHT

This is where uppercase letters come up to. In most conventional typefaces, uppercase letters are all the same height.

X-HEIGHT (MEDIAN)

The median is the height of lowercase letters without ascenders.

The x-height is the distance from the baseline to the median of a typeface.

ASCENDER

An ascender is part of a lowercase letter that goes up past the median, and possibly the cap height, depending on the typeface and individual letter.

The following letters have ascenders: b, d, f, h, k, l, and t.

DESCENDER

A descender is part of a lowercase letter that goes down below the baseline.

The following letters have descenders: g, j, p, q, and y.

CAPITALIZATION

Next, we will look at the various ways in which letters might be capitalized within a word, sentence, or more.

Before that, though, let’s look at the concept of what a glyph is.

GLYPH

A glyph is a specific representation of a letter. You might think of a glyph like an icon that represents a letter.

The letter A, for instance, is represented in most type sets with two glyphs: A and a (uppercase and lowercase, respectively). Every other letter typically has two glyphs as well. These glyphs are usually representative of the letter case.

If you think of a typewriter or letterpress, each character is a glyph. You need different glyphs to represent lowercase, uppercase, and any other variants of that letter (accent marks, etc).

LETTER CASE

In addition to letters and syntax, the case of a letter or word can provide additional meaning.

For example: in the English language, proper nouns start with an uppercase letter to indicate a certain significance or specificity (apple vs Fuji Apple).

As authors of our work, however, we aren’t always bound to any particular set of rules.

SENTENCE CASE (STANDARD CAPITALIZATION)

Sentence Case is the typical way in which we capitalize letters and words in the English language.

Generally speaking, we capitalize the first word of a sentence, the first letters of proper nouns, certain pronouns, etc.

UPPERCASE (ALL CAPS)

UTILIZING UPPERCASE IN DESIGN MEANS TO USE LETTERS EXCLUSIVELY IN THEIR UPPERCASE FORM WHEN WRITING OR USING WORDS IN A LOGO OR WORDMARK.

WRITING IN ALL CAPS IS A FAIRLY COMMON PRACTICE FOR TITLES AND SECTION HEADERS, AS IS DEMONSTRATED ON THIS SITE.

USING UPPERCASE LETTERS DRAWS ATTENTION, AND INDICATES IMPORTANCE.

MOST PEOPLE ALSO ASSOCIATE UPPERCASE LETTERS WITH YELLING OR SHOUTING, AS IT IS THE CASE OF CHOICE FOR ANGRY PARENTS AND DISAGREEABLE COMMENT SECTIONS.

KEEP IN MIND, THOUGH, THAT UPPERCASE IS AN UNCOMMON READING FORMAT, AND AS SUCH HAS LOWER READABILITY THAN OTHER CONVENTIONAL LETTER CASES.

IT IS, HOWEVER, EASIER TO DISTINGUISH AND READ AT SMALL SIZES, WHICH IS WHY INSTRUMENT PANELS HAVE HISTORICALLY USED UPPERCASE.

UPPERCASE LETTERS ARE ALSO KNOWN AS MAJUSCULES.

IN THE VAST MAJORITY OF TYPEFACES, UPPERCASE LETTERS ARE ALL THE SAME HEIGHT, AND RUN FROM THE BASELINE TO THE CAP HEIGHT.

UPPERCASE LETTERS ARE NAMED AS SUCH BECAUSE, HISTORICALLY SPEAKING, THE LETTER GLYPHS (THE THINGS THAT WERE PRESSED IN INK AND USED TO MAKE PRINTS, ETC) WERE TYPICALLY STORED IN THE UPPER SHELF OF AN ACTUAL TYPE CASE, OR AT LEAST ABOVE THE LOWERCASE LETTER IN THE TRAY.

LOWERCASE

lowercase letters are the alternative set to uppercase letters, and using a ‘lowercase’ approach in design means to exclusively use this set of characters.

generally speaking, most mid-sentence words are displayed in lowercase, so it’s easier to read lowercase letters because we’re used to it, but that’s not the only reason.

lowercase letters are more complex in their appearance than uppercase letters, due to their use of ascenders and descenders. these are the parts of lowercase letters that reach above the height of uppercase letters and well below the baseline, respectively.

the ascenders and descenders help in the legibility of lowercase characters, which ultimately helps with readability as well, and is why it’s much easier for you to read this than the uppercase section above.

using lowercase letters in design theoretically sends an inverse signal to those sent by uppercase letters, so the message might seem meek or passive, but in practice it’s a bit more complicated.

in many contexts, lowercase letters are used in a sort of meta-critical way. creators often use lowercase letters in contexts where uppercase would usually be used, and as such the use of lowercase is a statement of sorts, oftentimes sarcastic, ironic, or cynical.

lowercase letters are also known as minuscules.

lowercase letters were named as such because the lowercase letter glyphs were stored in the lower shelf of a type case, or below the uppercase glyphs in a tray.

TITLE CASE

Title Case, Or Start Case, Is A Font Case That Capitalizes The First Letter Of (Almost) Every Word, (Generally) Regardless Of Whether The Word Would Be Capitalized In Conventional Sentence Case.

There Are Variations Of Title Case That May Or May Not Capitalize Articles - A, An, And, + The.

Title Case Is Most Commonly Used In Titles Of Movies, Series, Books, Article Headings, Scholarly Essays, And So On.

SMALL CAPS

Small caps is a combination of uppercase and sentence case, in which all letters appear to use uppercase glyphs, but the characters that would normally be lowercase in a sentence case format are only as tall as the standard x-height for lowercase characters.

In this case, most of the letters are still technically lowercase, but they are represented by glyphs that resemble uppercase glyphs, but are closer in size to lowercase glyphs. It’s a little difficult to explain in writing, so be sure to check out the image above.

FONT TYPES

There are classifications of fonts, depending on whether they possess things like serifs, whether they are suitable for fine reading or display, or whether they are modeled after any sort of handwriting aesthetic.

SERIF

Serif fonts possess tags on the ends of certain letters to help with legibility. This also helps with readability, too, since the reader is generally able to identify individual characters quicker than fonts without serifs.

Historically, serif fonts have been prominently used in newspapers, magazines, and other publications, due to serif fonts being considered more readable at 12-point size than most sans serif fonts.

Likely because of their use history, serif fonts can seem more dated or old-fashioned compared to sans serif fonts. Likewise, they can also seem more traditional, ornate, and fancy.

As mentioned, many serif fonts are more readable at small point sizes, due to the serif helping the reader to identify which letters are which. This is not universal, however, and many serif fonts are too ornate to be readable at small sizes.

SANS SERIF

Sans serif fonts are those that do not possess serif tags. The name comes from the French word ‘sans,’ which means ‘without'. So the term ‘sans serif’ literally means ‘without serifs’.

Sans serif fonts have long been used in art, displays, and labeling, due to their generally simpler appearance.

Specifically, sans serif fonts have been used to label control panels and surfaces, due to their solid, straightforward readability when presented in uppercase characters, as mentioned above.

Many consider serif fonts to be more readable than sans serif fonts, but it really comes down to the individual typeface and font choice. Many sans serif fonts are exceptionally readable, such as Futura, which is prominently featured on this site, although I don’t always use it for body text.

As a whole, many consider the cleaner nature of sans serif fonts to be more aesthetically pleasing, but this is, of course, subjective and dependent on the individual font variation.

As an inverse to serif fonts, sans serif fonts are often viewed as being more modern, or even futuristic. Futura and similar fonts are frequently found in the sci-fi genre.

Futura is also the font of choice of the auteur director Wes Anderson. Anderson likely uses the font due to the frequency in which you would find it on old electronics, such as radios and televisions, from the 1950’s to the 1970’s.

DISPLAY

Display fonts are a bit of a catch-all for fonts that are too ornate or fine to be readable at small point sizes.

Typically speaking, these fonts work best when displayed at large point sizes, so as to show the finer details of the font. These work well for headers and titles, and arguably advertising (depending on the viewing context).

SCRIPT

Script fonts are those that are meant to emulate human handwriting, or calligraphy.

They don’t work well as readable fonts, at all. If anything, you should treat script fonts in much the same way as display fonts; use them in larger point sizes to increase legibility.

SPACING

Whether using text for aesthetic or practical purposes, spacing is an important consideration. This includes the spatial design of the font, spacing between characters, and spacing between lines of text.

Fonts are classified by the type of spacing that is applied between the characters. The two kinds of spacing are proportional and monospaced.

PROPORTIONAL

The vast majority of typefaces are proportional. This roughly means that letters take up as much space as they need to, side-by-side.

The letters A and/or W will take up much more room than the letter I, for instance.

MONOSPACE

Some fonts are monospaced, meaning that each character takes up the same width as every other character. In these fonts, characters are specifically designed in a way to fit the width of the space.

Typewriters traditionally use monospaced fonts, which was necessary because simple typewriters would advance a specific distance after each keystroke, regardless of the character pressed. The typewriter didn’t know which letter you typed, so it needed to advance the same distance after each stroke.

Early computers also exclusively used monospace fonts. While computers nowadays can certainly support proportional fonts, many aspects of computing code are still displayed as monospace fonts, such as when writing HTML or CSS, so as to more easily see whether there are the same number of characters across lines of text, to spot typos, errors, and other anomalies in the code.

The standard typeface of the screenwriting industry continues to be Courier, a monospace font, which you’ll find on any conventionally formatted screenplay.

TRACKING

Whether you are using a proportional or monospaced font, many programs offer you the option to adjust the amount of tracking between the characters.

Tracking is the universal spacing between all characters.

Adjusting the tracking amount to place characters very close or far from one another can create unique aesthetic effects, but done too far in either direction can drastically hurt readability, so keep in mind whether you’re prioritizing readability or aesthetics.

KERNING

Many people use the terms ‘tracking’ and ‘kerning’ interchangeably, but there is a distinction.

Kerning is the process of adjusting the space between individual characters due to the nature of certain pair relationships, which typically cause an undesirable amount of space between characters.

Character pairs like AW would have so much negative space in between the characters that they appeared to have a space between them, if not for kerning being applied automatically by the word processor and/or display. That kerning lets the characters overlap, so as to visually belong together.

When using programs like Photoshop or Illustrator, kerning is applied automatically, but can be manually overridden for certain effects. Some programs are also capable of more advanced kerning by going from an auto setting to something along the lines of ‘optical’, in which the software will analyze the characters as presented and space them in a more optically balanced way.

LEADING

The spacing between lines of text is called leading.

More specifically, leading adjusts the amount of space between your selected text and the text above it, by moving the selected text farther down the screen.

Like most things, leading is a balancing act, and should be adjusted depending on many other factors.

If the leading amount is too small, then the reader might accidentally jump from one line to another as they read, or lose their place when attempting to move from one line to the next.

If the leading amount is too great, then lines feel disconnected from one another, and lack the visual cohesiveness of more closely spaced leading.

Like most things, though, this can be used stylistically.

JUSTIFICATION

Justification is the alignment of text along the left margin, center line, or right margin.

LEFT JUSTIFICATION

The standard. This is the type of justification we’re used to seeing the most.

When there is a new line of text, that line starts along the left margin. The cursor moves out to the right as you type, until there’s no more room on that line, then the cursor returns to the left margin and starts from there again.

CENTER JUSTIFICATION

In center justification, the text is centered along an imaginary line that dissects the page or text.

New lines of text start in the center and work their way out, maintaining the balance and alignment with the center.

While left justification is the most common, we’re pretty used to seeing center justified text in movie scrolls and advertising.

RIGHT JUSTIFICATION

You probably get the picture. Right justification aligns the text along the right margin.

New lines of text start at the right margin, and the line works its way to the left as you type.

We really aren’t used to seeing right justified text, and it’s difficult to read several sequential lines of text this way.

Especially if the lines are of very different lengths.