Styling 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.

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

To make the font for all paragraphs bold we can write

p {font-weight: bold}

or simply:

p {font-weight: 700}

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}

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

p {font-style: normal}

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

p {text-decoration: underline}

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

p {text-decoration: none}

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 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}

And now with the units:

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

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!