Jake Selvidio
Art & Design Instructor

gd260 « Web Design 1 » CSS & Type

CSS&
  Type

CSS Font Properties


color
Set your font color using a variety of formats. I'll cover most of these in class.
See Example » 
h1{
color: #CCC;
}
font-family
Declare a "font stack" to provide browsers with some fallback fonts
See Example » 
p{
font-family: Helvetica, Arial, san-serif;
}
font-size
Font-size can be set a few different ways. The most common units are px, em, and %
See Example » 
h1{
font-size: 18px;
}
font-style
There are three possible values: normal, italic, or bold
See Example » 
blockquote{
font-style: italic;
}
font-variant
Specifies whether or not a text should be displayed in a small-caps font
See Example » 
h3{
font-variant: small-caps;
}
line-height
Sets the line height
See Example » 
h1{
font-size: 18px;
line-height: 24px;
}
letter-spacing
Sets the space between text characters
See Example » 
h1{
letter-spacing: 2px;
}
text-indent
Indents the first line of a text block
See Example » 
p{
text-indent: 2em;
}
text-decoration
Adds or removes decoration - used mostly for underlines
See Example » 
a:link, a:visited{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
text-align
Sets text alignment
See Example » 

                    h1, h2, h3 {
text-align: center;
}
p.news{
text-align: justify;
}
.sidebar{
text-align: right;
}
text-transform
Specifies uppercase, lowercase or capitalized text
See Example » 
h3{
text-transform: uppercase;
}

Setting a Font Base

It is common practice to use the body rule to set our font base.
What we set here will become our fall-back or default text styling.
We will be making additional font declarations for other elements as we go.

body{
font: normal 12px/150% helvetica,arial,san-serif;
}

Font Shorthand

As seen above, several font properties can be condensed into one using shorthand.
In the diagram below, you can see that we can write one property to declare values for:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

It isn't always necessary to include all of these properties – several are optional.
See the examples below for an extended shorthand and a simple shorthand.

Diagram of font shorthand
*line-height is also optional with this method

resources

Copyright © 2014 Jake Selvidio. All rights reserved.