CSS Fonts

In this tutorial, I will be showing you how to use font and its properties to style your HTML text elements.

Font Properties

CSS font properties is used to control how the text looks in size, color, style, etc.

FONT-FAMILY

The font-family property in CSS in used to define the font to be used for the text.

Categories of Fonts

There are seven categories of font in which other types of fonts are found. They are:

• SERIF FONTS - These are fonts that have small details (lines or serif) at the end of each letter stokes. Examples are: Georgia, Times New Roman, etc.
• SANS-SERIF FONTS - These are fonts that do not have extra details (lines or serif) at the end of each letter stokes. Examples are: Arial, Bebas Neue, Zelda, etc.
• SCRIPT FONTS - These are fonts that have cursive handwriting look or calligraphic writing. Examples are: Pacifico, Great Vibes, Berista, etc.
• DISPLAY FONTS - These fonts are also called decorative fonts. They are less cursive and more geometric than script fonts. Examples are: Gilroy, Playfair, Margaret, etc.
• SLAB SERIF FONTS - These fonts are serif fonts where the serif (small details, line or stroke) is squared off, giving the font a blocky look or appearance. Examples are: Fanatix, Typuric, Comply, etc
• MONOSPACE FONTS - These are fonts with fixed width (whereby each character take up the same amount of space). Examples are: Inconsolata, Anonymous Pro, PT Mano, etc.
• HANDWRITTEN FONTS - These fonts take the resemblance of human handwriting. Examples are: ITC Zemke Hand, FF Mrk, etc.


TIP:

The difference between script and handwritten font is that script fonts are decorative/calligraphic in nature, while handwritten fonts show the penmanship (art of writing by hand) used in a letter.

• DECORATIVE FONTS - These fonts are decorative versions of other fonts (Sans-Serif, Serif, Script, etc). Examples are: Carla Sans, Nexusbold, Mayor, etc.

Fall Back Fonts

Fall back fonts are web safe fonts that are used as a backup font, if the font you used at first did not work or is not found.

FONT-STYLE

The font-style property in CSS in used to set the font style that the content of the element should take. Font style values include:

• normal
• italic
• oblique

FONT-SIZE

The font-size property in CSS is used to set the size (how big or small) of the font of the element content. Font size values include:

• Pixels - 50px, 60px, etc
• Percentage - 20%, 45%, 76%, etc.
• Ems - 2em, 4em, etc
• Keywords - small, medium, large.

Font Units

ABSOLUTE UNITS
cm	Centimetres
mm	Millimetres
cm	Centimeters
in	Inches
px	Pixels
pi	Picas
RELATIVE UNITS
em	Relative to font size (Example 3em - 3 times the font's original size)
ex	Relative to element height (Example 3ex - 3 times the elements' original height)
ch	Relative to the width of the "0"
rem	Relative to font size of root element.
vw	Relative to 1% width of the viewport
vh	Relative to 1% height of the viewport
vmin	Relative to 1% of viewport's smaller dimension
vmax	Relative to 1% of viewport's smaller dimension
%	Relative to parent element
KEYWORDS
xx-small	Sets the font-size to xx-small size.
x-small	Sets the font-size to extra small size.
small	Sets the font-size to small size.
smaller	Sets the font-size to be smaller than the parent element size.
medium	Sets the font-size to medium size. (default font size)
large	Sets the font-size to large size.
larger	Sets the font-size to be larger than the parent element size.
x-large	Sets the font-size to extra large size.
xx-large	Sets the font-size to xx-large size.

FONT-WEIGHT

The font-weight property in CSS is used to set how thick or thin the font should be. It specifies the boldness of the font. font weight values can be numeric or keywords:

• 100 - thin
• 200 - extra light
• 300 - light
• 400 - normal
• 500 - medium
• 600 - semi bold
• 700 - bold
• 800 - extra bold
• 900 - heavy
• normal, bold, bolder, lighter

FONT-VARIANT

The font-variant property in CSS is used to set whether the character should be displayed in small capital letters or normal letters that was typed. font variant values include:

• small-caps
• normal

Font Shorthand

The font property in CSS is used as a shorthand for other properties. It follows this order.

• font: font style | font-variant | font-weight | font-size/line-height | font-family

PROPERTY	DESCRIPTION
font-family	Sets the font to be used.
font-style	Sets the font style.
font-size	Sets the size (how big or small).
font-weight	Sets how thick or thin the font should be.
font-variant	Sets whether the character should be displayed in small capital letters or normal letters.
font	Shorthand for all other font properties