with ADOBE APPLICATIONSGRAPHIC DESIGNFOUNDATION IN

• Introduction to TypographyLESSON 7

Summary Notes

…Typography is, quite simply,the art and technique of arranging type.

WHAT ISTYPOGRAPHY?

Typography is an art form that has been around for hundreds of years.

Words and text are all around us every day in almost everything we do.

In every piece of type you see, somebody has considered how the letters, sentences and paragraphs will look in order for it to be read by us, or make us feel a certain way when we look at it.

Sometimes it is done well, others not.

Often it is us graphic designers who are the ones deciding how it will look, in our brochures, our logos, our websites and so on.

The better we are at this, the more effective our designs will be.

WHY TYPOGRAPHYIS IMPORTANT

And as we all know by now Graphic Design is all about conveying a message.

As we’ve discussed in previous lessons with regard to colour and shape, type also plays a role in the impression of your message.

It gives the viewer an impression before even reading it.

It can appear friendly or aggressive, suggest a traditional or modern approach, can look feminine or masculine, it can look chaotic or calm. So it’s your job to choose a type style that best expresses your message.

Type has a personality and makes an impression. In the same way as colour and shape it can evoke an emotional response. Good type makes a difference!

TYPEFACES V FONTS

Franklin Gothic BookFranklin Gothic MediumFranklin Gothic DemiFranklin Gothic HeavyFranklin Gothic Medium CondensedFranklin Gothic Demi Condensed

TYPEFACE = FONT = Franklin Gothic Book

A typeface is a family of fonts (such as the Franklin Gothic Typeface here, Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc. would be another.)

but a font is one weight or style within a typeface family (such as Franklin Gothic Book).

"A font is what you use, and typeface is what you see."

BASIC FORMS | Serif

SerifSerif – these typefaces are the more traditional ones. They are distinguished by a short line or finishing stroke on the end of character strokes and stems.

Serifs are evident in both capital and lowercase letters. The angles of the Serifs can vary. Their thickness and width can also vary. These may be small details but this all matters when it is set in a size suitable for reading.

BASIC FORMS | Serif

Un-bracketedBracketedTwo more categories of Serifs are Bracketed and Un-bracketed.

Bracketed have a curved angle.

Un-bracketed have a sharp 90O angle.

BASIC FORMS | Serif

Slab SerifA Sub-Category of these again are what are called Slab Serifs, and they are exactly what they sound like.

The difference is their Horizontal strokes are the same width as their Vertical strokes.

BASIC FORMS | Sans-Serif

Sans-SerifSans-serif – as the name suggests, these are distinguished by their lack of any Serifs.

They only became popular in the nineteenth century and are considered modern as a result.

They have no Feet. By their meaning “Sans” means without in French.

TEXT TYPE v DISPLAY TYPEText Type, usually between 8 – 10 points, is designed to be used in large quantities at small sizes, for example most of newspaper and magazine type is Text Type.

It has to be easy to read. Smooth reading is the goal and should seem as effortless as possible when we are reading. Again good typography should nearly go unnoticed.

Text Types share some common characteristics to aid the clarity and smooth readability.• Open Spaces• Tall Body Type in comparison to the Capitals • Rhythmic Repetitive Shapes• Medium Weight

Some of the most popular typefaces still in use today have been around for hundreds of years, because they still work. (Adobe Calson Pro, Baskerville, Adobe Garamond Pro)

Display Type is usually 14 point or larger and is used in small quantities for emphasis and effect.

Display Type is designed to be noticed. There is a vast number available for every possible use from Handwriting to Space Age!

Text Type can function as Display Type, but not the other way around.

Display Type is like the icing on your cake when it comes to design.

TYPE CLASSIFICATION | Serif

OLDSTYLE (15th – 18th Century) –Calson, Sabon, Bembo, Garamond

Low contrast between thick and thin strokes.

Thick Bracketed Serifs.

Long senders and descenders, the parts of the letters that extend above and below the body height.

TRANSITIONAL (bridge between Old-style and Modern, occurred mid-18th century due to advances in printing and font making technology) – Baskerville, Bell, Bulmer, Georgia

Sharper flatter Serifs

Tighter Bracketed Curve

Stress in curved letters is more vertical (show O example with stress axis, imaginary line connecting thinnest parts)

Higher contrast between thick and thin strokes

MODERN (late 18th century) – Didot, Modern No. 20, New Caledonia

Extreme contrast between thick and thin strokes

Ultra-thin, un-bracketed serifs

SLAB SERIF (mid-18th century) – Rockwell, Memphis, Serifa, Vitesse

Used for advertising and signage because of their weight and strong presence.

Serifs are generally un-bracketed or square.

Main characteristic is lack of contrast between strokes. (Thicks and Thins are almost, if not equal weight.)

TYPE CLASSIFICATION | Sans-Serif

Grotesque/Gothic – News Gothic, Helvetica, Univers, Verdana

Slight variations in stroke width

Letters are wide

Rounded letters can be squared off

They are based off actual scripture from the Gothic period in history.

Geometric – Futura, Avant-Garde, Kable, Century Gothic

Based on geometric forms of circle, square and triangle.

Reflect the modernist movement of the 20th

century.

Humanist – Gill Sans, Myriad, Optima, Frutiger

Humanist sans come from the root and attitude of humanist serif fonts.

These typefaces are calligraphic in structure, often with higher stroke contrast than other sans serifs. They have open forms that lead the eye horizontally, making them the best sans serifs for long reading and small text.

WEIGHTS & STYLES Within the majority of typefaces, you’ll find more than one style and/or weight.

Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters:

There are three general styles you’ll find with many typefaces: italic, oblique, and small caps. Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface.

