Styling Fonts

Chapter 15 6 mins

Learning outcomes:

  1. Font weights
  2. Italicising fonts
  3. Underlining text
  4. Font caps
  5. Resizing fonts

Now that we know how to apply fonts to HTML elements we can move on to see how to actually play with these fonts - making them thick or then, curved or underlined or striked-through, small or large and so on.

Thick or thin

You obviously know what is meant by making a font thick or thin, right? A font's weight is a meausre of its amount of thickness. A bold font will have a larger weight and a thin font will have a smaller weight.

The CSS property font-weight just works upon this idea:

It can take both alphabetic and numeric values:

  1. lighter (same as 300), normal (same as 500), bold (same as 700) or bolder (same as 900)
  2. 100, 200, 300, 400, 500, 600, 700, 800, or 900
Notice how the numeric values increment by 100 - you can't write any values other than these like 150, 1000, 20 whatever!

To make the font for all paragraphs bold we can write

p {font-weight: bold}

or simply:

p {font-weight: 700}
One important thing to note over here is that although there are many values for a font's weight, not all fonts out there support all these weights. Some support only a few of them, while some support the whole list. And when this is the case applying an unsupported weight may not have an effect.

For example, if a font supports weight 500 only, having any value less than or equal to 500 will get the normal weight applied only. For weights greater than 500 the browser will make the font bold on its own, if the weight is unsupported.

Italicise that font

To make a font italic, or oblique means to make it slightly slanted on the horizontal axis. And to do this we can use the font-style property by providing it with the value italic, or even oblique.

p {font-style: italic}
p {font-style: oblique}
The value italic is more widely supported in browsers therefore you should use it instead of oblique.

To remove the italic styling from a font just use the value normal:

p {font-style: normal}

Underlining

To underline text in CSS we can use the text-decoration property.

p {text-decoration: underline}

A paragraph with text-decoration: underline.

To remove underlining we can just set the property to none to indicate no underline:

p {text-decoration: none}

A paragraph with text-decoration: none.

With CSS you can also color the line, have a dashed or dotted one and so on but that will a bit too much for now!

Caps

Are you able to relate from the title Caps what we will be studying in this section?

Well we be going over font cases, also refered to by caps. Remember small-caps, all-caps, first letters capitalised; lowercase, uppercase and camelcase? Let's take a CSS look over them.

The text-transform property can be used to trigger different types of casing on a piece of text.

  1. lowercase converts the characters to lower case
  2. uppercase converts the characters to upper case
  3. capitalize capitalises the first character of different words
  4. normal resumes the characters to their normal cases
/* p contains text Hello world */
p {text-transform: lowercase} /* hello world */
p {text-transform: uppercase} /* HELLO WORLD */
p {text-transform: capitalize} /* Hello World */
p {text-transform: normal} /* Hello world */

Font Sizing

Font sizing is an important aspect of designing when it comes down to concepts such as visual hierarchy and content prioritisation. You will most likely be needing variable font sizes for different elements on a single web page.

With CSS its very easy to size fonts using the font-size property.

It can either take a preset value like small, smaller, medium, large, larger etc or number with a CSS unit for the font's size of which common ones are the px and em.

First let's see an example with the presets:

p {font-size: small}
p {font-size: medium}
p {font-size: large}

A paragraph with smaller font size.

A paragraph with medium font size.

A paragraph with large font size.

You can experiment with other presets too like x-small, xx-small, x-large etc!

And now with the units:

p {font-size: 20px}
p {font-size: 30px}

A paragraph with 20px font size.

A paragraph with 30px font size.

In conclusion

And with all this we have concluded playing with our fonts. Just for a recap we went over how to make fonts thick or thin using font-weight, italicise with font-style underline them using text-decoration, case them using text-transform, size with font-size.

Experiment with all the properties on this page. Try to rememeber their names, relate their purpose with their names and remember how they work.

CSS is damn easy, but at the same time can very easily go out of our head if you don't practice literally everyday!

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage