A Practical Guide to Font Styling using CSS

CSSWeb DevelopmentFront End Technology

CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc.

color

This property is used to change the color of the text.

font-family

This property is used to set the font face for an element.

font-kerning

To make the character spacing uniform and increase readability, the font-kerning property is used. However, this property is font specific.

font-size

The font-size property sets the size of the font.

font-stretch

Some fonts have additional faces like condensed, bold, etc. The font-stretch property is used to specify these.

font-style

To italicize the text by an angle, the font-style property is used.

font-variant

font-variant allows us to specify whether an element should be displayed in small caps or not.

font-weight

The boldness of characters is specified by the font-weight property.

line-height

This property sets the spacing between two lines.

text-decoration

To underline or overline and style it, text-decoration is used.

text-shadow

Like box-shadow, this property adds a shadow to the characters as desired.

Furthermore, there are text layout properties like text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap, etc.

Syntax

The syntax of font property is as follows −

Selector {
   font-property: /*value*/
}

Example

The following examples illustrate CSS fonts property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   font: 1.6em arial;
   text-shadow: -3px -12px lightblue;
}
p + p {
   font: italic bold 12px/30px menu;
   text-shadow: unset;
   box-shadow: 0 0 5px 1px black;
}
div {
   width: 30%;
   font-size: 1.4em;
   font-family: cursive;
   background-color: tomato;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
   border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>

Output

This gives the following output −

raja
Published on 08-Jan-2020 11:43:40
Advertisements