Things I Know About Type [Field Guide]

HELLO- Things I know about type -

by Prakash Nair

!type 1st

FIELDGUIDE

Intro to typeType personalityClassificationsAnatomyChoosing a typefaceCombining typefacesTypographyWeb & MobileDesigning TypeTools + Resources

Things I’m going to talk about.

– Theory

– Application

I really love your personality

Why is this important?Some of us have been guilty of focusing on decoration and neglecting the details. I’m talking about getting back to good, solid design principles, like well-formed grids and decent measures and incremental leading and appropriately paired typefaces.

Web design is 95% typography...“Oliver ReichensteinInformation Architect (informationarchitect.jp)

+ This is because the web is content and content is type. Type is an equal player in design. It doesn’t matter about your color choices or grid if type becomes an afterthought.

Companies really do care about quality and precision. Bonus points for an Art Director that cares about quality and can effectively sell his visual concept.

Typography is what language looks like.

+ Most people, including some designers think typography is about fonts. Typography is more than that, its expressing language through type choice, placement, composition.

+ When used improperly most people might not notice it, but subconsciously they can feel that something it wrong. If your type is bad the design fails.

+ The right typeface has the power to grab your audience on an emotional level.

+ It can have a lot of personality. Think about keywords during the conceptual/research phase.

Conservative, Strong, Edgy, Exciting, Feminine, Boring, Informal etc.

+And each personality should be in relation to your content. Typography can create or change context as well. It can elevate a message.

+ Dan Mall (Big Spaceship)He takes mathematical measurements from typefaces to design interfaces and UI elements.

+ In this site he designed for Nike, you can see how he uses the type layout has influenced the navigation.

Aa_

Display

Aa_

Text

+ Every typeface has an intended usage. There are two primary categories of types; display and text. Display goes for a stronger personality, elaborate and more expressive shapes, and a more stylish look. Text is designed to be legible at smaller sizes. Usually implies fairly clean, consistent, uncomplicated design features. For example the typeface Chronicle will have Chronicle Regular and Chronicle Display.

Sans Serif

SerifAa_

Old StyleGaramond

Aa Aa

Aa

Aa

Aa Aa

_

TransitionalBaskerville

_

ModernBodoni

_

EgyptianClarendon

_

HumanisticGill Sans

_

TransitionalHelvetica

_

GeometricFutura

Basic Type Classifications

+ 5 basic classifications. Important to know as it will help you decide which typeface to choose in any project.

Old Style - Emulated classical calligraphy and movement of the hand. From 1400s.Transitional & Modern - More abstract and less organic.Modern - Very high contrast in the strokes.Humanistic Sans - Characterized by presence of the hand. Similar to Roman. Organic.Transitional Sans - straight in appearance and less width than Humanistic Sans. Also called “anonymous sans” due to its plain appearance.Geometric Sans - Geometric construction suggesting the use of a compass.

* Notice these are all the same point size, yet some look bigger in appearance.

Aa Aa Aa Aa

This is a Family

_

Roman

_

Italic

_

Semi-Bold

_

Bold

Aa Aa

This is a Super Family*

Aa AaAa AaAa Aa

Aa Aa

AaAa Aa

Aa Aa Aa Aa* But not really.

How to choose a typeface

Choose a category1


+ Choose a type face that you think will match your work. What’s the purpose? Is it a Display face or a text face? Whats the classification? Old Style, Modern, Slab Serif, Sans Serif, Script, Decorative? Serious look? Casual? Decorative?

Choose a category

Consider the medium

1

2


+ Where is this being shown? iPad? Web? Print? Are the delicate serifs going to break if its too small? Is it going to be legible?

Choose a category

Consider the medium

How much text?

1

2

3


+ Whats more important? Readability or aesthetics?

Choose a category

Consider the medium

How much text?

Space

1

2

3

4


+ How much space is required? Two equally sized fonts can have very different widths. You should never try to fit and squeeze a typeface within the medium. The medium should fit the typeface.

