We are going to have more than one lesson on font. In the next lesson, I’ll show you how to get more creative fonts and how to choose complementary fonts. First to change the font on a page, you need to select the font you want to change. You can use * to choose everything written on the page, but you may want to have different parts of the page written in different fonts. You may want titles or headings in a different font than paragraphs, for instance.

We can use font-size as our property to change the size of the font! Remember that it is written as one word with a hyphen. Font size takes a number. You can use pixels like this 18px, 12px, etc. You can test out different sizes to see what they look like. Pixels can come out differently on different screen sizes. Realize that people may be looking at your website on a phone or on a TV and every size in between.

I use this notation.

font-size: 1rem

1 rem is the standard size of font set for what browser is displaying your site. I think that 16px is the current standard. I hate when fonts are huge on a page. I’m assuming it’s so that it can be read on a phone. We’ll make our font adjust so that’s not an issue.

You might want to make your h1 heading 3rem and your h2 heading 2rem. Why tell it a size when you can just call it h1? Because then you are in control, not the defaults. You can control better what it looks like across browsers and across devices.

Font-weight is the bold property. You can say font-weight: bold, or you can put in numbers rounded to 100. font-weight:200, font-weight:300, and so on. 500 is the typical bold. Try 900 and see what happens.

Font-style takes the values of normal, italic, or oblique (slanted). You can also use html tags em (for embellish) and strong (for bold) to write what’s between the tags in italics or in bold.

Text-decoration : underline is how we underline a word or phrase. This property also takes the values of overline, underline overline, and line-through. You can also use text-decoration : none to get rid of what’s there.

Play with these. Change the numbers and values and keep checking how it changes the look. Think about when and how you might use each one.

You can watch this lesson online. I forgot to do text-decoration and html tags!