Typolish: A Guide to Typography by Panhavuth

TYPOLISH A GUIDE TO TYPOGRAPHY

Panhavuth Kret

TYPOLISH

Contents Intro to Typographyâ&#x20AC;

Typography Rules

Type Anatomy

Typeface Classification

Type Family

Combining Typefaces

Size & Scale

Kerning & Tracking

Leading & Alignment

Marking Paragraph & Hierachy

Typolish: A Guide to Typography

Intro to Typography Typefaces are to designers as glass, steel and stone are to architects.

What is typography: Typography is, quite simply, the art and technique of arranging type. Itâ&#x20AC;&#x2122;s central to the work and skills of a designer and is about much more than making the words legible. Choice of typeface and how you make it work with your layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.

Typolish: A Guide to Typography

Font vs Typeface A font is a set of printable or displayable text characters in a specific style, known as a typeface. Today, the terms ‘font’ and ‘typeface’ are used interchangeably, but they are historically different. In brief, a typeface is the design – it’s what you see; a font is how that design is delivered – it’s what you use. Tip: The choosen typeface should reflect content. Stick to one typeface or font family to create harmony in a design, and use italic, bold, and other styles to add hierarchy.

Sans serif typefaces are composed of simple lines

Serif typefaces use small decorative marks to embellish characters and make them easier to read.

Typolish: A Guide to Typography

10 Typography Rules

Build your landmark properly

Being conscious of these rules can improve nearly everything you create that contains a headline or major typographic element. Let’s get started!

Legibility of Fonts

Space to kern

Sans serif typefaces work well for headlines and to set text that is aligned to vertical/horizontal lines. Certain sans serif typefaces which are not very geometrical work well for body copy (i.e. Gill Sans, Optima, Goudy Sans, etc.)

Kerning in Headlines Adjust the space between two particular letters to allow for more consistent negative space.

Body Copy Size Body text is set anywhere from 9-12 points. When you print text, it is usually larger than what it looked like on the screen. So, print out your text before finalizing your layout.

Ideal Column Width

Incorrect

...peaches, apples, and oranges

For single-column pages, 4.25 inches is ideal. For two-column width, columns can be as narrow as 2 inches. Turning on the hyphenation feature can improve word spacing.

Items in A Series Items in a series do not use a comma before the word “and.”

Typolish: A Guide to Typography

If everything is emphasised nothing is

The en dash (–) is slightly wider than

Bold or Italic Use bold and italic as little as possible. They are tools for emphasis. But if every thing is emphasized, then nothing is emphasized. Also, because bold and italic styles are fine for short bits of text, but not for long stretches.

Mind Your En And Em Dashes

the hyphen (-) but narrower than the em dash (—).

An em is a unit of measure equal to the point size that you are using. An em dash is a type of punctuation used to offset clauses in a sentence or to indicate an abrupt change in thought. An en dash is equal to half the length of an em dash. En dashes are used to denote duration (time.)

Lots of ways to draw attention just avoid underline

Avoid Underlined Text This was useful back in the days of the typewriter to draw attention to the text. With digital type and their families, you should not need to use underlined text.

Avoid Letterspacing Lowercase Body Copy Don’t letterspace body copy as it really hampers legibility. Use letterspacing when working with caps. small caps, numbers and display text where looser type spacing may increase legibility.

Ellipsis Character Use the ellipsis character and NOT three periods. You can access the ellipsis by typing Option + : (colon).

Typolish: A Guide to Typography

Type Anatomy What are the contruction materials? Typographic characters have basic component parts. The easiest way we can differentiate characteristics of type designs is by comparing the structure of these components.

Hook

Cap height

A curved, protruding stroke in a terminal. Usually found on a lowercase f. something curved or bent like a hook

The cap height is the distance from the baseline to the top of uppercase letters like "H" and "J."

Stroke The main diagonal portion of a letterform such as in N, M, or Y

Tittle A small distinguishing mark, such as an diacritic on a lowercase i or j. Also known as a Dot.

x height The height of a lower case x or the height of lower case letters.

Cross stroke

Descender

Finial

The horizontal part of a letterform that intersects the vertical part.

The part of a character that extends below the baseline is known as a descender.

usually a somewhat tapered curved end on letters such as the bottom of C or e or the top of a double-storey

