Typography on the Web

(and keyframes)

Before we start, please download this starter code and open it in a text editor. As we go through these CSS topics, mess around with the code on your machine and test these things out.

font-family, font-size

With CSS, we can assign any font to any div we want. There are a few places to get fonts from:

Our own system fonts:
Imported font files (.ttf, .woff, .otf)
Cloud based services like Google Fonts or Adobe Fonts

We use the font-family attribute to specify the name of the font, and font-size to set the height, and therefore size, of the font.

HTML

CSS

Result

Here's some big monospace type!

Style, Weight

We can change the font's style with font-style and font-weight:

HTML

CSS

Result

I'm tilted and thin!

Size Line Height, Letter Spacing

HTML

CSS

Result

Hey, was geht, ich spreche kein Deutsch, aber ich dachte, es wäre lustig, zu Ihrer Unterhaltung einen langen Satz in einen Übersetzer zu schreiben.

Decoration

text-decoration lets us add an underline and other stuff:

HTML

CSS

Result

I have an underline!

Fun text effects

HTML

CSS

Result

I have a shadow

I have an outline / stroke!

Keyframes!!!!!!

Ok this is not exactly related to typography but its fun: css keyframes give us a way to create an animation, and give it a name. We can use that name to apply it in our CSS rules.

HTML

CSS

@keyframes spin {
  0%, 100% {
     color: white;
     background-color: black;
  }
  50% {
    color: black;
    background-color: white;
  }
}
#example6 {
  padding: 1em;
  display: inline-block;
  font-size: 40px;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-timing-function: linear;
}

@keyframes mistyFlip {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

#example7 {
  background: red;
  padding: 1em;
  display: inline-block;
  font-size: 40px;
  animation: mistyFlip 4s infinite;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  33% {
    transform: rotateX(12deg) rotateY(6deg) rotateZ(11deg);
  }
  66% {
    transform: rotateX(-8deg) rotateY(-5deg) rotateZ(-9deg);
  }
}

#example8 {
  background: green;
  padding: 1em;
  display: inline-block;
  font-size: 40px;
}
#example8:hover {
  color: blue;
  animation: wiggle .3s linear 3;
}

Result

Whoa cool

Weeee!!!

Hover over me please