Pairing typefaces

DON’T mix two typefaces from the same family

Pairing typefaces

I’m pretty.

I’m pretty too.

+ There is not enough variation to distinguish the two and its sort of a pointless design decision.

DON’T mix two typefaces with a strong personality.

Pairing typefaces

I’m Chuck Norris.

I’m Van fucking Damme.

+ Or else the visual language starts to get noisy and chaotic. Less is more.

DO mix two typefaces with similar proportions.

Pairing typefaces

xxxx+ I like to give each one a different role. There should be a “star of the show” and a hardworking one.

DO mix serif and sans under the same family.

Pairing typefaces

I’m your father.But, I’m older.

+ Check out the families of types containing serif and sans under the same name: This is Fedra Sans and Fedra serif. The only problem: most of these types are actually rooted in a consensus, they are not expressing much. It's cool for a bank report or an informative brochure, but might be weak for a magazine.

How people read

Understanding how people read will help you in making better decisions when setting type. If a typeface is hard to read, the meaning of the text will be lost.

Legibility Can you read it?

+ Legibility is “can you read it?” Legibility refers to a reader’s ability to easily re-cognize letterforms and the word forms built from them. We don’t read by recognizing one letter at a time, but by recognizing the shapes of whole words and phrases.

Readability Do you want to read it?

+ Readability asks “do you want to read it?” Readability is about the comfort with which text can be understood. Text with good readability must also be legible, but more legibility doesn’t make text readable.

I got a dig bick.

You that read wrong.

You read that wrong too.

+ People skim very quickly from one word to the next. So any kind of hindrance will affect your reading. They don’t want to be blown away from the beautiful typeface. They want to connect to the words on an emotional level.

sometimes. Look at me read this super quickly. I never knew I had such super powers!

+ We use peripheral vision to decode whats coming up next. We read ahead about 15 letters at a time, but only get the meaning of that part of the span. Reading music is similar to reading text.

UNIVERSE. RIGHT THIS IS TAKING A WHILE TO READ. WHY ARE YOU SHOUTING?

+ Uppercase is much harder to read since the letter are all the same height and so we don’t recognize the characters as quickly.

Eevn touhgh the wrosd are srcmaelbd, cahnecs are taht you can

raed tihs praagarph aynawy. The order of the ltteers in each word is not vrey ipmrotnat. But the frsit and lsat ltteer msut be in the

rhgit psotitoin. The ohter ltetres can be all mxeid up and you can

sitll raed whtiuot a lot of porbelms. This is bceusae radenig is all aobut atciniptanig the nxet word.

+ Most of you can read this! Fairly quick. You anticipate what’s coming up next. The more previous knowledge you have, the easier it is to interpret.

It will be colder.

+ Here I’m covering the upper half of the word. What the hell is it?

It will be colder.

+ Here the bottom half is covered. But you can read it. That’s because most of the information which defines a character is contained in the upper half.

k erning+ Kerning is the space in between two characters. Usually, the larger the type, the tighter it needs to be kerned.

Optical kerning is set by the program and metric kerning is set by the designer of the typeface. There’s no right way. Kerning also needs to be adjusted if you are using a shitty typeface.

tracking+ Also called letter spacing, tracking is the space between the characters. It’s an overall percentage across the board, whereas kerning is between two characters.

I read ok but I sure could use a little bit more breathing room.

I read perfect. Boy is it good to achieve perfection, its what dreams are made of.

Shi t I got way out of control . I immediate ly regret th is decis ion!

+ Adjust tracking accordingly to achieve readability. Capital letters prefer a little distance from their neighbors. Loosely space italics will looked weird since italics are meant to be placed closely together.

If I get any bigger I will definitely need more breathing room. Not only sideways but also above and below.

I’m much much bigger now. Good thing I have more breathing room. I hope its easier for you to understand me know.

