Typography

Crossbar

Now that the website is back up (happy New Year to you as well support staff thanks for the hard work), I wanted to round the year out on a small, but important aspect of typography — crossbars. A crossbar is usually defined as the horizontal stroke of the letters A and H. Sometimes, the crossbars are lumped into a horizontal stroke or an arm. Although few type people use the crossbar to define the T,F,A,H,E, and sometimes the (capital i); type design purists define the crossbar as only the A and H.

crossbars

In addition to those who adhere to the broader definition, there are some who don’t consider the capital i to have crossbars. The capital i in many serif and slab serif faces contain serifs that although mimic short arms, are just the serifs on the vertical stroke. Nonetheless, as technology moved forward and the typewriter was invented and the era of monospaced typefaces began. Type designers, who now had to fit a M and an capital i together on same width metal blocks faced some challenging issues. A solution was to extend those serifs to make arms or to add arms on the top of san serif faces. This solution fixed the unsightly space and allowed the reader’s eye movement to be more fluid. After a few years and due to the popularity of typewriters, people became used to seeing large arms on the capital i and type designers began experimenting with them in their designs. Below is example of the different capital i that appear in typefaces. (monospaced, modern, grotesque, old-style) It is because that adaptation from the original the capital i is not considered is not considered by some to have arms (crossbars).

solutions

From here on in, we will be referring to the crossbar in it’s purest form — only as the horizontal stroke that connects the A and H. Following the rough guide of the typeface’s x-height, the location of the crossbar is dependent on the style of the typeface. Ranging from low x-heights (think art-deco typefaces) to very tall (handwritten and display typefaces) the crossbar usually sits right above the x-height and is slightly thicker than any vertical stroke of that letter. Due to the imperfection of the human eye, the crossbar is never perfectly centered on the x-height. Doing so would cause our eye to see it too low and look slightly of center.

What’s the Point?

  • A crossbar is the horizontal stroke in an A and H
  • Sometimes crossbar is used interchangeably with arm or horizontal stroke.
  • Crossbar in pure form only refer to the A and H
  • Crossbar in a more generalist sense include T,F,A,H,E and sometimes the capital i.
  • The Crossbars (or arms) on the capital i were a result of the a solution for monospaced typefaces.
  • Crossbars usually roughly follow the x-height and are usually slightly higher than the x-height.

Numerals

It’s been too long! But today, we will be talking about numerals and the two different types of numerals.  The two types are called by many different names, but most commonly known as Lining and Old-Style numerals.

Lining Numerals

Lining numerals, also known as tabular, ranging, or uppercase numerals (figures) are the typical numerals we see on a regular basis. These numerals are the same proportions as uppercase characters and share the same widths across the numbers. Lining numerals get their secondary name, tabular numerals, due to their use in spreadsheets and other mathematical purposes.

Lining numerals, function the best when utilizing them in a tabular nature. Adding numbers, spreadsheets, and display numbers (such as addresses, licence plates, or any use in which numbers appear by themselves). Below there are both lining numbers and old-style numerals in two different typefaces. The widths of the lining numerals are uniform and play nicely with each other in a table layout. However, when old-style figures are used, there is an apparent breakdown in readability. Ascenders and descenders overlap, widths are nonuniform and due to their descenders, the eye has trouble following the progression of numbers.

tab-vs-oldnumerals

Old-Style Numerals

After examining the pros of Lining numerals versus old-style, you may be wondering why old-style numerals even exist. Old-style figures are also known by another name, lowercase figures. Where lining numerals fail; old-style thrive — body copy. Lining numerals (also called uppercase) look overbearing in copy just as all CAPITALS LOOK UNSIGHTLY IN PARAGRAPHS OF TEXT. The fix is using old-style figures. Dates, numbers, any use for numbers in a body of copy should be set in old-style numerals. Below is an example of copy where in one paragraph lining numerals are used and the other, old-style.

oldstyle

In the first paragraph, lining or uppercase figures are used and the numerals appear quite large. However, in the second paragraph old-style or lowercase figures are used and blend well with the copy. Just like using words set in all capital letters in body copy, using tabular numerals is a big no-no.

What’s the Point?

Use lining numerals when using all numbers or capital letters and use old-style numerals in body copy

  • Numerals are also called figures
  • Lining Numerals are also called Tabular and Uppercase numerals (or figures)
  • Old-style Numerals are also called Lowercase and Proportional numerals (or figures)
  • Use Lining numerals for spreadsheets and when they are used by themselves.
  • Use Old-style numerals in body copy

Strokes and Stems

Strokes and stems, strokes and stems, gotta have me some strokes and stems. In my type that is… And that is what we will be talking about today. Let us start off talking about stems.

Stem

Stem

In typography, a stem is a vertical, full-length stroke in upright characters (ie. L, H, f, l , h,P, etc.) As long as the vertical stroke reaches it’s appropriate x-height, cap-height, or ascender height, it is considered a stem. When attempting to identify the stem on a particular character, it will help associating the character with a plant. Just as a plant has a stem which the leaves, branches and flowers originate, so does the parts of the letter. For example, the lower case h. The strong vertical line acts as a base in which the shoulder of the h connects to.

