Home >Design >Typography Fundamentals

Typography Fundamentals

Date post:27-Jan-2015
Category:
View:119 times
Download:2 times
Share this document with a friend
Description:
Typography basics and how to use them on the web.
Transcript:
  • 1. Typography Fundamentals Presented by Steve Hickey fresh tilled soilfresh tilled soilTypography Fundamentals

2. Objective My objectives today are to impart a basic understanding of the fundamental rules of good typography and to show everyone how they fit into user interface and web product design.fresh tilled soilTypography Fundamentals 3. Letterform, Text, Hierarchy & CHoice 01 Typographic building blocksfresh tilled soilTypography Fundamentals 4. Letterform AnatomyligatureterminalBahpfes stemascendercountercrossbarspinefinialbowlserifdescenderfresh tilled soilTypography Fundamentals 5. Letterform Anatomyascender height cap heightBxhy overhangx heightbaselinedescender heightfresh tilled soilTypography Fundamentals 6. Letterform ClassificationAao Aao Aao humanist serif Garamondfresh tilled soiltransitional serif Baskervillemodern serif BodoniTypography Fundamentals 7. Letterform ClassificationAao Aao Aao humanist sans-serif Gill Sansfresh tilled soiltransitional sans-serif Helveticageometric sans-serif FuturaTypography Fundamentals 8. Letterform Punctuation- '' hyphensmart quotesfresh tilled soilen dashThe sentence spanned lines 28 in an unbroken stream onward it swept. Hyphens are En dashes are Em dashes are em dashdumb quotesprimesLook at Donnys pet! An 8 7 tall ostrich! Heres a second line so that I can make a point. Double smart quotes are and Single smart quotes are and Primes are !Nobody likes dumb quotes. Theyre called dumb for a reason.Typography Fundamentals 9. Text Size Size has the greatest effect on readability of text and must be considered carefully. 20px textA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air./* different units for setting type size */ !p { font-size: 1em; } !28px textA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.p { font-size: 100%; } !p { font-size: 16px; } !36px textfresh tilled soilA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.p { font-size: 16pt; }Typography Fundamentals 10. Text Line-Height Line-height is the distance from baseline to baseline in a block of text. 28px text 1em line-heightA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air./* line-height as multiple of text size */ !p { font-size: 1em; line-height: 1.6; }28px text 1.2em line-heightfresh tilled soilA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.Typography Fundamentals 11. Text Measure Measure is calculated in characters or words per line in a paragraph. approx. 60 characters per lineA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air./* width of paragraph set by container */ !.container { width: 66%; } !.container p { approx. 30 characters per linefresh tilled soilA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.font-size: 1em; line-height: 1.6; width: 100%; }Typography Fundamentals 12. Text Alignment Text alignment has multiple options that affect readability. left alignedA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.right alignedA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air./* default is left aligned */ !p.text-align-left { text-align: left; } !p.text-align-right { text-align: right; } ! center alignedA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.justifiedA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.p.text-align-center { text-align: center; } !p.text-align-justified { text-align: justified; }fresh tilled soilTypography Fundamentals 13. Text Tracking Tracking is an adjustment of the space between all characters in a block of text. Anyone who would letterspace the lowercase would shag sheep. text with normal trackingA worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.Frederic Goudy/* all caps and letterspaced headers */ !h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.25em; } text with 10% trackingfresh tilled soilA worker climbs to the top of the crate. The search lig hts are tra ine d on the door. The riflemen throw the bolts on their rifles and crack their stun g uns, sending arcs of current cracking throug h the a ir.Typography Fundamentals 14. Text Kerning Kerning is an adjustment of the space between two characters. un-kerned pairingTyson/* ligatures/kerning in some browsers */ !h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } !/* control spacing with Kerning.JS */ kerned pairingfresh tilled soilTyson!#kern-me { -letter-kern: 1px 1px 0 0 0 1px 0 2px; }Typography Fundamentals 15. Text How To Make It Sing All of these traits must be balanced in a block of text. There are no absolute rules as to what works, but there are guidelines. Font-size:Start around 16px/1em for web type. It needs to be larger than print.Line-Height: Use a multiple of 1.3 to 1.6 times the font size. Measure: Kerning:Larger text makes errors more obvious, requiring custom kerning.Tracking:Use default in the lowercase, space it out a bit in the uppercase.Alignment:fresh tilled soilUse 50 to 75 characters or 12 words per line.Left-aligned, or justified if you have a high level of control.Typography Fundamentals 16. Text How To Make It Sing A good block of text looks grey if you un-focus your eyes a bit.fresh tilled soilTypography Fundamentals 17. Hierarchy Scale Scale differences are the quickest way to create an obvious hierarchy. 28px heading 28px textA Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.body { font-size: 100%; } /* usually 16px */ !p { font-size: 1.75em; } /* 28px @ 100% */ !h1 { 45px heading 28px textfresh tilled soilA Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.font-size: 2.8125em; } /* 45px @ 100% */ !h2 { font-size: 2.625em; } /* 42px @ 100% */Typography Fundamentals 18. Hierarchy Using a Modular Scale A modular scale can help you create a full system of typographic hierarchy.Heading Level 124px @ 1:1.618 29px @ 1:1.61863px headingHeading Level 2generated by http://modularscale.com47px headingHeading Level 339px headingHeading Level 429px headingHeading Level 576px heading24px text 29px line-height! A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.body { font-size: 100%; } /* usually 16px */ !p { font-size: 1.5em; } /* 24px @ 100% */ !h1 { font-size: 4.75em; } /* 76px @ 100% */ !h2 { font-size: 3.9375em; } /* 63px @ 100% */fresh tilled soilTypography Fundamentals 19. Hierarchy Color Color changes are another way to establish a difference in hierarchy. same color as textcontrasting colorfresh tilled soilA Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.p { color: black; } !h1, h2, h3, h4, h5, h6 { color: blue; }A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.Typography Fundamentals 20. Hierarchy Value Changing the value, or relative lightness/ darkness, will set two elements apart. same value as textcontrasting valuefresh tilled soilA Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.p { color: rgb(128, 128, 128); } !h1, h2, h3, h4, h5, h6 { color: rgb(0, 0, 0); }A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riemen throw the bolts on their ries and crack their stun guns, sending arcs of current cracking through the air.Typography Fundamentals 21. Hierarchy Style A diff

Popular Tags:

Click here to load reader

Embed Size (px)
Recommended