+ Linespacing is also called leading. When the type-size gets bigger, more leading is needed. Also the wider the width of the sentence, the more leading is needed.

+ Another principle to think about is the width of your copy. Notice the insanely long paragraph width here. I don’t wanna read this! It's tiring for your eyes to follow back and forth. Thats one way you develop fatigue.

+ This is much better. Keep the width of your paragraph under 10 words (45-75 characters.) For multiple columns, keep it between 40-50.

Creating arc hyHier

+ Hierarchy is simply the way of organizing elements. A typographic hierarchy organizes the content, emphasizing some elements and de-emphasizing others. Everything on the page cannot be important!

A visual hierarchy helps readers scan a text, knowing where to enter and exit. It gives your designs a flow.

I. Things to Buya. Avocadob. Salsa (spicy)c. Milkd. Paper Towels

Things to Buy Avocado Salsa (spicy) Milk Paper Towels

AvocadoSalsa (spicy)MilkPaper Towels

THINGSTO BUY Avocado

Salsa (spicy)MilkPaper Towels

THINGS TO BUY

+ Emphasizing a word or phrase within a body of text usually requires only one signal. Italic is the standard form of emphasis. There's also boldface, small caps, or a change in color. There are endless ways to create emphasis.

AVOCADOSALSA (SPICY)MILKPAPER TOWELS

THINGS TO BUY

+ So fucking wrong!

[ - ] S p a c e

+ Every design has whitespace (negative space), but the problem is that not every design has enough. Its a very under-utilized element. For those who don’t understand what whitespace is, the following slide will give you an idea of what whitespace is.

+ Let your type breathe. Whitespace is simply the empty space between and around the elements of a design or page layout. Whitespace is made of nothing, but shouldn’t be treated that way. Being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on.

Type on mobile

Reading from a digital screen is about 25% slower than from paper so greater care must be placed when designing for screen to improve reading. Here are some guidelines…

AaLarge x-height

Aa+ The x-height should be at least 2/3 the height of the capital letter. The bigger the counters, the more legible the characters get.

AaAmple stroke contrast

Aa

+ This means the font should not be too thin or too heavy, but somewhere in between. The thin strokes will break at lower sizes.

Not too narrow

MY COUNTERS ARE TINY

+ These typefaces may look great in print or on the web when displayed in large, but they will be hard to read when rendered so much smaller on a mobile screen. Notice you can barely see the counters as is.

Don’t get fancy

I’ f

+ Decorative fonts tend to break the above three rules

Distinctions

I wanna be different like everyone else.

+ Obvious weight and style difference between normal, bold and italic iterations. This creates the best contrast.

The 9 Rules

01

Select the face.

My Nine Rules On Setting Type

+ Select a typeface appropriate for the subject matter and consider the medium.

01

Select the face.02

Grid it.


+ Create a grid for the page/document.

01

Select the face.02

Grid it.

03

Group it.


+ Study the copy and group similar information.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.


+ Next comes contrast which can be achieved through sizing.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.05

Color.


+ Color is also part of hierarchy. Color referring to the visual tone of a mass of text rather than colorin the RGB sense.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.05

Color.

06

Align it.


+ Next comes aligning the info based on the grid. There are endless varieties of possibilities here and I spend most of my time designing this.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.05

Color.

06

Align it.

07

Adjust leading.


+ To achieve readability, I adjust the leading.99% of the time, its never right by default.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.05

Color.

06

Align it.

07

Adjust leading.08

Adjust kerning.


+ Adjust the kerning if needed.

01

Select the face.02

Grid it.

03

Group it.

04

Size matters.05

Color.

06

Align it.

07

Adjust leading.08

Adjust kerning.

09

Read it!


+ Finally, look back and read it. Or give it to someone to read and see if they hiccup.

Court forms Assistance Services; Bankruptcy, Immigration, Evictions, Foreclosure, Divorce, Child

Support, All Civil Matters. Office: 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402