Stroke

StrokeStrokes, although oft used as a term to describe a single, uninterrupted line in painting or drawing,in typography a stroke is the main diagonal line in a character. Letters such as: N,M, Z, W, etc all have at least one stroke. The stroke, when present, is always secondary to the main stem. In some stemless letterforms, the stoke is the main structure (ie. A, V, W, Z.)

 

What’s The Point?

A stroke is the main diagonal line in letters and the stem is the main vertical line.

  • Letters such as: h, n, k, l, L, H, K, R, etc have stems.
  • Letters such as: W,Z, N, M, z, x, v, etc have strokes.

 

The Eyes have it.

Like our biological eyes, typographic eyes come in all shapes and sizes and color (think paper color)! In typography, an eye is a special counter reserved for the lowercase e.

eyeThere is something special about the lowercase e and why it gets a special name.

One reason is back in the early days of printing, there were several factors to consider when preparing your design. Poor paper quality, inks, and presses made choosing an appropriate typeface even more important than it is today. It is with that in mind, typesetters would look at the eye (counter) of the to insure that it would be large enough to prevent ink blotting (or filling in).

Even today this is given thought when printing at small sizes and on cheap paper (think newspapers, phone books, and photocopies). In fact, there are several techniques used to prevent that ink fill in modern typography. But, we will talk about that later. So…

What’s the Point

In typography, an eye refers specifically to the counter in the lowercase e

  • It is usually one of the main typographic elements considered when selecting a typeface for a job
  • Typically, the more readable a typeface is, the larger the eye of the e.

Terminals

Now arriving at the Terminal. It is now okay to use approved typographic devices. Terminals, in typography, are the finishing element to a stroke that does not contain a serif.  There are a few different types of terminals such as:  ball (lachrymal), beak, and teardrop. Below is an example of teardrop terminals.

terminals Teardrop Terminals are named so due to their resemblance to actual teardrops (duh, right?) Commonly seen on a,c,f,j,r, and y.

ball-terminal
Ball Terminals, also called Lachrymal Terminals, are named so due to their round terminals.  Found in many modern typefaces (think Bodoni), ball terminals are seen in all the same letters as teardrop terminals.

Finally, Beak Terminals (pictured below) are terminals often found on the uppercase T, E, and L in most serif typefaces. They can also be found on older humanistic typefaces that have sharp calligraphic terminals. Beak terminals are associated with their jaunting, sharp spurs.

beak-terminal

So what’s the Point?

Terminals are a finishing element to a stroke that does not contain a serif

  • Terminals come in 3 flavors: Ball, Beak, and Teardrop
  • Although Beaks are sometimes considered their own entity and not a terminal, most often they are considered one.
  • Look for identifying terminals through a,c,f,j,r, y, E, L, T and you should be able to categorize them as beak, ball, or teardrop.

Counters

It’s been a few weeks since my last post, but I want to get back on top of it, so here we go! Today we are diving right into counters. In typography, counters are the partially or fully enclosed space in a letter. Counters come in all shapes and sizes and, because of that reason, play an important part in legibility.

6picas_counter

Due to the large, open counters that give a typeface a portion of it’s legibility a direct byproduct is usually a taller x-height to accommodate the larger counters. Taller x-heights (usually) result in an overall increase in legibility, thus causing a direct correlation between counters and x-height. Finally because the majority of the letters we read are lowercase, the overall effect is a positive step in gaining better legibility.

Below is an example of a typeface with small counters and a typeface with large counters. When set in body copy, it is easy to see how typefaces with larger counters (therefore larger x-heights) are more legible.

small-and-large-counters

 

What’s the Point?

Counters have a direct impact on x-height and because of that, impact the overall legibility of the typeface.

Counter:  the partially or fully enclosed space in a letter. Examples include a,b,c,d,g,o,p,q.s,A,B,C,D,G,O,P,Q,R, and S.

 

Leading me on…

To the next topic that is! Today we are discussing leading (pronounced led-ing). Leading also known as line spacing gets it’s name from the days of metal type in which typographers would physically insert thin pieces of lead between lines of type to achieve the desired spacing. In digital typesetting, this is done automatically; however, can (and usually should) be adjusted manually for the optimal legibility. The default standard is 120% of the type’s point size. Meaning, if the type is set in 12pt then the leading is 14.4pt. If the type is set in 10pt then the leading is 12pt or in shorthand 10/12.

Leading is measured from baseline to baseline and that extra space is important to let our eyes not only rest, but stay focused on the current line. If the type is set 12/12 (also called set solid) it can be difficult to read.The ascenders and descenders seem to mash together causing our eyes to jump  lines.

12/12

Leading_0001_Layer-2Before auto leading, text blocks were normally spaced with 2 extra points of lead. Whether it was 8/10, or 10/12, or 12/14 the 2 points of space would allow our eyes to stay on the line and provide even color space to the page.

