Typography

Introduction to Typography Font Collections▪ Serif▪ They have small strokes at the end of the character

strokes▪ Ex: Times New Roman, Georgia, Palatino▪ Often times used for text▪ Some debate about whether to use on-line or not

▪ Sans-serif▪ Do not have small strokes at the end of character strokes▪ Typically used for headers.▪ Some fonts have been made specifically for the Web

Font Collections Monospace▪ Equal spacing between letters▪ Ex: Courier and Monotype

Cursive▪ Looks like cursive handwriting▪ Ex: Comic Sans MS

Fantasy▪ Not in the other families▪ Usually a special, unique style

Fonts You can choose from thousands of fonts but you

need to determine whether your user has that font on their machine▪ Reference:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

▪ You can pay for fonts at TypeKit.com for example.

▪ You can use Google Fonts▪ www.google.com/fonts▪ Tutorial on using Google Fonts▪ http://designshack.net/articles/css/a-beginners-guide-to-using-g

oogle-web-fonts/

▪ Use Photoshop to create headers in many diff fonts and save as image- don't worry about user having that font -See this week's PS tutorial.

Using @font-face Here is a step by step guide: http://sixrevisions.com/css/font-face-guide/And a video featuring Font Squirrelhttp://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

There are other techniques including: Cufon sIFR FLIR

So which technique do I use? If you have money and for professional design

you can pay and use a site like Typekit You can always use the web safe fonts that

come with the machines – free, try to match for MAC and Windows

Photoshop makes great headers and no worries about the user having the fonts because it is an image

Google fonts is pretty easy and free – test! And lastly @font-face has made some

progress and Font Squirrel makes it somewhat better but still complex.

▪ Spend time knowing a small group of serif and sans serif font families. Get to know which font families contrast enough for headers and body text.▪ http://www.w3schools.com/cssref/css_websafe_fonts.asp

▪ Don't just choose willy-nilly or it will look willy-nilly.

Typically you specify a font-family for the bodytag and then override it when necessary▪ body {font-family:Helvetica, Arial, sans-serif;}▪ Goes from specific to ending in general- if browser cannot find

Helvetica or Arial it will use one of its sans-serif fonts ▪ If font-family is two words then use quotes around it

Fonts Font-family property is inherited by all of

the children so it will propagate throughout your document

Sizing of fonts▪ Absolute (points, pixels, inches) or relative

(ems, percentages)▪ Good article on setting font size▪ http://www.maxdesign.com.au/articles/relative/

Fonts Many people recommend using ems or

percentages so that their sizes can easily be adjusted and it’s good for accessibility

Em – is the default size being used by your browser- typically this is 16px▪ You can adjust sizes by varying the multiplier of

the em▪ 1em = 16px, 2em=32px, 1.5em=24px

▪ Ex. body { font-family: helvetica, arial, sans-serif; font-size:1em}

Good article: http://www.sitepoint.com/css-font-sizing-tutorial/

Nested Tags Be careful when using nested tags and font-sizes The calculated font-size is inherited and not the

absolute value If you have an unordered list within a paragraph

and change the font-sizes you may be surprised▪ p {font-size: .8em;}▪ ul{ font-size: .75em;}

▪ If 1em equals 16 px then the p text will be 12.8 and the ul will be 9.6

▪ You can set the font-size property to inherit which will cause it to take on its parent’s size

Here is a site that has a short article on font categories and some history of font usage:

http://dev.opera.com/articles/view/fonts-for-web-design-a-primer/

What would my web page look like with a different font typeface – very nice. TypeWonder▪ http://typewonder.com/

A wonderful tool for experimentation http://www.typetester.org/

Reference Sheet http://speckyboy.com/2008/10/06/css-ty

pography-reference-sheet-get-creative-with-your-headlines/

Other properties font-style▪ Values: normal italic and oblique▪ h3 {font-style:italic;}

font-weight▪ Values: bold, normal▪ h3 {font-weight:bold;}

font-variant▪ Values: small-caps, normal▪ H3 { font-variant:small-caps;}

Font Property Shorthand Must always declare font-size and font-

family Sequence▪ 1 font-weight, font-style, font-variant in any

order then▪ 2 font-size then▪ 3 font-family▪ Ex: p {font:bold italic small-caps .75em

verdana, arial, sans-serif;}

Text properties Text-indent Letter-spacing Word-spacing Text-decoration Text-align Line-height Text-transform Vertical-align

A resource list of articles: http://www.noupe.com/css/css-typography-cont

rast-techniques-tutorials-and-best-practices.html

http://www.papress.com/thinkingwithtype/index.htm

http://webdesignledger.com/resources/12-css-tools-and-tutorials-for-beautiful-web-typography

http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/

http://www.thedesigncubicle.com/2009/11/typography-is-the-backbone-of-good-web-design/

http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web/