font


font-size

p {
  font-size: 2em;
}

What I have to tell you is very important

p {
  font-size: 0.3em;
}

What I have to tell you is not very important

em is a unit of measurement (like a foot or a mile). 2em means "two times bigger than the normal body font" - it will automatically adjust to the default font size of the device someone loads your website on. Something that's 1em will be bigger on a 32 inch iMac than on an iPhone, because the default on a 32 inch iMac is bigger than on an iPhone.

You can also use px:

p {
  font-size: 12px;
}

What I have to tell you is sort of important

px stands for "pixels" - it's a way to measure things absolutely. Something that's 12px on an iPhone will be the same size as on a 32 inch iMac. It's usually better to work in em.

There are also units of pt, cm, in, mm, pc - which you shouldn't use - and %, rem, vh, and vw (which we'll use later for defining the size of boxes).

font-family

p {
  font-family: "Impact";
}

What I have to tell you is very important

There are a lot of web safe fonts to choose from, and even a way to choose almost any font you want, including cool handwriting fonts:

<link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
<style>p{font-family:  'Homemade Apple', cursive;}</style>
<p>Dear Mr. Potter, <br/>You have been accepted into Hogwarts School of Witchcraft and Wizardry! Woohoo! This definitely won't end badly. You're sure to have a grand ol' time and never be in any danger at all.</p>

Dear Mr. Potter,
You have been accepted into Hogwarts School of Witchcraft and Wizardry! Woohoo! This definitely won't end badly. You're sure to have a grand ol' time and never be in any danger at all.

shadows

Text shadows can make text look like it's popping out of the page. They're tricky to edit by hand, so I usually just use a CSS Shadow Generator.

bold, italic, strike, underline

You can fake a <b>, <i>, <s>, or <u> tag with the font-style and text-decoration CSS properties.

There are a few other things you can do with font, but they're usually not as useful.


Challenge

Generate a random essay about your favorite activity and style the font appropriate to the topic.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.