Font

Sometimes you have something to say and you need to say it boldly! Other times you need the emphasis that only italcs can offer. You can specify boldness with font-weight: bold and you can specify italic-ness(?) with font-style: italic. If you want to further manipulate how words appear on the page, you can also specify a special font! For now we're only going to cover the Serif, Sans-Serif, and Monospace style fonts. As you can see, serif fonts have pointer details at the ends of the letters.In comparison, monospace fonts have the same amount of space between each letter. The space between letters is called the kearning. Most of these tutorials were written in a Sans-Serif font (literally meaning without serif). You can specify the font with the font-family property (we'll demonstrate below).

You can change the size of the text that is displayed by using the font-size property. You can specify font-size as a percentage of the default font size, or in size of pixels, specified by px. You can see an example of using different font sizes below.

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Fonts!</title>

    <style>
      .bold-txt{ font-weight: bold }
      .italic-txt{ font-style: italic }
      .serif-txt{ font-family: serif }
      .mono-txt{ font-family: monospace }
      .double-size{ font-size: 200% }
      .forty{ font-size: 40px }
    </style>
  </head>

  <body>
    <p class="bold-txt">Hulk smash!</p>
    <p class="italic-txt">But why does Hulk smash?</p>
    <p class="serif-txt">Have you ever seen a serif seraph?</p>
    <p class="mono-txt">There should be a front for U2 called Bonospace!</p>
    <p class="double-size">I'm double stuffed!</p>
    <p class="forty">So, this is forty?</p>
  </body>
</html>

Result

Hulk smash!

But why does Hulk smash?

Have you ever seen a serif seraph?

There should be a font for U2 called Bonospace!

I'm double stuffed!

So, this is forty?

HTML Tutorials

Font

Code

Result