Working with Typography

Adding Color to Text#

Font Properties

Font Family

Font Size

Font Style

Font Weight

Line Height

Shorthand Font Properties

html {
  font: italic bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;}

Text Properties

Text Align

Text Decoration

Text Indent

Text Shadow

Text Transform

Letter Spacing

Word Spacing

Using Web-Safe Fonts

By default there are a few fonts that are pre-installed on every computer, tablet, smart-phone, or other web-browsing-capable device. Because they’ve been installed on every device, we can use these fonts freely within our websites, knowing that no matter what device is browsing our site, the font will render properly. These fonts have become known as “web-safe fonts.” There are only a handful of them, and the safest of the web-safe fonts are listed here:

• Arial

• Courier New, Courier

• Garamond

• Georgia

• Lucida Sans, Lucida Grande, Lucida

• Palatino Linotype

• Tahoma

• Times New Roman, Times

• Trebuchet

• Verdana

  
  

Embedding Web Fonts

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");}body {
  font-family: "Lobster", "Comic Sans", cursive;}