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.

 

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.