Styling Text With CSS
     Font & Text Properties
Applying Fonts
• Single Font Names:
  body {font-family: Verdana;}
• Font Family Keywords:
  body {font-family: serif;}
• ...
Sizing Fonts - Keywords
    Uses font-size property.
    Absolute Keywords
•   Browser computes the font size.
•   Availab...
Sizing Fonts - Keywords
    Absolute Keywords
•   Medium is browser default for font size.
•   Medium is equivalent to abo...
Sizing Fonts - Keywords
    Relative Keywords
•   Only two possible values: larger and smaller.
•   Values are relative to...
Sizing Fonts - Lengths
    Length Values
•   Can be either relative or absolute values.
•   Relative length values are:
  ...
Sizing Fonts - Lengths
    Absolute Length Values
•   Useful primarily when creating print-version
    of web document.
• ...
Sizing Fonts - Percentages

•   Always used relative to keyword or length
    value.
      Ex:
      body {font-size: smal...
Sizing Fonts - Techniques
•   Most common method is to combine
    percentages with either keywords or ems.
•   Set a base...
Font Weight & Style
    Font Weight
•   How bold a font is (or not).
•   Uses font-weight property.
•    Can be set in num...
Font Weight & Style
Font Weight
Only use number values that correspond
directly to known weights:
   400 for normal
   700...
Font Weight & Style
     Font Styles
•    Uses font-style property; alters font face.
•    Values are:
      •   normal - ...
Aligning Text
•   Uses text-align property.
•   Values are:
     •   left - browser default.
     •   center - Useful for ...
Text Decoration
•   Uses text-decoration property.
•   Values are:
     •   none - primarily used to remove
         under...
Line Height
•   Uses line-height property.
•   Sets spacing between lines in a section of
    text.
•   Can be set using l...
Upcoming SlideShare
Loading in...5
×

Styling Text With CSS

3,123

Published on

A quick overview of typographical control using CSS.

Published in: Technology, Art & Photos
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,123
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Styling Text With CSS

  1. 1. Styling Text With CSS Font & Text Properties
  2. 2. Applying Fonts • Single Font Names: body {font-family: Verdana;} • Font Family Keywords: body {font-family: serif;} • Multiple Font Names: body {font-family: Arial, Helvetica,Verdana, san-serif; }
  3. 3. Sizing Fonts - Keywords Uses font-size property. Absolute Keywords • Browser computes the font size. • Available keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Ex. body {font-size: small;}
  4. 4. Sizing Fonts - Keywords Absolute Keywords • Medium is browser default for font size. • Medium is equivalent to about 16 points. • Scaling factor of 1.5 between each keyword. • Scale remains constant irrespective of the physical size the text is rendered in.
  5. 5. Sizing Fonts - Keywords Relative Keywords • Only two possible values: larger and smaller. • Values are relative to the size of parent element. body {font-size: medium;} h1 {font-size: larger;} In the above example, h1's size will increase to the keyword large.
  6. 6. Sizing Fonts - Lengths Length Values • Can be either relative or absolute values. • Relative length values are: • em: relative to the font-size of parent element. • ex: relative to height of letter x in specified font. • px: relative to the resolution of the device.
  7. 7. Sizing Fonts - Lengths Absolute Length Values • Useful primarily when creating print-version of web document. • Absolute length values are: • inches (in) • centimeters (cm) • millimeters (mm)
  8. 8. Sizing Fonts - Percentages • Always used relative to keyword or length value. Ex: body {font-size: small;} h1 {font-size: 150%;}
  9. 9. Sizing Fonts - Techniques • Most common method is to combine percentages with either keywords or ems. • Set a base font size with the body tag, then increase/decrease text size as desired using percentages. (Recommended method). • Base font size of small is recommended (corresponds to about 12 px). • Avoid setting font size in pixels as IE does not scale pixels; users will not be able to increase or decrease font size.
  10. 10. Font Weight & Style Font Weight • How bold a font is (or not). • Uses font-weight property. • Can be set in numeric values from 100-900. • 100 - very light • 900 - darkest • 400 - normal • Can be set in keywords: • normal (corresponds to 400) • bold (equivalent to 700) • bolder and lighter
  11. 11. Font Weight & Style Font Weight Only use number values that correspond directly to known weights: 400 for normal 700 for bold Ex: h1 { font-size: 150%; font-weight: bold; }
  12. 12. Font Weight & Style Font Styles • Uses font-style property; alters font face. • Values are: • normal - default and typically does not need to be set. • oblique - only applied when available on user computers. • italic: most commonly used. Ex h2 {font-size: 130%; font-style: italic;}
  13. 13. Aligning Text • Uses text-align property. • Values are: • left - browser default. • center - Useful for header, captions, etc. Not recommended for body text. • right: most commonly used. • justify: equal space on left and right sides, but spacing can be awkward. Ex h1 {text-align: center;}
  14. 14. Text Decoration • Uses text-decoration property. • Values are: • none - primarily used to remove underlines from links in navigation. • underline: underlines selected text. • overline: places line above selected text. • line-through: Strikethrough. a {text-decoration: none;}
  15. 15. Line Height • Uses line-height property. • Sets spacing between lines in a section of text. • Can be set using length, percentage, number, or em. • Default line height for web pages is around 1.2 em. body {line-height: 1.5;}

×