Apex

Aperture

Bar

Typolish: A Guide to Typography

Arc of Stem

Arm

Ascender

Hairline

Meanline The meanline falls at the top of many lowercase letters such as "e," "g" and "y." It is also at the curve of letters like "h."

Bowl

Type size

Shoulder

An open or closed circular line that creates an interior space, such as in "e" and "b."

The curve at the beginning of a leg of a character.

Eye The enclosed portion of a lowercase e. Similar to a counter .

Baseline

Two or more letters are joined together to form one glyph or character.

Counter

The baseline is the invisible

A flourish addition line on which characters sit. The open space in a fully or replacing a terminal partly closed area within a letter or serif.

Ear Link Ligature

Stem Loop

Open Counter

Swash

Leg

Tail

Typolish: A Guide to Typography

Typeface Classification From old styles to modern achitectural styles, we continue changing and so does typography.

Grouping typefaces by their features helps us keep them organized, but type classification can be extremely confusing because it’s so subjective. Still, classification teaches us how to look at typefaces through the lenses of form, history, artistic movements, and our colleagues’ ideas.

Humanist (old style)

Geometric

Garamond Based on the carvings of the ancient Romans its contruction feature small ‘feet’ at the end of the letterforms.

Key Moments in Typographic Style Evolution

Slab Serif

Modern

Futura

Rockwell

Lean and clean, these structure were designed for the industrial age. They’re strong and Modern, with no need for fancy serifs.

Heavy serifs structure with minimal or no bracketing. Generally, changes in stroke weight are imperceptible.

Bodoni High and abrupt contrast between thick and thin strokes; Abrupt (unbracketed) hairline (thin) serifs with Small aperture

1452

1469

1495

1501

1557

Gutenberg’s Bible Lertura First Foundry Blackletter

Nicholas Jenson’s Roman First Serif

Gutenberg’s Bible Lertura First Oldstyle Serif

Francesco Griffo’s Italic First Italic

Robert Granjon’s Civifite First Humanist Script

10 Typolish: A Guide to Typography

Blackletter

Display (Decorative)

Blackletter686 BT

Transitional

Rosewood STD

This style of typeface is recognizable by its dramatic thin and thick strokes. It was used in the Guthenburg Bible, one of the first books printed in Europe.

Script

Largest and most diverse. Rarely used for lengthy blocks of text, but popular for signage, headlines and similar situations where a strong typographic statement is desired. They frequently reflect an aspect of culture

1682

1784

1816

1817

Nicolas Kis’ Roman First Transitional Serif

Firmin Didot’s Roman First Modern Serif

William Calson IV’s Sans Serif First Sans Serif

Figgin’s Antique Roman First Slab Serif

Mynia Script

Baskerville Old Face

Based upon the varied and often fluid stroke created by handwriting. They are organized into highly regular formal types similar to cursive writing and looser, more casual scripts.

Sharp & high contrast (thick & thin lines), considered shocking at the time.

1953 Mistral First Informal Script

1957

1984

Helvetica Most used Sans Serif

Chicago First Font for Apple

Typolish: A Guide to Typography 11

Typeface Family Sydney has 6 sisters, San Francisco, Nagoya, Wellington, Portmouth, Guangzhou, and Florence. They tie and belong together for better. Open Sans family

Styles

Regular

Nagoya Italic

Wellington Condense

Portmouth Guangzhou Florence Bold

Bold Italic

Weights

Sydney

Condense bold

Widths

Type family A type family is a collection of related typefaces which share common design traits and a common name. A type style means any given variant of this coordinated design and is the equivalent of a typeface.

12 Typolish: A Guide to Typography

Traditional Family

The traditional type family includes roman, italic, sans bold, and small cap styles. Modern families can break the mold and include other styles.

Extended Family

Extended families Consist of traditional types and can branch out to include black, extended and condensed styles,

Superfamily

Superfamily consists of dozens of related fonts in multiple weights and/or widths, often with both sans-serif and serif versions.

Combining Typefaces Rules of thumb for combining typefaces

Sans serif with a serif Don’t create undue attention to the personality of each font

Avoid similar classifications in different typeface families create discord

Keep it simple and try just two typefaces Less is more

4 5