autoWith the advent of digital desktop publishing, software took control of auto leading. Using the spacing standard of 120% of the type’s point size, this formula works well on a large variety of sizes from small to medium sizes.auto As with all automatic type tools, some manual adjustments need to be made (especially at large point sizes.

Finally, type that is set too loosely can be difficult to follow as well. As I am sure most of us were trained in school about double spacing, this is not good for legibility (that trend was for teachers to correct things in between the lines. How it became the standard is beyond me.) It forces the eye to search for the next line and causes a washed out color when set in large bodies of copy.

What’s the Point?

Leading, also known as line spacing, is measured from baseline to baseline and is important to the overall color of the page.

Leading: The distance between the baselines of successive lines of type.

10/12: Shorthand for 10 point type with 12 points of leading.

120%: The digital standard for auto leading. This works well until large point sizes.

 

Points, Picas, and Inches

Awwww, snap. Here we go. What we will be discussing today is the relationship between points, picas, and inches. What are points and picas and how do they relate to inches you ask? Well here we go…

pica-and-pointsTo the left is a 1 inch line. Dividing that line are 72 smaller lines. These are called points. Points are the smallest unit in typography and many people are familiar with them sense they usually select a point size in their word processor (Think 12 point Times New Roman). There are also 6 larger hash marks hanging ragged left. these 6 hash marks are pica marks. Picas (pronounced pie-ka) are also a typographical unit of measurement composed of 12 points. A pica is equal to 12 points and ⅙ of an inch. Thus, 6 picas is equal to 1 inch (and now you know why the site is called 6picas)

So now does that mean if someone sets a title in 72 point type the letters will be 1 inch high? No. As counterintuitive as it sounds, 72 point letters will not be an inch tall. Looking back at the post Typography 101, letters reside in an em square. If the type size is set to 72 points the em square will be 72 points high. Meaning, from the descender to the ascender roughly 72 points or 1 inch. I say roughly because although the type designer lays out the type in the square, it doesn’t necessarily mean he/she used all the space within for their ascender and descender (including the overshoots). 95% of the time; however, the line height of a 72 point typeface will be an inch high. For example, highlighting the em square in the background, one can see where the baseline , cap-height and the descender are in relation to the overall square.em-square-realtion-to-point-size

 So What’s the Point?

Although 72pt is equal to an inch, 72 point letters are not an inch tall, but the line height usually is.

point: The smallest unit of measurement in typography (12 points to a pica or 72 points to an inch) Bonus: The point was invented by Pierre Simon Fournier

pica: (pronounced pie-ka) A unit of measurement corresponding to 12 points or 1/6 of an inch.

 

Typography 101

Welcome to 6picas! As this is the first post and this site is dedicated to learning everything about type, it only makes sense to start at the beginning. Thus we start out learning some of the basics of typeface anatomy…

The Em Square

Every character resides in an imaginary square called an Em Square. An Em Square is an imaginary square container that contains a coordinate system that directly correlates to the point size of the typeface (ie. If the typeface is set in 12pt then the em square will also be 12pt) The square is a direct descendant of the golden(or should I say lead) age of metal type. In metal type, each character sits on what is known as the body. All bodies must be the same height, from the capital M to the lowercase i in order to maintain straight lines. Looking at the metal type below, the individual letters all line up thanks to their body heights being the same.

 

Metal Type Em Square example

Although there are differences in width (the metrics of individual characters in modern typefaces will be discussed later), highlighted by the blue boxes, the heights remain the same.

More Imaginary Lines?!

So every character resides in this imaginary square and within this square there are imaginary lines. Makes sense right? Well, first they aren’t necessarily imaginary, but they are invisible. Altogether these invisible lines make up what is known as the typeface’s metrics. A typeface’s metrics set the parameters such as the height of the capital letters, the lower case, and more. Let’s look at an example of a typeface’s metrics. Below is the word Typography in Adobe Garamond Pro Regular with visible lines representing where the typeface’s metrics(invisible lines) are.

Typography

Starting with the baseline, the baseline is the invisible line where all characters sit. Think of it as the blue line on ruled paper. Next we have the x-height. the x-height is named after the character height of the lowercase x. All lowercase letters are as tall as the x-height (sans overshoots, but that will be discussed later on) Another obvious name is the cap-height, which is the height of the uppercase letters in the given typeface. Finally we get to the ascender and the descender. The Ascender is the height of the lowercase letters that have a portion of their letter reaching above the cap-height such as: b,d,f,h,k, and l. The descender is the portion of the lowercase letters that extend below the baseline such as: g,j,p,q, and y.

So What’s the Point?

All Typefaces are based on an em square that contains metrics which are invisible lines that set the height of all the elements within a typeface.

em Square: An invisible square that contains the coordinate system for a given typeface and point size.

baseline: An invisible line where all characters reside.

x-height: the height of the lowercase x in a given typeface.

cap-height: the height of the capital x in a given typeface.

Descender: the portion of a letter that extends below the baseline.

Ascenders: the portion of a letter that extends above the cap height.