Upload
prakash-nair
View
575
Download
0
Embed Size (px)
DESCRIPTION
Intro to typography.
Citation preview
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
How to choose a typeface
+ 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
How to choose a typeface
+ 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
How to choose a typeface
+ Whats more important? Readability or aesthetics?
Choose a category
Consider the medium
How much text?
Space
1
2
3
4
How to choose a typeface
+ 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.
My Nine Rules On Setting Type
+ Create a grid for the page/document.
01
Select the face.02
Grid it.
03
Group it.
My Nine Rules On Setting Type
+ Study the copy and group similar information.
01
Select the face.02
Grid it.
03
Group it.
04
Size matters.
My Nine Rules On Setting Type
+ Next comes contrast which can be achieved through sizing.
01
Select the face.02
Grid it.
03
Group it.
04
Size matters.05
Color.
My Nine Rules On Setting Type
+ 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.
My Nine Rules On Setting Type
+ 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.
My Nine Rules On Setting Type
+ 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.
My Nine Rules On Setting Type
+ 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!
My Nine Rules On Setting Type
+ 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.
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,
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 John,
Dear Sarah,
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!
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!
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
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
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!
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
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
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
Pa Perez Affordable Paralegal Services
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!
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
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
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
Pa Perez
Affordable Paralegal Services
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!
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.
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!
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.
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!
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)