Miglė PadegimaitėA Crash Course in Typography

@Arts Campus Library22/01/2014

Why it matters?The brand is the unique personality (Apple - Myriad).

Typefaces are artifacts that can be aesthetically pleasing and functional at the same time (headlines/body text).

People can be affected by good typography without being actively aware of it (like films).

Increased reading speed and reduced eye fatigue.

* Degree posters, branding products, CVs, portfolio, reports, infographics, motion typography.

Classifying typeThere are a number of different ways to classify typefaces and type families. The most common classifications are by technical style: serif, sans-serif, script, display, and so on.

Typefaces are also classified by other technical specifications, such as proportional vs. monospaced, or by more fluid and interpretational definitions, such as the mood they create.

Serif

Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters within the face.

Serif typefaces are most often used for body copy in print documents, as well as for both body text and headlines online.

The readability of serifs online has been debated, and some designers prefer not to use serifs for large blocks of copy.

10 of the best serif fonts

1. Caslon2. Garamond3. Baskerville4. Bembo5. Bodoni6. Clarendon7. Rockwell8. Georgia9. Palatino10. Lucida

Serif sub-types

1. Old Style serifs (Adobe Jenson and Centaur).

2. Transitional serifs - the most common(Times New Roman, Baskerville, Georgia).

3. Modern serifs (Didot and Bodoni).

4. Slab serifs (American Typewriter).

Sans-serif

Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more *modern in appearance than serifs. The first sans-serifs were created in the late 18th century.

Sans-serif sub-types

1. Grotesque. Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk.

These typefaces often have letterforms that are very similar to serif typefaces.

Sans-serif sub-types

2. Neo-grotesque. Include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesques. They have a relatively plain appearance when compared to the grotesques.

Sans-serif sub-types3. Humanist. Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande.

These are more calligraphic than other sans-serif typefaces, and are also the *most legible (hence the popularity of some of them for website body copy).

Sans-serif sub-types4. Geometric. Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail.

*They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule.

Scripts: formalScripts are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual.

Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries.

*They’re common for very elegant and elevated typographical designs, and are unsuitable for body copy.

Scripts: casual

Casual scripts more closely resemble modern handwriting, and date back to the mid-twentieth century. They’re much less formal, often with stronger strokes and a more *brush-like appearance.

Casual scripts include Mistral and Brush Script.

DisplayDisplay typefaces are probably the broadest category and include the most variation.

*The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or other short copy that needs attention drawn to it.

Display typefaces can be formal, or informal, and evoke any kind of mood. They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts.

Proportional vs. Monospaced* In proportional typefaces, the space a character takes up is dependent on the natural width of that character.

An “i” takes up less space than an “m”, for example. Times New Roman is a proportional typeface.

* In monospace typefaces, on the other hand, each character takes up the same amount of space.

Narrower characters simply get a bit more spacing around them to make up for the difference in width. Courier New is one example of a monospace typeface.

*Avoid mixing monospaced fonts with proportional fonts.

MoodThe mood of a typeface is an important part of how it should be used.

* Commonly used moods include formal vs. informal, modern vs. traditional, and light vs. dramatic.

Some typefaces have very distinct moods. For example, Times New Roman is pretty much always going to be a traditional font, which is why it’s so commonly used for business correspondence. Verdana, on the other hand, has a more modern mood.

Some typefaces, like Helvetica, are more transcendent, and can convey almost any mood based on the content and the other typefaces they’re combined with.

StylesThere 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.

The Anatomy of a TypefaceThe 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:

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

2. The meanline 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.

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

The Anatomy of a TypefaceThe image shows three common parts to letterforms:

1. The stem is the main upright of any letter, including the primary diagonal. It’s could be considered the anchor of the character.

2. The bar is any horizontal part, which are sometimes also called arms.

3. The bowl is the curved part of a character that creates an interior empty space. The inside of a bowl is a counter.

The Anatomy of a Typeface

Combining typefaces: contrastWhen 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.

* Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash.

It 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).

Combining typefaces: weightThe 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.

Combining typefaces: structure

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

The structure of a typeface plays a huge role in how it works with other typefaces. 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.

Combining typefaces: styleThe 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.

Combining typefaces: styleStyle 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.

Combining typefaces: hierarchyAs a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest.

* You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

Combining typefaces: classification

* In 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.

This way 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.

Combining typefaces: classification

* 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.

Combining typefaces: colour & texture

When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

* Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

Combining typefaces: 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.

Combining typefaces: mood

The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces.

* Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial.

Customising a font

A nice and easy way of injecting a bit of personality into some typography is to customise the type. The smallest change will have an impact.

* Some of the most used favourites are; shortening descenders, making the cross bar on letter ‘As’ stop short on one side and cutting the corners off letters at an angle.

Ligatures

Ligatures are sometimes considered antiquated, and don’t show up often in web type. They’re not seen much more often in print design, either.

But if your goal is to *create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style.

Ligatures can also improve readability among certain characters, in certain fonts (especially italics and obliques).

Hyphens and DashesHyphens and dashes are two of the most improperly used characters in typography. Hyphens should only be used when hyphenating words. *There are two different kinds of dashes: the en-dash and the em-dash. An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name). An em-dash is wider, roughly the width of the letter “m”.

