In this tutorial, we’ll be learning about working with fonts in CSS!
The font property is a shorthand property which can combine a number of sub-properties in a single declaration. For example:
font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;
This is equivalent to:
font-stretch: normal;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 120%;
font-family: "Helvetica", sans-serif;
Let’s review each of these properties in detail!
CSS Font properties
Font-family
The font-family property sets the font family that the element will use.
The selected font is not a single font face but one of a “family”, as a font is composed of a number of sub-fonts. Such as bold, italic, light, etc.
body {
font-family: Helvetica;
}
The font family name matches either a font that is embedded on the page or available on the user’s system.
We could also choose multiple fonts like so:
body {
font-family: Helvetica, Arial, sans-serif;
}
In this case, the browser will choose the next font, if the first cannot be used. This might happen if it’s either not found on the users local machine, or if the server that the font is hosted in is down.
Font types are typically classified as Serif, Sans-Serif, or Monospace fonts. Here’s some of most popular:
Serif: Georgia, Times New Roman
Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande , Trebuchet MS
Monospace: Courier, Courier New, Lucida Console: Courier, Courier New, Lucida Console
Line-height
The line-height property sets the amount of space above and below our element.
p {
line-height: 1.5;
}
We can also use the keyword values normal,none as well as a number, length (any valid CSS unit), or percentage (being the elements’ font size multiplied by the %).
Font-weight
The font-weight property sets the width (or thickness) of each of the characters of a font. You can use the following values:
normalboldbolder-
lighterNote thatbolder&lighterare relative to the elements’ parent.
Numeric values can also be used:
100200300-
400(equivalent tonormal) 500600-
700(equivalent tobold) 800900
With 100 being the lightest font, and 900 the boldest.
For values other than 400 or 700 to have an effect, the font being used must have built-in faces that match these weights.
Font-stretch
With font-stretch we can choose a narrow or wide face of the font. Assuming the font being used contains corresponding font faces.
The possible values are:
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expanded
Font-style
The font-style property accepts one of three possible values: normal, italic, and oblique.
For example, to set our font to italic:
p {
font-style: italic;
}
There is very little difference between using italic and oblique. Both apply a sloping effect to text.
Font-size
The font-size property is used to determine the size of fonts. For example:
p {
font-size: 20px;
}
You either use a valid length value (such as px, em, rem a percentage, etc), or a predefined value keyword.
The available keyword values are:
xx-smallx-smallsmallmediumlargex-largexx-largesmallerlarger
With both smaller & larger being relative to the parent element.
Note that font-size is a mandatory value. When using the font shorthand property, the size must be set (or it will be invalid)!
Font-variant
The font-variant property is a bit of a relic. It was originally used to set text to small caps, it had 3 values:
normalinheritsmall-caps
Small caps sets the text to “smaller caps”, that is smaller than the regular uppercase letters.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)