Ultimate Guide to Typography: Point Size, Upper vs Lower Case, Em and En Dashes, and More

Typography is a core pillar of design, but it‘s often overlooked or misunderstood, especially by developers who may be more focused on code than kerning. However, as a full-stack developer, understanding the intricacies of typography is essential for creating user interfaces and web pages that are not only functional but visually engaging.

In this ultimate guide, we‘ll dive deep into key typography concepts like point size, upper vs lower case, em and en dashes, and much more. Whether you‘re a seasoned designer or a code-focused developer, by the end you‘ll have expert insights to elevate your typography game. Let‘s get started!

Point Size: Typography‘s Foundation

At the foundation of typography is the concept of point size. One point equals 1/72 inch in print media. In digital realms, points refer to the pixel density of a display, with one point usually equaling one pixel at standard (1x) resolution.

Font sizes are measured in points, which indicate the height of the font‘s em square—an invisible box that each character sits inside. The point size also forms the basis for line spacing, known as leading (the distance between baselines of text).

In CSS, we can set font sizes and line heights using various units:

/* Absolute units */
font-size: 12pt; /* 12 point font */
line-height: 18pt; /* 18 points of leading */ 

/* Relative units */
font-size: 1em; /* 1 em = 12pt at base size */
line-height: 1.5; /* line height is 1.5x font size */

Relative units like em and rem have become the go-to for web typography as they allow for flexibility across devices and user settings.

Choosing the right font size is a balancing act. Too small and text becomes illegible; too large and you sacrifice space efficiency. For print, 10-12pt is the standard for body text. On the web, 16px is a good minimum to ensure readability, especially on mobile devices.

Some font size statistics to keep in mind:

• The average font size for web content is 15.9px (Source)
• For every 3pt increase in font size, perceived legibility increases by 10% (Source)
• Larger font sizes (18pt+) can increase reading speed for older adults by 200% (Source)

The Case for Upper and Lower

If you‘ve ever held down the shift key while typing, you‘re already familiar with the distinction between uppercase and lowercase letters. But there‘s more history and nuance there than meets the eye.

The terms originate from manual typesetting, where capital letters were stored in the upper type case and small letters in the lower case for efficiency. But the concept of case in writing systems dates back much further.

Ancient writing systems like Egyptian hieroglyphs or Sumerian cuneiform had no concept of case. It wasn‘t until the 8th century BC that the Greeks developed a rudimentary form of lowercase letters for faster writing. Over time, a bicameral system using both capital and small letters became the norm.

Today, the rules for case usage are defined by each language and writing style. In English, for example, there are several common case styles:

• Sentence case: The first letter of a sentence is capitalized
• Title case: The first letter of major words in titles or headings is capitalized
• All caps: Every letter is capitalized for emphasis (use sparingly!)
• Small caps: Capital letters are used at a smaller size

Using consistent and appropriate case is key for clarity and readability. In one study, simply using title case for headings improved scannability by 9% compared to all lowercase (Source).

Case also took on new significance in the digital age. Many programming languages are case-sensitive, so using the correct capitalization is crucial for functional code. Naming conventions like camelCase (medial capitals) and snake_case (underscores between words) allow for clear separation of words without spaces.

Dashing Through Punctuation

Two of the most commonly confused punctuation marks are the em dash (—) and en dash (–). While they may look like elongated hyphens, they serve distinct purposes hinted at by their names.

The em dash, named for its width equal to the point size of the font (thus one "em" in size), is used to create a strong break or interruption within a sentence. It can replace parentheses, commas, or colons for emphasis.

For example:

• The code—a tangled mess of logic—was in dire need of refactoring.
• "I have an em dash addiction"—Every typography nerd

In contrast, the en dash, measuring half the width of an em dash, is primarily used to indicate a range of values or a relationship between two things.

• January–March 2023
• The New York–London flight

Remembering which dash to use when is made easier by associating their length with their function. Em dashes create a more emphatic pause (hence the longer dash), while en dashes express more equality between the connected items (hence the shorter dash).

In HTML, en and em dashes have dedicated character entities:

• – renders an en dash (–)
• — renders an em dash (—)

Many word processors and design programs also have keyboard shortcuts for inserting them. Consult your software‘s documentation to find them and commit them to muscle memory. Proper dash usage is a hallmark of typography proficiency!

Perfecting Spacing and Positioning

The difference between amateur and pro typography often comes down to fine-tuned spacing. Three key concepts—kerning, tracking, and leading—are essential for perfecting the positioning of type.

Kerning refers to adjusting the space between specific pairs of letters. The goal is to achieve an optically consistent spacing, as certain letter combinations can appear imbalanced with default spacing.

In CSS, kerning can be controlled by the font-kerning property:

p {
  font-kerning: normal;
}

/* Disable kerning */
h1 {
  font-kerning: none; 
}

Tracking, on the other hand, is the uniform adjustment of spacing between all characters in a block of text. Adding tracking (also known as letter-spacing) can improve readability at small sizes, while negative tracking can help fit more text in a tight space.

CSS offers the letter-spacing property for tracking control:

/* Add 0.5px of tracking */
p {
  letter-spacing: 0.5px;
}

/* Negative tracking of -1px */
button {
  letter-spacing: -1px;
}

Finally, leading (pronounced "ledding") is the vertical spacing between lines of text, named for the lead strips used to separate lines in manual typesetting. Appropriate leading depends on factors like line length, font size, and line height.

In CSS, leading can be controlled via the line-height property:

/* Leading equal to 150% of font size */
p {
  line-height: 1.5;
}

/* Absolute leading of 24px */
h1 {
  line-height: 24px;
}

As a rule of thumb, longer line lengths require more leading to maintain readability. A line height of 1.5 is a good starting point for body text.

Some spacing statistics to consider:

• Adding 0.5px of letter-spacing can increase legibility by 5-12% at small sizes (Source)
• Optimal line length for readability is considered to be 50-60 characters per line (Source)
• The most common line height on the web is 1.2 (Source)

Color and Contrast Concerns

Color is a powerful tool for conveying tone and guiding the eye in typography. But with great power comes great responsibility, especially when it comes to accessibility.

Insufficient color contrast is one of the most common accessibility issues on the web. Low contrast text can be difficult or impossible to read for users with visual impairments or color blindness.

The Web Content Accessibility Guidelines (WCAG) recommend the following contrast ratios:

• At least 4.5:1 for normal text
• At least 3:1 for large text (18pt+ or 14pt+ bold)
• At least 7:1 for essential information like form labels

There are many online contrast checkers that can help ensure your typography meets these guidelines, such as WebAIM‘s Contrast Checker.

When using color in typography, it‘s also important to consider its emotional associations and cultural connotations. Red, for example, is often associated with danger or urgency in Western cultures but represents luck and joy in China.

Some color theory tips for typography:

• Use complementary colors (opposites on the color wheel) for high contrast impact
• Analogous colors (adjacent on the color wheel) create harmonious, low contrast combinations
• Monochromatic color schemes (tints and shades of one hue) provide cohesive variety

In general, it‘s best to limit your palette to 2-3 primary colors for clarity and consistency. Overloading a design with too many colors can be visually confusing and detract from your message.

Pairing Typefaces Like a Pro

Choosing fonts is arguably the most fun part of typography, but it can also be daunting with the thousands of options available. While there are no hard and fast rules, there are some guidelines for combining typefaces effectively.

A classic pairing is a serif typeface for headings and a sans-serif for body text, as in this example:

[Image: Serif heading with sans-serif body text]

This combination provides both visual contrast and readability. Serif fonts have a traditional, formal quality suited for titles, while sans-serifs are clean and modern for easy legibility at smaller sizes.

Other tried and true combinations include:

• Two fonts from the same type family (e.g. Helvetica Bold and Regular)
• A display or script font with a simple sans-serif
• A monospaced font (like those used in code editors) with a proportional font

The key is to create contrast while still maintaining cohesion. Avoid pairing fonts that are too similar in style, as they can clash or compete with each other.

Some font pairing tips:

• Limit yourself to 2-3 fonts per project for consistency
• Use font size, weight, and case to create hierarchy
• When in doubt, stick with one font in different weights and sizes
• Test your combinations at various sizes and on different devices

With the advent of variable fonts, which allow for granular control over font properties like weight and width in a single file, the possibilities for typography on the web are more exciting than ever.

Mastering Typography

We‘ve covered a lot of ground in this ultimate guide to typography, from the basics of point size and case to the nuances of kerning and color. But learning typography is a lifelong journey.

The more you train your eye to notice and appreciate good typography in the world around you, the better equipped you‘ll be to make informed typographic choices in your own work.

Some typography experts and resources to follow:

• Typewolf: A curated collection of font recommendations and type inspiration
• Practical Typography: A web-based book on typography best practices by Matthew Butterick
• Hoefler & Co.: A renowned type foundry with informative articles and case studies
• Fonts In Use: An archive of notable typography in the real world

Remember, while there are best practices and principles to follow, typography is ultimately a creative field. Don‘t be afraid to experiment, break the rules, and develop your own signature style.

As legendary typographer Paula Scher said, "Typography is painting with words." So go forth and paint your masterpiece!