En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border).

To create an en-dash, just use –. The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses. They’re often used instead of commas to set apart independent clauses or an abrupt change of thought. To create an em-dash, use —.

AmpersandsAmpersands (‘&’) are another special character that are sometimes used in typographic designs. To create an ampersand, just use &.

They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way).

*Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table). Don’t use an ampersand just as an abbreviation for the word “and”.

If using an ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts. Italic ampersands tend to follow the older style, and closely resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”).

Tips and tricks

*It is usually recommended to stick with high quality typefaces you know the names of.

Many free or cheap typefaces are going to be missing important glyphs, and this will kick you later if you don’t take care of this up front. Especially if you are doing some important commercial work.

However, there are some websites that have great collections of free fonts (like fontsquirrel.com, you just need to be selective).

Hanging qoutes

*Hang quotes in the margin of the body of text.

By not doing so a quotation mark that is flush with the text will interrupt the left margin and disrupt the rhythm of the reader. Hanging quotes keeps the left alignment intact and balanced therefore increasing readability.

Length of a line (measure)

The measure is the length of a line of type. To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text.

For optimum readability you want the measure to be between 40-80 characters, including spaces.

* For a single-column design 65 characters is considered ideal.

Paragraph alignment

Range left - the most popular and rightly so.

Range left is easy to read, easy to set and gives a nice, clean left-hand edge for your eye to return to.

* It is good for most of the things, and the only thing to look out for is horrible ragged edges on the right.

Towards the end of the job, start looking at line breaks and tiny words that look like they are hanging off the edge.

Time spent looking at these edges and adjusting them using all of your typographic tricks, like word spacing etc. will give you a smart looking paragraph. There is no point in doing this at the beginning of a job unless you absolutely know that the copy won’t change.

Paragraph alignment

Range rightIt is usually the preserve of *decorative text or a small amount aligning to a logo, on a business card for instance. It isn’t easy to read and your eye has to do gymnastics every time it reaches the end of the line.

CentredCentred text is good for *adverts and posters. Don’t use it for any length of text you would actually like someone to read. It’s fine for headlines or things like photo captions. But for paragraphs, it’s not suitable.

Paragraph alignment

JustifiedA common type of text alignment in print media is “justification”, where the spaces between words are stretched or compressed to align both the left and right ends of each line of text.

*Treat the last line of a paragraph separately. A good way of finishing a column of justified text is to range left last line.

Character and Word SpacingThe space between characters and words can be broken down into a few different areas. The basics are kerning, tracking, and word spacing.

*Kerning.

Is the space around specific characters, is generally done automatically within individual font files. Programs like Photoshop or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical.

*Tracking.One place you’ll always want to use letter spacing (tracking) is between strings of capital letters (includings small caps) and strings of numbers. Set a letter spacing of around .1em between capital letters, small caps, or numbers to improve legibility.

*Word spacing.

It can greatly improve readability if done correctly, as it makes word recognition easier. People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process.

Tips and tricks

* Kern upside down

Kerning upside down is a well-used and tested technique. This enables you to see your letterforms and the space between them without actually reading the words - bringing meaning to them. If you’re doing something fancy with the kerning based on the meaning, it won’t work, but otherwise it’s a well-used and tested technique and one you should try if you’re struggling with kerning character pairs.

Should be used for headings and subheadings only.

Leading

Leading is the space between lines of text and probably one of the more commonly known elements of typography. Leading will greatly effect the readability of your text content. Leading will need to be changed based on the type face, size, weight and measure used.

* Generally stick with about 2-5pt’s larger leading than font size depending on the type face, size, etc. and how it feels reading it.

Read the text

*First read the text and try to find a visual equivalent for its characteristics, mood, atmosphere, and so on, within the fonts.

Always start by choosing a typeface for the body text that’s related to the message of the text and the images, but also to the proportions of the spreads.

The headlines should either support the shapes and impression of the body text – for example, by choosing them from the same family – or be in strong contrast.

Tips and tricks

* Create rhythm and consistency

The best font kerning has good rhythm and consistency. One character sitting next to another should appear rhythmic and balanced. One way of achieving this is to *step back from the monitor and observe the text.

Does the text ‘box’ appear as one equal shade? Or does it appear darker between some characters and lighter between others?

Use a baseline grid

*Establish consistent typographic vertical spacing.

Grids aren’t just for structural layouts. It helps keep the page balanced and proportional throughout your template.

Hyphenation

The difference between “just okay” typography and professional-level typography is usually in the details – like hyphenation. Often overlooked, proper hyphenation is essential for optimum readability and getting your message across.

Five hyphenations in a row is unacceptable

Sprinkle variety

Think of the hierarchy of your page as a conversation at a party with the viewer.

*Make something stand out, and pepper the body text with visual reminders that this is an interesting conversation.

Break up the boring small talk with a visual arrangement, pace and elements that keep us interested.

g

Useful resources

Font Squirrel: www.fontsquirrel.com

Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format.

Useful resources

www.behance.com

Search for custom made fonts, some of them are free!

Notice typography around you

Digital and physical world.

Miglė PadegimaitėA Crash Course in Typography

@Arts Campus Library22/01/2014

THANK YOU!