Going through a Divorce, Child Custody, Child Support, Modification, Paternity? We could help you, and not break your budget! Call us, we

could work with you! Take action today, tomorrow may be too late!!! Hablamos Español!!!

Affordable Paralegal Services, don't lose your home!!! I can help!!! I help you with:

Bankruptcy chapter 7 and chapter 13 Evictions for Landlords and for Tenants

Small Claims for all civil matters Patty Perez

818-331-4950

http://www.sfvparalegal.comNOTICES:

The above information is provided for informational purposes only and is intended to be used as a guide prior to consultation with an attorney

familiar with your specific legal situation. We are not engaged in rendering legal advice, and this add is not a substitute for the advice of an

attorney. If you require legal advice, you should seek the services of an attorney. or we can provide you with one. I am not an attorney. I can only

provide self help services at your specific direction.

http://www.sfvparalegal.com/


01 Select the face.-

02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Dear Sarah,


02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Dear John,

Dear Sarah,


02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!


02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Going through a Divorce, Child Custody, Child Support, Modification, Paternity? We could help you, and not break your budget! Call us, we could work with you!

Take action today, tomorrow may be too late!!! Hablamos Español!!!



Small Claims for all civil matters

Court forms Assistance Services; Bankruptcy,

Immigration, Evictions, Foreclosure, Divorce, Child Support, All Civil Matters.

Office: 14536 Roscoe Blvd. Ste #215, Panorama City,

CA 91402

NOTICES: The above information is provided for informational purposes only and is intended to be used as a guide prior to consultation

with an attorney familiar with your specific legal situation. We are not engaged in rendering legal advice, and this add is not a substitute for the advice of an attorney. If you require legal

advice, you should seek the services of an attorney. or we can provide you with one. I am not an attorney. I can only provide

self help services at your specific direction.

Patty Perez

818-331-4950

http://www.sfvparalegal.com




02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Going through a Divorce, Child Custody, Child Support,

Modification, Paternity? We could help you, and not break your budget. Call us, we

could work with you.

Hablamos Español







CA 91402

NOTICES: The above information is provided for informational purposes only and is

intended to be used as a guide prior to consultation with an attorney familiar with your specific legal situation. We are not engaged in rendering legal

advice, and this add is not a substitute for the advice of an attorney. If you require legal advice, you should seek the services of an attorney. or we can

provide you with one. I am not an attorney. I can only provide self help services at your specific direction.

Patty Perez

818-331-4950


Pa Perez Affordable Paralegal Services




02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Going through a Divorce, Child Custody, Child Support,

Modification, Paternity? We could help you, and not break your budget. Call us, we

could work with you.

Hablamos Español







CA 91402

NOTICES: The above information is provided for informational purposes only and is

intended to be used as a guide prior to consultation with an attorney familiar with your specific legal situation. We are not engaged in rendering legal

advice, and this add is not a substitute for the advice of an attorney. If you require legal advice, you should seek the services of an attorney. or we can

provide you with one. I am not an attorney. I can only provide self help services at your specific direction.

Patty Perez

818-331-4950


Pa Perez

Affordable Paralegal Services




02 Grid it.-

03 Group it.-

04 Size matters.-

05 Color it.-

06 Align it.-

07 Adjust leading.-

08 Adjust kerning.-

09 Read it!

Going through a Divorce, Child Custody, Child Support, Modification, Paternity?

Court Forms AssistanceBankruptcyImmigrationEvictionsForeclosureDivorceChild SupportAll Civil Matters BankruptcyEvictionsSmall Claims

The above information is provided for informational purposes only and is intended to be used as a guide prior to consultation with an attorney familiar with your specific legal situation. We are not engaged in rendering legal advice, and this add is not a substitute for the advice of an attorney. If you require legal advice, you should seek the services of an attorney. or we can provide you with one. I am not an attorney. I can only provide self help services at your specific direction.

sfvparalegal.com

