FIELD                                                    GUIDEHELLOtype   1st   - Things I know about type -              ...
Things I’m going to talk about.– Theory        Intro to type                Type personality                Classifications...
I really love yourpersonality         Why is this important?         Some of us have been guilty of focusing on         de...
“Web design is 95% typography...                Oliver Reichenstein                Information Architect (informationarchi...
Typographyis what languagelooks like.+Most people, including some designers thinktypography is about fonts. Typography is ...
+When used improperly most people might notnotice it, but subconsciously they can feel thatsomething it wrong. If your typ...
+The right typeface has the power to grabyour audience on an emotional level.
+It can have a lot of personality. Think about keywordsduring the conceptual/research phase.Conservative, Strong, Edgy, Ex...
+And each personality should be in relation toyour content. Typography can create or changecontext as well. It can elevate...
+Dan Mall (Big Spaceship)He takes mathematical measurements fromtypefaces to design interfaces and UI elements.
+In this site he designed for Nike, you can see how heuses the type layout has influenced the navigation.
Aa Aa_Display             _             Text          +          Every typeface has an intended usage. There are two prima...
Basic Type ClassificationsAa SerifAa Aa_    AaOld Style             _             Transitional                            ...
This is a FamilyAa_        Aa        _                       Aa                       _                                   ...
This is a Super Family*Aa Aa Aa Aa Aa AaAa Aa Aa Aa Aa AaAa Aa Aa Aa Aa                              * But not really.
How to choosea typeface
How to choosea typeface  1   Choose a category             +             Choose a type face that you think will match your...
How to choosea typeface  1   Choose a category  2   Consider the medium             +             Where is this being show...
How to choosea typeface  1   Choose a category  2   Consider the medium  3   How much text?                          +    ...
How to choosea typeface  1   Choose a category  2   Consider the medium  3   How much text?                          +  4 ...
Pairing typefaces
Pairing typefaces     DON’T mix two typefaces from the same familyI’m               I’mpretty.           pretty too.      ...
Pairing typefaces       DON’T mix two typefaces with a strong personality.I’m Chuck            I’m Van fuckingNorris.     ...
Pairing typefaces  DO mix two typefaces with similar proportions.x x                                            x         ...
Pairing typefacesDO mix serif and sans under the same family.I’m your father.But, I’m older.              +              C...
How people read       Understanding how people read will help you       in making better decisions when setting type.     ...
Legibility   Can you read it?             +             Legibility is “can you read it?”             Legibility refers to ...
Readability   Do you want to read it?              +              Readability asks “do you want to read it?”              ...
I got a dig bick. You that read wrong.                               +                               People skim very quic...
times. Look at me read this super quickly. I never knew I had such sup                                   +                ...
ERSE. RIGHT THIS IS TAKING A WHILE TO READ. WHY ARE YOU SHOU                              +                              U...
Eevn touhgh the wrosd are srcmaelbd, cahnecs are taht you canraed tihs praagarph aynawy. The order of the ltteers in each ...
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 in...
k erning  +  Kerning is the space in between two characters. Usually,  the larger the type, the tighter it needs to be ker...
tracking    +    Also called letter spacing, tracking is the space between    the characters. It’s an overall percentage a...
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 ...
If I get any bigger I will definitely need morebreathing room. Not only sideways but also aboveand below.                  ...
+Another principle to think about is the width of yourcopy. Notice the insanely long paragraph width here. Idon’t wanna re...
+This is much better. Keep the width of your paragraphunder 10 words (45-75 characters.) For multiple columns,keep it betw...
HierCreating                                   arc hy       +       Hierarchy is simply the way of organizing elements.   ...
A visual hierarchy helps readers scan a text,knowing where to enter and exit. It gives yourdesigns a flow.
I.   Things to Buy       Things to Buy     a. Avocado            Avocado     b. Salsa (spicy)      Salsa (spicy)     c. Mi...
THINGS TO BUYAVOCADOSALSA (SPICY)MILKPAPER TOWELS+So fucking wrong!
[-]Space    +    Every design has whitespace (negative space), but    the problem is that not every design has enough.    ...
+Let your type breathe. Whitespace is simply the emptyspace between and around the elements of a design orpage layout. Whi...
Type on mobile       Reading from a digital screen is about 25%       slower than from paper so greater care must be      ...
Large x-heightAa Aa         +         The x-height should be at least 2/3 the height of the         capital letter. The bi...
Ample stroke contrastAa Aa        +        This means the font should not be too thin or too        heavy, but somewhere i...
Not too narrowMY COUNTERS ARE TINY        +        These typefaces may look great in print or on the        web when displ...
Don’t get fancyI’ f          +         Decorative fonts tend to break the above three rules
DistinctionsI wanna be different likeeveryone else.         +         Obvious weight and style difference between         ...
The 9 Rules
My Nine Rules On Setting Type      01Select the face.                     +                     Select a typeface appropri...
My Nine Rules On Setting Type      01             02Select the face.   Grid it.                       +                   ...
My Nine Rules On Setting Type      01             02                        03Select the face.   Grid it.               Gr...
My Nine Rules On Setting Type      01             02                       03Select the face.   Grid it.               Gro...
My Nine Rules On Setting Type      01             02                          03Select the face.   Grid it.               ...
My Nine Rules On Setting Type      01             02                          03Select the face.   Grid it.               ...
My Nine Rules On Setting Type      01             02                          03Select the face.   Grid it.               ...
My Nine Rules On Setting Type      01                 02                         03Select the face.       Grid it.        ...
My Nine Rules On Setting Type      01                 02                          03Select the face.       Grid it.       ...
Court forms Assistance Services; Bankruptcy,  Immigration, Evictions, Foreclosure, Divorce, Child             Support, All...
01   Select the face.           -02   Grid it.           -03   Group it.           -04   Size matters.           -        ...
01   Select the face.           -02   Grid it.           -03   Group it.           -04   Size matters.           -        ...
01   Select the face.           -02   Grid it.           -03   Group it.           -04   Size matters.           -05   Col...
01   Select the face.                                                                                 Going through a Divo...
Pa Perez                                                                                       Affordable Paralegal Servic...
Pa Perez                                                                                       Affordable Paralegal Servic...
Pa Perez                                                         Affordable Paralegal Services01   Select the face.       ...
Pa Perez                                                         Affordable Paralegal Services01   Select the face.       ...
Pa Perez                                                         Affordable Paralegal Services01   Select the face.       ...
Designing Type
I love lampCAP HEIGHT                                                         x - HEIGHTBASELINE                    +     ...
CAP HEIGHT                                                              x - HEIGHTBASELINE             Counter            ...
AscenderCAP HEIGHT                                                                       x - HEIGHTBASELINE             Co...
TERMINAL                       AscenderCAP HEIGHT                                                                        x...
TERMINAL                       AscenderCAP HEIGHT                                                                      x -...
TERMINAL                       AscenderCAP HEIGHT                                                                         ...
TERMINAL                       AscenderCAP HEIGHT                                                                       x ...
TERMINAL                       AscenderCAP HEIGHT                                                                       x ...
fi fi →ff   fl       ſt st             +             A ligature are two characters joined as a single glyph.             They ...
+Theres a lot of optical tricks you have to use in typedesign. To optically align all characters on a line, theycannot not...
+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 contrastis cause...
+Much more important than the shapes of the characters, is therhythm of the type. A typeface with beautiful characters whi...
+Which x-height to define? Which descender depth?Defining these proportions are essential, and verystrongly connected to the...
+If you make a light weight and the black weight of onetypeface, youll have to make sure that the black weighthas a bigger...
+Too many points (nodes) can cause technical problems -e.g. the printer cant print the font anymore. It also makesit much ...
Tools andResources
www.                     Tools                           SoftwareTypophile                What The Font?                  ...
Things I Know About Type [Field Guide]
Upcoming SlideShare
Loading in …5
×

Things I Know About Type [Field Guide]

612 views

Published on

Intro to typography.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
612
On SlideShare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Things I Know About Type [Field Guide]

  1. 1. FIELD GUIDEHELLOtype 1st - Things I know about type - ! by Prakash Nair
  2. 2. Things I’m going to talk about.– Theory Intro to type Type personality Classifications– Application Anatomy Choosing a typeface Combining typefaces Typography Web & Mobile Designing Type Tools + Resources
  3. 3. I really love yourpersonality 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.
  4. 4. “Web design is 95% typography... Oliver Reichenstein Information 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.
  5. 5. Typographyis what languagelooks like.+Most people, including some designers thinktypography is about fonts. Typography is more thanthat, its expressing language through type choice,placement, composition.
  6. 6. +When used improperly most people might notnotice it, but subconsciously they can feel thatsomething it wrong. If your type is bad thedesign fails.
  7. 7. +The right typeface has the power to grabyour audience on an emotional level.
  8. 8. +It can have a lot of personality. Think about keywordsduring the conceptual/research phase.Conservative, Strong, Edgy, Exciting, Feminine,Boring, Informal etc.
  9. 9. +And each personality should be in relation toyour content. Typography can create or changecontext as well. It can elevate a message.
  10. 10. +Dan Mall (Big Spaceship)He takes mathematical measurements fromtypefaces to design interfaces and UI elements.
  11. 11. +In this site he designed for Nike, you can see how heuses the type layout has influenced the navigation.
  12. 12. Aa Aa_Display _ 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.
  13. 13. Basic Type ClassificationsAa SerifAa Aa_ AaOld Style _ Transitional _ Modern _ EgyptianGaramond Baskerville Bodoni ClarendonAa Sans + 5 basic classifications. Important to know as it will help Aa Aa you decide which typeface to choose in any project. Old Style - Emulated classical calligraphy and movement of the hand. From 1400s. Serif_ _ _ Transitional & Modern - More abstract and less organic.Humanistic Transitional Geometric Modern - Very high contrast in the strokes. Humanistic Sans - Characterized by presence of the hand.Gill Sans Helvetica Futura 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.
  14. 14. This is a FamilyAa_ Aa _ Aa _ Aa _Roman Italic Semi-Bold Bold
  15. 15. This is a Super Family*Aa Aa Aa Aa Aa AaAa Aa Aa Aa Aa AaAa Aa Aa Aa Aa * But not really.
  16. 16. How to choosea typeface
  17. 17. How to choosea typeface 1 Choose a category + 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?
  18. 18. How to choosea typeface 1 Choose a category 2 Consider the medium + 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?
  19. 19. How to choosea typeface 1 Choose a category 2 Consider the medium 3 How much text? + Whats more important? Readability or aesthetics?
  20. 20. How to choosea typeface 1 Choose a category 2 Consider the medium 3 How much text? + 4 Space 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.
  21. 21. Pairing typefaces
  22. 22. Pairing typefaces DON’T mix two typefaces from the same familyI’m I’mpretty. pretty too. + There is not enough variation to distinguish the two and its sort of a pointless design decision.
  23. 23. Pairing typefaces DON’T mix two typefaces with a strong personality.I’m Chuck I’m Van fuckingNorris. Damme. + Or else the visual language starts to get noisy and chaotic. Less is more.
  24. 24. Pairing typefaces DO mix two typefaces with similar proportions.x x x + I like to give each one a different role. There should be a “star of the show” and a hardworking one.
  25. 25. Pairing typefacesDO mix serif and sans under the same family.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. Its cool for a bank report or an informative brochure, but might be weak for a magazine.
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. I got a dig bick. You that read wrong. + 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 You read that wrong too. to connect to the words on an emotional level.
  30. 30. times. Look at me read this super quickly. I never knew I had such sup + 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.
  31. 31. ERSE. RIGHT THIS IS TAKING A WHILE TO READ. WHY ARE YOU SHOU + Uppercase is much harder to read since the letter are all the same height and so we don’t recognize the characters as quickly.
  32. 32. Eevn touhgh the wrosd are srcmaelbd, cahnecs are taht you canraed tihs praagarph aynawy. The order of the ltteers in each wordis not vrey ipmrotnat. But the frsit and lsat ltteer msut be in therhgit psotitoin. The ohter ltetres can be all mxeid up and you cansitll raed whtiuot a lot of porbelms. This is bceusae radenig is allaobut 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.
  33. 33. It will be colder. + Here I’m covering the upper half of the word. What the hell is it?
  34. 34. 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.
  35. 35. 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.
  36. 36. 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.
  37. 37. 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.S h i t I g o t way o u t o f c o n t ro l . I i m m e d i a t e l y re g re t t h i s d e c i s i o n ! + 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.
  38. 38. If I get any bigger I will definitely need morebreathing room. Not only sideways but also aboveand 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.
  39. 39. +Another principle to think about is the width of yourcopy. Notice the insanely long paragraph width here. Idon’t wanna read this! Its tiring for your eyes to followback and forth. Thats one way you develop fatigue.
  40. 40. +This is much better. Keep the width of your paragraphunder 10 words (45-75 characters.) For multiple columns,keep it between 40-50.
  41. 41. HierCreating arc hy + 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!
  42. 42. A visual hierarchy helps readers scan a text,knowing where to enter and exit. It gives yourdesigns a flow.
  43. 43. I. Things to Buy Things to Buy a. Avocado Avocado b. Salsa (spicy) Salsa (spicy) c. Milk Milk d. Paper Towels Paper Towels THINGS Avocado THINGS TO BUY TO BUY Salsa (spicy) Avocado Milk Salsa (spicy) Paper Towels Milk Paper Towels + Emphasizing a word or phrase within a body of text usually requires only one signal. Italic is the standard form of emphasis. Theres also boldface, small caps, or a change in color. There are endless ways to create emphasis.
  44. 44. THINGS TO BUYAVOCADOSALSA (SPICY)MILKPAPER TOWELS+So fucking wrong!
  45. 45. [-]Space + 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.
  46. 46. +Let your type breathe. Whitespace is simply the emptyspace between and around the elements of a design orpage layout. Whitespace is made of nothing, but shouldn’tbe treated that way. Being generous with your whitespacewill speak volumes about your brand. By using largeamounts of it, you’re saying that your content is far moreimportant than the screen real estate that it rests on.
  47. 47. 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…
  48. 48. Large x-heightAa 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.
  49. 49. Ample stroke contrastAa 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.
  50. 50. Not too narrowMY 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.
  51. 51. Don’t get fancyI’ f  + Decorative fonts tend to break the above three rules
  52. 52. DistinctionsI wanna be different likeeveryone else. + Obvious weight and style difference between normal, bold and italic iterations. This creates the best contrast.
  53. 53. The 9 Rules
  54. 54. My Nine Rules On Setting Type 01Select the face. + Select a typeface appropriate for the subject matter and consider the medium.
  55. 55. My Nine Rules On Setting Type 01 02Select the face. Grid it. + Create a grid for the page/document.
  56. 56. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. + Study the copy and group similar information.
  57. 57. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 Size matters. + Next comes contrast which can be achieved through sizing.
  58. 58. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 05 Size matters. Color. + Color is also part of hierarchy. Color referring to the visual tone of a mass of text rather than color in the RGB sense.
  59. 59. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 05 06 Size matters. Color. 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.
  60. 60. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 05 06 Size matters. Color. Align it. 07Adjust leading. + To achieve readability, I adjust the leading. 99% of the time, its never right by default.
  61. 61. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 05 06 Size matters. Color. Align it. 07 08Adjust leading. Adjust kerning. + Adjust the kerning if needed.
  62. 62. My Nine Rules On Setting Type 01 02 03Select the face. Grid it. Group it. 04 05 06 Size matters. Color. Align it. 07 08 09Adjust leading. Adjust kerning. Read it! + Finally, look back and read it. Or give it to someone to read and see if they hiccup.
  63. 63. 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, dont 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.com 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 inrendering 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
  64. 64. 01 Select the face. -02 Grid it. -03 Group it. -04 Size matters. - Dear Sarah,05 Color it. -06 Align it. -07 Adjust leading. -08 Adjust kerning. -09 Read it!
  65. 65. 01 Select the face. -02 Grid it. -03 Group it. -04 Size matters. - Dear Sarah,05 Color it. -06 Align it. -07 Adjust leading. - Dear John,08 Adjust kerning. -09 Read it!
  66. 66. 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!
  67. 67. 01 Select the face. Going through a Divorce, Child Custody, Child Support, - Modification, Paternity? We could help you, and not Court forms Assistance break your budget! Call us, we could work with you!02 Grid it. Services; Bankruptcy, Immigration, Evictions, Take action today, tomorrow may be too late!!! Hablamos Español!!! Foreclosure, Divorce, Child - Support, All Civil Matters. Affordable Paralegal Services, dont lose your home!!! I03 Group it. can help!!! I help you with: Bankruptcy chapter 7 and chapter 13 - Evictions for Landlords and for Tenants Small Claims for all civil matters04 Size matters. Office: 14536 Roscoe Blvd. - Ste #215, Panorama City, CA 9140205 Color it. - NOTICES: Patty Perez06 Align it. The above information is provided for informational purposes only and is intended to be used as a guide prior to consultation 818-331-4950 with an attorney familiar with your specific legal situation. We are - not engaged in rendering legal advice, and this add is not a http://www.sfvparalegal.com substitute for the advice of an attorney. If you require legal07 Adjust leading. 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. -08 Adjust kerning. -09 Read it!
  68. 68. Pa Perez Affordable Paralegal Services01 Select the face. Going through a Divorce, Child - Custody, Child Support, Court forms Assistance02 Grid it. Services; Bankruptcy, Modification, Paternity? We could help Immigration, Evictions, you, and not break your budget. Call us, we Foreclosure, Divorce, Child - Support, All Civil Matters. could work with you.03 Group it. Hablamos Español - Affordable Paralegal Services, dont lose your home!!! I can help!!! I help you with:04 Size matters. Bankruptcy chapter 7 and chapter 13 Evictions for Landlords and for Tenants Office: 14536 Roscoe Blvd. - Ste #215, Panorama City, CA 91402 Small Claims for all civil matters Patty Perez05 Color it. 818-331-4950 - http://www.sfvparalegal.com06 Align it. 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 can07 Adjust leading. provide you with one. I am not an attorney. I can only provide self help services at your specific direction. -08 Adjust kerning. -09 Read it!
  69. 69. Pa Perez Affordable Paralegal Services01 Select the face. Going through a Divorce, Child - Custody, Child Support, Court forms Assistance02 Grid it. Services; Bankruptcy, Modification, Paternity? We could help Immigration, Evictions, you, and not break your budget. Call us, we Foreclosure, Divorce, Child - Support, All Civil Matters. could work with you.03 Group it. Hablamos Español - Affordable Paralegal Services, dont lose your home!!! I can help!!! I help you with:04 Size matters. Bankruptcy chapter 7 and chapter 13 Evictions for Landlords and for Tenants Office: 14536 Roscoe Blvd. Small Claims for all civil matters - Ste #215, Panorama City, CA 91402 Patty Perez05 Color it. 818-331-4950 - http://www.sfvparalegal.com06 Align it. 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 can07 Adjust leading. provide you with one. I am not an attorney. I can only provide self help services at your specific direction. -08 Adjust kerning. -09 Read it!
  70. 70. Pa Perez Affordable Paralegal Services01 Select the face. -02 Grid it. Going through a Divorce, Child Custody, Child Support, Modification, Paternity? - We could help you, and not break your budget.03 Group it. Call us, we could work with you. SERVICES Court Forms Assistance Bankruptcy - Immigration Evictions Foreclosure04 Size matters. Divorce Child Support CONTACT All Civil Matters - (818) 331 4950 (Hablamos Español) Bankruptcy Evictions 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402 Small Claims05 Color it. -06 Align it. sfvparalegal.com -07 Adjust leading. 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.08 Adjust kerning. -09 Read it!
  71. 71. Pa Perez Affordable Paralegal Services01 Select the face. -02 Grid it. Going through a Divorce, Child Custody, Child Support, Modification, Paternity? - We could help you, and not break your budget. SERVICES03 Group it. Call us, we could work with you. Court Forms Assistance Bankruptcy - Immigration Evictions04 Size matters. Foreclosure CONTACT Divorce - (818) 331 4950 (Hablamos Español) Child Support All Civil Matters05 Color it. 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402 Bankruptcy Evictions - Small Claims06 Align it. sfvparalegal.com -07 Adjust leading. 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 help08 Adjust kerning. services at your specific direction. -09 Read it!
  72. 72. Pa Perez Affordable Paralegal Services01 Select the face. -02 Grid it. Going through a Divorce, Child Custody, Child Support, Modification, Paternity? - We could help you, and not break your budget. SERVICES03 Group it. Call us, we could work with you. Court Forms Assistance Bankruptcy - Immigration Evictions04 Size matters. Foreclosure CONTACT Divorce - (818) 331 4950 (Hablamos Español) Child Support All Civil Matters05 Color it. 14536 Roscoe Blvd. Ste #215, Panorama City, CA 91402 Bankruptcy Evictions - Small Claims06 Align it. sfvparalegal.com -07 Adjust leading. 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 help08 Adjust kerning. services at your specific direction. -09 Read it!
  73. 73. Designing Type
  74. 74. I love lampCAP HEIGHT x - HEIGHTBASELINE + These three characteristics sets the rule for any typeface. Think of it as the Document Size/Settings under a program.
  75. 75. CAP HEIGHT x - HEIGHTBASELINE Counter + For small texts, the counters are usually huge so there is more whitespace, which means a better reading experience.
  76. 76. AscenderCAP HEIGHT x - HEIGHTBASELINE Counter + Ascender is a lowercase character stroke which extends above the x-height
  77. 77. TERMINAL AscenderCAP HEIGHT x - HEIGHTBASELINE Counter + Terminals are the shape in which a stroke ends.
  78. 78. TERMINAL AscenderCAP HEIGHT x - HEIGHTBASELINE Counter + Terminals come in all shapes. These shapes depend on the type classification.
  79. 79. TERMINAL AscenderCAP HEIGHT x - HEIGHTBASELINE Serif Counter + Serifs are the feet at the ends of some of the strokes.
  80. 80. TERMINAL AscenderCAP HEIGHT x - HEIGHTBASELINE Serif Counter Bowl + Bowls are the curved stroke which surrounds a counter.
  81. 81. TERMINAL AscenderCAP HEIGHT x - HEIGHTBASELINE Serif Counter Descender Bowl + Descender is a lowercase character stroke which extends below the x-height
  82. 82. fi fi →ff fl ſt st + A ligature are two characters joined as a single glyph. They are created for special circumstances to prevent overlapping between the two characters.
  83. 83. +Theres a lot of optical tricks you have to use in typedesign. To optically align all characters on a line, theycannot not have exactly the same mathematical height.For example the triangle on this drawing has to be higherthan the rectangle. Otherwise, the triangle will looksmaller than the rectangle. While creating a typeface,you want all the letters to appear to have the same height.
  84. 84. +When draw a curve think of riding a car down a curve.It must be graceful.
  85. 85. +The characters on the top line have a different construct-ion than the characters on the bottom line. The contrastis caused by changing the pressure on the pen, notbecause of the form of the pen. From this perspectivethere is no difference between Bodoni and Helvetica.Both have the same construction, only the contrast varies.
  86. 86. +Much more important than the shapes of the characters, is therhythm of the type. A typeface with beautiful characters which arebadly spaced is extremely hard to read. However, if the shapes ofthe 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 inbetween letters are defining the rhythm much more than the blackshapes of the letters.
  87. 87. +Which x-height to define? Which descender depth?Defining these proportions are essential, and verystrongly connected to the purpose of the type.The proportions within a certain typeface influencethe way your type will work & look.
  88. 88. +If you make a light weight and the black weight of onetypeface, youll have to make sure that the black weighthas a bigger x-height than the light weight (top linedrawing). If this is not the case, the black weight willlook optically too small when its combined with the lightweight in a line of text. In display faces this is not thecase. The difference should be much smaller.
  89. 89. +Too many points (nodes) can cause technical problems -e.g. the printer cant print the font anymore. It also makesit much harder to control the shapes of a character.Controlling a curve with 2 points is much easier than12 points.
  90. 90. Tools andResources
  91. 91. www. Tools SoftwareTypophile What The Font? Font Explorer X (Font Management)I Love Typography Tools and Kern me (the kerning game) FontLab (Type Design)Typography Served Resources Shape type (type design game) LiveviewThinking with Type Font Finder (Browser Extension)Books VideoStop Stealing Sheep Jason Santa Maria on& Find Out How Type Web TypographyWorksby Erik Spiekermann HelveticaThe Elements of (Documentary)Typographic Styleby Robert Bringhurst

×