Italic and oblique are often confused or used interchangeably, but are two distinct styles. Oblique type is simply a slanted version of the regular characters.

You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface.

Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms.

UPPERCASE v lowercase

Using Cases (Upper Case, Lower Case)The differences between using uppercases and lowercases. Each conveys a different message.

UppercaseStronger presenceConveys a sense of trustworthiness and authorityCommand more attentionIndicate importance and sometimes formalityThey need more space around them to be comfortable

LowercaseTend to look friendlier, warmer, more personal and informalWork in closer contact and can be more interconnected than uppercase lettersThink of cases as volume, they have distinct personalities, think about what you are trying to convey. Use cases wisely to give the right visual direction to match your message.Using upper and lower case letters can send a warmer, friendlier message.

ANATOMY

The different letterforms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash.

Here are the most basic parts of a typeface:

The image shows the different guidelines that are generally present in a typeface.

The baseline is the invisible line that all the characters sit on.

Rounded letters sometimes sit just a tiny bit under the baseline, and descenders always drop below this line. A given typeface will have a consistent baseline.

The median is the height of most of the lowercase characters within a typeface, and is generally based on the lowercase “x” if there are varying heights among the lowercase characters. This is also where the term “x-height” comes from.

The cap height is the distance between the baseline and the top of uppercase letters like “T”.

SIZE & MEASUREMENT

Type is measured in Points.

In every Inch there are 6 units called Picas.

In every Pica there are 12 Points.

So doing the math, there a 72 points in an Inch.

So Points are tiny measurements!

The Point size is the height of the Body of the piece of type.

The Body Height depends on the tallest Ascender and the lowest Descender in the font.

Within that the X-height can vary, which is why some typefaces that are the same point size, can look quite different.

Kerning is the adjustment of the spaces between two specific letters.

It is different from Tracking which is the adjustment of the spaces between a group of letters.

By kerning our letters, we want the eye to see them as evenly spaced in a way that is optically correct. It's about creating what looks right, not necessarily, what's mechanically correct.

Imagine that the spaces between letters are containers of water. You want every space between two letters to look as if it holds the same amount of water.

Tracking relates to the spacing of all characters and is applied evenly.

Leading describes the vertical space between each line of type.

It's called this because strips of lead were originally used to separate lines of type in the days of metal typesetting.

For legible body text that's comfortable to read, a general rule is that your leading value should be greater than the font size; anywhere from 1.25 to 1.5 times.You can measure leading by obtaining the distance between two baselines.

Measure refers to the length of lines of text in a paragraph or column.

Most people tend to just refer to it as column width thoughMeasure is an important thing to get right in typography as it can be crucial to the readability of the text.

If the measure is too wide the text may be difficult to read as the eye has to move a lot more after each line is read.

If it is too narrow it can also be tiring on the eye to read, as the eye is constantly moving back and forth.

A narrow measure will also lead to a lot of hyphenation.

The most useful way to measure line length is by average characters per line. Measuring in inches or centimetres is less useful because the point size of the font affects the number of characters per inch. Average characters per line works independently of point size.

Aim for an average line length of 45–90 characters, including spaces.

FACTORS FOR COMBINING TYPEMost projects don’t need more than two Typefaces.

When combining Typefaces consider their basic characteristics:

• Similar Historical Period with different features may work well.

• Maybe choose very opposite Typefaces, one traditional and sober, the other, friendly and warm.

• Typefaces with similar Body Height can work well as long as their styles are contrasting.

COMBINING TYPEContrast & MoodWhen combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood.

Effectively combining typefaces is a skill best learned through practice, and trial-and-error.

Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles which we are going to look at.

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

WEIGHT

The weight of a typeface plays a huge role in its appearance.

We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc.

But different typefaces have varying weights to begin with.

Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme.

Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

STYLE & DECORATION

The style of a typeface has a huge impact on how it’s received.

Generally, when working with styles, you’re going to be either using regular or italic styles.

Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing).

Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

CLASSIFICATIONIn general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification.

Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations.

For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together.

To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

STRUCTURE

The structure of a typeface plays a huge role in how it works with other typefaces.

You either need to choose typefaces that have very, very similar structures, or very different structures.

Letterforms that are only a bit similar are going to clash.

Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height).It’s better to go with wildly different structures than structure that’s almost the same but not quite.

EXTREME CONTRAST

Extreme contrast can be a great option if you’re working with display or script typefaces.

In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar.

So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

RECAP5 Rules to become a better Typographer1: Concentrate on how the Body Text looksThe typographic quality of your document is determined largely by how the body text looks.Why? Because there’s more body text than anything else. So start every project by making the body text look good, then worry about the rest.In turn, the appearance of the body text is determined primarily by these four typographic choices:

2: Point Size – 10 -12 PointPoint size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.

3: Line Spacing – 120 – 145% of Point SizeLine spacing is the vertical distance between lines. It should be 120–145% of the point size.

4: Line Length – 45 – 90 characters per lineLine length is the horizontal width of the text block. Line length should be an average of 45–90 char-acters per line (use your word-count function) or 2–3 lowercase alphabets, like so:abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdIn a printed document, this usually means page margins larger than the traditional one inch. On a web page, it usually means not allowing the text to flow to the edges of the browser window.

5: Font Choice – Use Professional FontsAnd finally, font choice. The fastest, easiest, and most visible improvement you can make to your ty-pography is to ignore the fonts that came free with your computer (known as system fonts) and buy a professional font (like my fonts equity and concourse, or others found in font recommendations). A professional font gives you the benefit of a professional designer’s skills without having to hire one.

CONTACT

+353 (0) 1 5360892

graphic.design@shawacademy.com

www.shawacademy.com

facebook.com/shawacademy

twitter.com/shawacademy