Pa Perez Affordable Paralegal Services

(Hablamos Español)

CONTACT

(818) 331 495014536 Roscoe Blvd. Ste #215, Panorama City, CA 91402

SERVICESWe could help you, and not break your budget. Call us, we could work with you.



Designing Type

I love lampCAP HEIGHT

BASELINE

x - HEIGHT

+ These three characteristics sets the rule for any typeface. Think of it as the Document Size/Settings under a program.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

+ For small texts, the counters are usually huge so there is more whitespace, which means a better reading experience.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

+ Ascender is a lowercase character stroke which extends above the x-height

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

TERMINAL

+ Terminals are the shape in which a stroke ends.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

TERMINAL

+ Terminals come in all shapes. These shapes depend on the type classification.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

Serif

TERMINAL

+ Serifs are the feet at the ends of some of the strokes.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

Serif

Bowl

TERMINAL

+ Bowls are the curved stroke which surrounds a counter.

CAP HEIGHT

BASELINE

x - HEIGHT

Counter

Ascender

Serif

Bowl

Descender

TERMINAL

+ Descender is a lowercase character stroke which extends below the x-height

fifi

ff ! stst

→

+ A ligature are two characters joined as a single glyph. They are created for special circumstances to prevent overlapping between the two characters.

+ Theres a lot of optical tricks you have to use in type design. To optically align all characters on a line, they cannot not have exactly the same mathematical height. For example the triangle on this drawing has to be higher than the rectangle. Otherwise, the triangle will look smaller than the rectangle. While creating a typeface, you want all the letters to appear to have the same height.

+ When draw a curve think of riding a car down a curve.It must be graceful.

+ The characters on the top line have a different construct-ion than the characters on the bottom line. The contrast is caused by changing the pressure on the pen, not because of the form of the pen. From this perspective there is no difference between Bodoni and Helvetica. Both have the same construction, only the contrast varies.

+ Much more important than the shapes of the characters, is the rhythm of the type. A typeface with beautiful characters which are badly spaced is extremely hard to read. However, if the shapes of the letters are not that good, but when they are all perfectly spaced, the type will be fairly easy to read. The white spaces inside and in between letters are defining the rhythm much more than the black shapes of the letters.

+ Which x-height to define? Which descender depth? Defining these proportions are essential, and very strongly connected to the purpose of the type. The proportions within a certain typeface influence the way your type will work & look.

+ If you make a light weight and the black weight of one typeface, you'll have to make sure that the black weight has a bigger x-height than the light weight (top line drawing). If this is not the case, the black weight will look optically too small when it's combined with the light weight in a line of text. In display faces this is not the case. The difference should be much smaller.

+ Too many points (nodes) can cause technical problems -e.g. the printer can't print the font anymore. It also makes it much harder to control the shapes of a character. Controlling a curve with 2 points is much easier than 12 points.

Tools and Resources

Tools and Resources

www. Tools Software

Typography Served

Thinking with Type

I Love Typography

Typophile Font Explorer X(Font Management)

FontLab(Type Design)

Liveview

What The Font?

Font Finder(Browser Extension)

VideoJason Santa Maria on Web Typography

Kern me (the kerning game)

Shape type (type design game)

Books

The Elements of Typographic Styleby Robert Bringhurst

Stop Stealing Sheep& Find Out How Type Worksby Erik Spiekermann

Helvetica(Documentary)

http://typographyserved.com

http://typographyserved.com

http://thinkingwithtype.com

http://thinkingwithtype.com

http://ilovetypography.com

http://ilovetypography.com

http://typophile.com/

http://typophile.com/

http://www.myfonts.com/WhatTheFont/

http://www.myfonts.com/WhatTheFont/

http://vimeo.com/34178417




http://type.method.ac

http://type.method.ac

http://shape.method.ac

http://shape.method.ac

Things I Know About Type [Field Guide]

Design

Transcript of Things I Know About Type [Field Guide]