CSS Introduction | Basic CSS Properties | CSS Font

With CSS, you can configure the fonts displayed on a web page in various ways.

CSS font Properties

The font properties available in CSS are as follows.

CSS Font Families

CSS has two kinds of font families.

• generic family: A group of fonts with similar shapes, such as Serif and Monospace.
• font family: A specific font family, such as Times and Courier.

font-family Property

The font-family property can set one font or multiple fonts together. When multiple fonts are set as the font-family value, the web browser reads the fonts in order from the beginning. If the first font is not installed on the user’s computer, the browser checks the next font. It continues checking whether each font exists and displays the text with the first available font found on the user’s computer.

If a font name consists of more than one word, it must be wrapped in quotation marks. When listing multiple fonts, separate them with commas.

<style>
    .serif { font-family: "Times New Roman", Times, serif; }
    .sansserif { font-family: Arial, Helvetica, sans-serif; }
</style>

font-style Property

The font-style property is mainly used to apply italic text and has the following three values.

• normal: Applies no style to the text.
• italic: Displays the text in italic.
• oblique: Slants the text. This value is very similar to italic, but few web browsers support it.

<style>
    .normal { font-style: normal; }
    .italic { font-style: italic; }
    .oblique { font-style: oblique; }
</style>

font-variant Property

When the font-variant property is set to small-caps, all lowercase English letters in the text are changed to a small-caps font. Uppercase English letters are displayed at their original size. A small-caps font means uppercase letters that are slightly smaller than the original uppercase letters in the text.

<style>
    .normal { font-variant: normal; }
    .smallCaps { font-variant: small-caps; }
</style>

The font-variant property does not apply to Korean and applies only to English letters.

font-weight Property

The font-weight property sets how thick the text appears. Available values include lighter, normal, bold, and bolder. You can also set text thickness with numeric values such as 100, 200, 300, …, 900.

<style>
    .normal { font-weight: normal; }
    .bold { font-weight: 600; }
    .bolder { font-weight: bolder; }
</style>

font-size Property

The font-size property sets the size of text.

Text size is an important presentation element in web design, but you should not express headings only by making text larger. In that case, use the HTML heading elements from <h1> to <h6>.

font-size Values

The font-size property value can be expressed in the following two ways.

1. Absolute size
2. Relative size

Absolute size is used when you want to set text to the exact specified size. Text set with an absolute size appears at the same size in all web browsers.

Relative size changes the size of the text according to the size of the surrounding HTML elements. Users can also change the text size directly through the web browser.

Units for font-size

Representative units commonly used for font-size values are as follows.

Percentage units(%) set the default size as 100% and define a relative size based on it. The em unit sets the default size of the corresponding font as 1em and defines a relative size based on it. Pixel units(px) set an absolute size based on screen pixels.

<style>
    body { font-size: 100%; }
    #large { font-size: 2.5em; }
    #small { font-size: 0.7em; }
    #fixed { font-size: 20px; }
</style>

Text set with the em unit can be resized by the user through the web browser.