Manipulating Texts and Fonts

Manipulating texts and fonts done by various CSS font properties to make text more fancy.

Font Families

The font-family used to set different types of fonts such as Tahoma, Arial, Times new roman, monospace etc.

example

See the Pen font-family ex by Arpit (@soniarpit) on CodePen.

If the font name has more than one word then the name should be enclosed by the single quotes.

Although quotes are mandatory, it is a good practice to use quotes for specifying the font name.

Font Sizes

This property used to specify the size of the font. Font size can specify in points (pts), pixels (px) or in percentage (%).

We can also specify the font size using relative values such as small, medium, large.

Use of font size in such a way is relative. And the disadvantage of using such relative sizes in that one cannot have the strict control over the font-size. Different browsers may have different size of font value.

example,

See the Pen font-size ex by Arpit (@soniarpit) on CodePen.

Font Variants

The font-variant used to set font in upper case or in lower case.

See the Pen font-varient by Arpit (@soniarpit) on CodePen.

Font Styles

The font-style property is mostly used to specify font styles

This property has three values:

  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is “leaning” (oblique is very similar to italic but less supported)

See the Pen font family by Arpit (@soniarpit) on CodePen.

Font Weights

The font-weight property is mostly used to specify font weight

Various font styles are

  • Normal (by default)
  • Bold
  • Bolder
  • Lighter

See the Pen font-weight by Arpit (@soniarpit) on CodePen.

Font Shorthands

To shorten the code, it is also possible to specify all the individual font properties in one property.

The font property is a shorthand property for:

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

Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.

p{
    font: italic small-caps bold 12px/30px Georgia, serif;
}

Text Decoration

Using text-decoration property we can include special feature in the text. Various properties of text decoration are

  • underline
  • overline
  • line-through

See the Pen text-decoration by Arpit (@soniarpit) on CodePen.

Alignment of Text

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

See the Pen text-alignment by Arpit (@soniarpit) on CodePen.

Previous: CSS Colors

Next: CSS Borders