Assign distinct hierarchy Use point sizes, weights, or colour from most to least important information Don’t mix moods Unintended tension could createunwanted contrasting or conflicting elements between different typefaces

Heading

Create a variety of typographic colours (the total effect of font weight, size, width, leading, kerning, and several other factors)

Garamond Bold Berthold Baskerville Medium

*Tip: to see typographic colours, squint until you can’t read it anymore but can still see the text in terms of its tonal value Futura mix moods of typefaces and Baskerville Old Face create unintended tension (which describes unwanted contrasting or conflicting elements between different typefaces)

Modern heading

Wide Ext | Extended

Typolish: A Guide to Typography 13

Size & Scale The more bigger the building the better for a city but not in typography. We can have it all, just not at the same time. What are points? The point system is the standard unit of measurement for type. Since each size of a typeface had to be cut individually, point size was determined by the distance from the height of the tallest ascender to the tip of the longest descender, plus a wee bit more.

Choosing a point size Because point size doesn’t tell you everything about how big a particular typeface will actually look, select type size optically. That is, let your eye guide you, not the numerical value of the font.

Point size in print It’s not the most comfortable size for reading. Nearly every book, news paper, and magazine is set smaller than 12 point.

Point size in web Recommend body text of 15–25 pixels. we typically read screens from further away and screen fonts are rendered with a relatively small number of pixels, so each extra row of pixels improves the quality.

14 Typolish: A Guide to Typography

Metropolis

Open Sans 11 pts

Sydney elbourne Adelaide Titillium Web 80 pts

Open Sans 80 pts

City

Gill Sans MT 80 pts

Open Sans 30 pts

Typolish: A Guide to Typography 15

Kerning & Tracking

Sidewalks, driveways, and alleys, these ordinary features have important architectural impact on pysical appearance of the city, as space between letters in typography.

Kerning Kerning is a term used in the design world to indicate adjusting of the space between letters in a typeface, to make them visually spaced correctly. kerning is a very important part of a good designerâ&#x20AC;&#x2122;s, job and it might be what separates a mediocre design from a great one.

Tracking Tracking is the adjustment of space for groups of letters and entire blocks of text. Use tracking to change the overall appearance and readability of the text, making it more open and airy or more dense.

16 Typolish: A Guide to Typography

kerning the spacing between two specific letters.

Apartment Apartment Without kerning (It looks a bit awkward and unfinished)

Optical and Manual Kerning (It looks visually even.)

Kerning tips • • • •

Don’t trust the software Don’t kern before you decide on a font Watch word spacing Kern upside down

Headlines and Logos Designers most commonly apply tracking and kerning to headlines and logos. As text gets bigger, the space between letters expands, and some designers use tracking to diminish overall spacing in large-scale text. Loose or open tracking is commonly applied to capitals and small capitals, which appear more regal standing slightly apart.

Leading

Block

Negative tracking (Tracking -100)

Normal tracking (Tracking 0)

Positive tracking (Tracking +100)

Ametropolisisalargecityorconurbationwhichisasignificanteconomic,political,andculturalcenterforacountryor region,andanimportanthubforregionalorinternational connections,commerce,andcommunications.

A metropolis is a large city or conurbation which is a significant economic, political, and cultural center for a country or region, and an important hub for regional or international connections, commerce, and communications.

A m e t r o p o l i s i s a l a r g e c i t y o r c o n u rbation which is a significant economic, political, and cultural center for a countr y or region, and an impor tant hub for regional or international connections, commerce, and communications.

ThetermisGreekandmeansthe“mothercity”ofacolony (intheancientsense),thatis,thecitywhichsentoutsettlers. Thiswaslatergeneralizedtoacityregardedasacenterofa specifiedactivity,oranylarge,importantcityinanation.

The term is Greek and means the “mother city” of a colony (in the ancient sense), that is, the city which sent out settlers. This was later generalized to a city regarded as a center of a specified activity, or any large, important city in a nation.

The term is Greek and means the “mother cit y ” of a colony (in the ancient sense), that is, the cit y which sent out settlers. This was later generalized to a cit y regarded as a center o f a s p e c i f i e d a c t i v i t y, o r a n y l a r g e , important city in a nation.

Typolish: A Guide to Typography 17

Leading & Alignment

A well aligned and well spaced city has strong hierachy and is easy on the eyes. Likewise, good typography needs appropriate leading and alignment.

