CSS Typography

Typography Basics with CSS

Adding CSS To Your HTML Page

Inline CSS <p style=”font-family:helvetica,arial,sans-serif;font- size:12px;color:#f00;”>This paragraph has style!</p>

Internal CSS <head> <style type=”text/css”> body { font-family: helvetica, arial, sans-serif; } </style> </head> Add stylesheets in the head section of the xhtml page

External CSS <head> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" /> </head> Link stylesheets with the <link /> tag.

Never use Inline & Internal CSS If you need to change the layout of a website, you will need to change a lot of ﬁles.

Always use External CSS Changes made to this ﬁle “update” the layout of the full website Easier to maintain

HTML Attributes • Deﬁne properties for an element. • Consist of a attribute/value pair • Appear within the element’s start tag.

Attributes for <link> rel="stylesheet" Speciﬁes the relationship of the linked document with the current document.

Attributes for <link> href="css/style.css" speciﬁes the location of a linked document

Attributes for <link> type="text/css" Speciﬁes the MIME type of the linked document

Attributes for <link> media="screen" Used to specify different styles for different media Possible values: screen, tv, projection, handheld, print, braille, aural, all

Attributes for <link> charset="utf-8" Speciﬁes the character encoding of the linked document

Reset CSS Each browser has its own values for margins, line-heights, ... Get rid of the browser default CSS! http://meyerweb.com/eric/tools/css/reset/

CSS Anatomy

CSS Selectors select elements in a HTML document that are affected by a rule set h1 { font-family: Helvetica, Arial, sans-serif; font-size: 36px; }

Declaration Block consists of anything between the curly brackets h1 { font-family: Helvetica, Arial, sans-serif; font-size: 36px; }

Declaration tells a browser how to render an element consists of a property and a value, separated by a colon h1 { font-family: Helvetica, Arial, sans-serif; }

Property aspect of the element to style only one property within each declaration h1 { font-size: 36px; }

Value the exact style you wish to set for the property h1 { color: #f00; }

Styling Type

Font Family font-family: “Helvetica Neue”, Arial, sans-serif; Property: font-family Value: a list of fonts, comma separated Place the family-name within quotes if it contains spaces End the font-stack with a generic family

Font Size font-size: 75%; font-size: 1.5em; Property: font-size Value: sets the size of the font in a chosen unit Possible units: em, ex, px, pt, %, ...

Line Height line-height: 1.4em; Property: line-height Value: sets the line height a chosen unit Possible units: em, ex, px, pt, %, ... Best practice: em & %

Font Weight font-weight: bold; Property: font-weight Value: sets the weight of the font Possible values: normal, bold, bolder, lighter

Font Style font-style: italic; Property: font-style Value: sets the weight of the font Possible values: normal, italic

Text Transform text-transform: uppercase; Property: text-transform Value: controls the capitalization of text Possible values: normal, capitalize, uppercase, lowercase

Letter Spacing letter-spacing: -2px; Property: letter-spacing Value: increases or decreases the space between characters Possible values: normal, any negative of positive number in pixels

Word Spacing word-spacing: 10px; Property: word-spacing Value: increases or decreases the space between words Possible values: normal, any negative of positive number in pixels

Color color: #e84400; Property: color Value: hexadecimal values for Red Green and Blue: #e84400; Pick your colors with Photoshop, Kuler or COLOURLovers

Space Before & After margin-top: 1em; margin-bottom: 1.4em; Property: margin-bottom, margin-top Value: a value in a chosen unit (use em or %)

Text Replacement • Background Images • sIFR • cufón

The Future of Web Typography • @font-face + licensing problems • Typekit

Demo Add CSS to your HTML document Use of the selectors you’ve just learned Kuler and COLOURLovers Typekit: I have 4 Typekit Invitations left, giving them away today!

http://vormplus.be	123
http://www.slideshare.net	6
http://feeds.feedburner.com	1
http://www.linkedin.com	1

CSS Typography

by Vormplus on Oct 05, 2009

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 131

Statistics

CSS Typography Presentation Transcript