CSS Basics CSS structure / syntax CSS Text CSS font CSS links CSS Images CSS Tables Css Position layout

CSS Fonts

The CSS font properties defines the font setting. It defines font family, boldness of the text, size of the text, and the style of a text.

Font Family

The font-family property is used to set thel font family of a text.
The font-family property uses different names .Given font will work if browser support it, if not then browser tries the next font and so on.
NOTE : If the name of a font family is more than one word then it must be in quotation marks, like: "Times New Roman". More than one font family is specified in a comma-separated list. For example "Times New Roman", Times, serif;

Font Style

The font-style property is used for italic text.

    This Property use three values
  • Normal : It is used to show text in normal form.
  • Italic : It is used to show text in Italic form.
  • Oblique : It is used to show text in Oblique (like italic) form.

Font Size

The font-size property is used to sets the size of the text.

    The font-size value can be of the following two types.
  1. Absolute size:
    • It sets the text to a specified size.
    • It does not allow a user to change the text size in all browsers (bad for accessibility reasons.
    • It is useful when the physical size of the output is known.
  2. Relative size:
    • It Sets the size relative to surrounding elements.
    • It Allows a user to change the text size in browsers.
Note : If font size is not specified , the default size for normal text, like paragraphs, is 16px (16px=1em).

Font Size with Pixels

Font Size can be controlled with Pixels .

For example : font −size=20px;

Font size with em

To resize the text, many users use em instead of pixels.This unit is recommended by the W3C.1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.The size can be calculated from pixels to em using this formula: pixels/16=em.
For example : font-size: 3.125em; i:e 50px/16=3.125em

Font Weight

The font-weight property is used to specifies the weight of a font.

For Example : font-weight: normal;

For Example : font-weight: bold;

Font Variant

The font-variant property is used to specifies whether or not a text should be displayed in a small-caps font.
When user use font-variant all the lowercase letters are converted to uppercase letters. The difference is that the uppercase letters appears in smaller font size than the original uppercase letters in the text.


Try It Yourself