Leading The distance from the baseline of one line of type to another is called line spacing. It is also called leading, in reference to the strips of lead used to separate lines of metal type. Designers play with line spacing in order to create distinctive typographic arrangements.

Leaning Variations A big city belonging to a larger urban agglomeration, but which is not the core of that agglomeration, is not generally considered a metropolis but a part of it. The plural of the word is most commonly metropolises. 8/8 Minion Pro

A big city belonging to a larger urban agglomeration, but which is not the core of that agglomeration, is not generally considered a metropolis but a part of it. The plural of the word is most commonly metropolises.

A big city belonging to a larger urban

8/9.6 (auto) Minion Pro

commonly metropolises.

agglomeration, but which is not the core of that agglomeration, is not generally considered a metropolis but a part of it. The plural of the word is most

8/14 Minion Pro

Alignment Choosing to align text in justified, centered, or ragged columns is a fundamental typographic act. Each mode of alignment carries unique formal qualities, cultural associations, and aesthetic risks.

18 Typolish: A Guide to Typography

Flush Left

Flush Right

Centered

Justify

Type purists prefer this default for a good reason: itâ&#x20AC;&#x2122;s the easiest to read because we read it most often.

A nice break from the norm, but a bit hard to read; should only be used for small captions or special callouts.

Handy for prim, poetic passages. Not meant for large amounts of text. Perfect when things get formal.

A crisp, handsome look, but can lead to awkward hyphens and rivers (white gaps running through the text.)

Centered Flush Left

Flush Right

Typolish: A Guide to Typography 19

Marking Paragraphs

An iconic building is a landmark in a city. It gives people a starting point of where to look first.

Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content of paragraphs in distinctive ways. Indent & Line break

Line break & line spacing

Outdent & Line break

Just symbol

To create an elegant economy of signals, try using no more than three cues for each level or break in a document.

Hierachy

Bold Italic Underline

Size

CAPS Colour 20 Typolish: A Guide to Typography

Emphasizing a word or phrase within a body of text usually requires only one signal. Italic is the standard form of emphasis. There are many alternatives, however, including boldface, small caps, or a change in color. Donâ&#x20AC;&#x2122;t use too many signals. Effective hierarchy gets people to look where you want them to look, when you want them to look there. Without it the reader is left confused and frustrated.

Typolish: A Guide to Typography 21

Bibliography Construction sources and materials

Page 4 and 5 • www designschool.canva.com/blog/typography-tutorial/ • www.thinkingwithtype.com/

Page 6 and 7 • www speckyboy.com/2013/06/13/the-principles-oftypography-back-to-basics-2/ • www typophile.com/files/typography_rules.pdf

Page 8 and 9 • www.typographydeconstructed.com/ • graphicdesign.about.com/od/typographyfonts/tp/letter_ anatomy.htm • www.typographydeconstructed.com/category/anatomyof-type/ • www speckyboy.com/2013/06/13/the-principles-oftypography-back-to-basics-2/

Page 10 and 11 • blogs.brighton.ac.uk/sianheather/files/2015/05/ Typography-A3-21a72tn.jpg • gist.github.com/waldyrious/943e5db38d241fea6e1b • ilovetypography.com/2008/05/30/a-brief-history-oftype-part-4/ • www.1001fonts.com/script-fonts.html

Page 12 and 13

22 Typolish: A Guide to Typography

• http://www.thinkingwithtype.com/ contents/letter/#Type_Classification • http://fontfeed.com/archives/stylesweights-widths-it%E2%80%99s-all-in-thetype-family/

Page 14 and 15 • https://www.fonts.com/content/learning/ fyti/typographic-tips/type-sizes

Page 16 and 17 • https://www.nuvonium.com/blog/view/theimportance-of-kerning-type • http://www.thinkingwithtype.com/ contents/text/#Tracking

Page 18 and 19 • http://www.thinkingwithtype.com/ contents/text/#Line_Spacing

Page 20 and 21 • http://www.thinkingwithtype.com/ contents/text/#Marking_Paragraphs • Meet your Type: a field guide to love & typography from http://www. lepoidevinmerge.com/meet-your-type-afield-guide-to-typography

Typolish: A Guide to Typography 23

TYPOLISH A GUIDE TO TYPOGRAPHY