CSS Text Styling

font-family
- Serif, Sans-Serif and Monospace Fonts
- font-family Values
font-size
Color
font-style
font-weight
text-transform
font-variant
text-decoration
letter-spacing
line-height
text-align
text-indent
text-shadow
- Multiple Text Shadows
- Realistic Shadows

Jakob Jenkov
Last update: 2014-08-11

CSS contains a set of CSS properties that are specifically targeted at HTML's text elements. In this text I will explain how these CSS properties work.

font-family

The font-family CSS property is used to specify the font family used by an HTML element containing text. Here is an example:

p {
    font-family: Arial;
}

This CSS rule sets the font-family property to Arial for all p elements. That means, that the text displayed inside p elements is rendered using the font Arial.

The font-family CSS property can take more than one value:

p {
    font-family: Arial, Helvetica;
}

In case the browser does not know the first font family Arial, then the browser will look at the next font family in the list which is Helvetica to see if the browser supports that. You can have as many font families in the list as you want, separated by commas.

Serif, Sans-Serif and Monospace Fonts

Fonts can be divided into three major categories:

Serif fonts
Sans-Serif fonts
Monospace fonts

Serif fonts are all the fonts where the glyphs (characters) have "feet". For instance, Times New Roman is a Serif font. Serif fonts are typically used for the normal text when printed in books. The section below is rendered with a Serif font:

This text is Serif

Sans-Serif fonts are all the fonts where the glyphs have no feet. For instance, Arial is a Sans-Serif font. Sans-serif fonts are often used for headlines, and normal text when rendered on a screen. The section below is rendered with a Sans-Serif font:

This text is Sans-Serif

If you look at the T in the beginning of both texts, you can see the "foot" and absence of a foot clearly.

Monospace fonts are fonts where each glyph (character / letter) is equally wide. Thus an i or l takes up the same space horizontally as an m. Monospace fonts are typically used for code. The section below is rendered with a Monospace font:

This text is Monospace

You can use the values Serif, Sans-Serif and Monospace as value for the font-family CSS property. The browser will then choose a matching font like Times (Serif), Arial, Helvetica (Sans-Serif), or Courier (Monospace) as font family. Here are some examples:

p {
    font-family: Arial, Sans-Serif;
}

div {
    font-family: Times, Serif;
}

code {
    font-family: Courier, Monospace;
}

Each of these CSS rules specifies two values for the font-family CSS property. The first value is a font name, and the second value is a font category. If the first font is not supported, the browser will choose a font matching the font category instead, meaning a Serif, Sans-Serif or Monospace font.

font-family Values

Here is a list of the commonly used values for the font-family CSS property. These are not the only possible fonts, but as mentioned, they are very commonly used.

Font Category	Font Name
Serif	Serif, Times, "Times New Roman", Georgia, Palatino, "Palatino Linotype", "Book Antigua" .
Sans-Serif	Sans-Serif, Arial, Helvetica, Verdana, Tahoma.
Monospace	Monospace, Courier, "Courier New"

font-size

The font-size CSS property sets the size of the rendered text. Here is an example:

p {
    font-size: 20px;
}

This example CSS rule sets the font-size to 20 pixels. You can specify the font size in any of the standard CSS units. The standard font size in the browsers is 16 pixels at the time of writing, meaning if you specify no font size, the browser will use a font size of 16 pixels.

Another useful unit for font size is em. The em unit is a relative unit. 1 em is equal to the standard font size, which at the time of writing is 16 pixels. You can then specify font sizes as 0.8em, 1.2em, 2em, or some other fraction. Using the em unit can be a good idea if your website is to be shown reasonably across various different screen sizes. In that case the browser can choose what the standard font size is, and you just specify your website's font sizes relatively to the standard font size for the given device. Here is an example:

h2 {
    font-size : 1.4em;
}
p {
    font-size : 1em;
}

This example sets the h2 HTML element font size to 1.4em which is 1.4 times the standard font size. The example also sets the p element font size to 1em which is the standard font size for the given browser on the given device.

Color

The color CSS property sets the color of the text rendered inside an HTML element. Here is a color example:

p {
    color : #333333;
}

The CSS rule example sets the color of text rendered inside all p elements to dark gray. Here are a few live examples:

Gray, red, green, blue.

Colors in CSS are covered in more detail in my text about CSS colors.

font-style

The font-style CSS property can set the style of a font to one of four different values:

normal
italic
oblique
inherit

Here are three examples:

p {
    font-style: normal;
}
p#emphasized {
    font-style: italic;
}
p#ob {
    font-style: oblique;
}

The first of these three CSS rules sets the font-style of all p elements to normal. The second CSS rule sets the font-style of the p element with the id emphasized to italic. The third CSS rule sets the font-style of the p element with the id ob to oblique.

Here are three live examples showing what the three different font styles look like:

This is a text with font-style normal, but with an italic section and an oblique section.

The italic and oblique styles are only different if the font contains an italic and oblique version. If not, the browser makes a version based on the normal font, in which case the two styles may look very similar.

The last font-style value inherit just means that the HTML element inherits its font-style property from its parent HTML element.

font-weight

The font-weight CSS property sets the thickness of text rendered inside an HTML element. The font-weight CSS property can take the following values:

CSS Property
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Most often only the bold value is used. The value normal is the default value, so if no value is specified for font-weight, then this value is used.

Here is a font-weight: bold example:

span#fat {
    font-weight: bold;
}

This CSS rule sets the font-weight CSS property to bold for the span element with the id fat. Here is how bold text looks in the browser:

This text has a bold section.

text-transform

The text-transform CSS property can be used to transform all text rendered inside an HTML element to lowercase, uppercase, or just the first letter of each word to uppercase. The three valid values for the text-transform CSS property are:

lowercase
uppercase
capitalize

Here are three examples that show each of these values in use:

span#lc {
    text-transform: lowercase;
}
span#uc {
    text-transform: uppercase;
}
span#cap {
    text-transform: capitalize;
}

These three CSS rules transforms the text of three span elements. The first CSS rule transforms all characters to lowercase when rendered. The second CSS rule transforms all characters to uppercase wen rendered. The third CSS rule transforms all words to start with a capital letter. Here is how these span elements look when rendered in the browser:

Mixed case Sentence,
Mixed case Sentence,
Mixed case Sentence,

All the span elements contain the same text, but notice how they are rendered differently (each line contains one span element).

font-variant

The font-variant CSS property takes one of two values:

normal
small-caps

The small-caps values makes all lowercase characters render as smaller, capitalized letters instead. Here is a CSS font-variant example:

p#special {
    font-variant: small-caps;
}

This CSS rule sets the font-variant CSS property to small-caps for the p element which has the id special. Here is how a text rendered in small-caps looks:

This text is rendered in small-caps. Notice the letters look similar (except in size), even though they have different case.

text-decoration

The text-decoration CSS property can be used to underline, overline or strike-through text. The text-decoration CSS property can take one of the following values:

none
underline
overline
line-through
blink

Here are five examples showing how to use these values:

span#none {
    text-decoration: none;
}
span#under {
    text-decoration: underline;
}
span#over {
    text-decoration: overline;
}
span#through {
    text-decoration: overline;
}
span#blnk {
    text-decoration: blink;
}

Here are five sections of text which show the effect of the above text-decoration settings:

No decoration. Underline this text. Overline this text. Line through this text. Blink this text.

Note: Not all browsers support blink. Even if they did, you should be careful with making too many things blink and move on your website. It can easily get very distracting and annoying.

letter-spacing

The letter-spacing CSS property is used to increase or decrease the spacing between letters when rendering text. A positive value will increase the letter spacing by the amount compared to the normal letter spacing. A negative value will decrease the letter spacing by the amount compared to the normal letter spacing. Here are two examples:

span#more {
    letter-spacing : 2px;
}
span#less {
    letter-spacing : -2px;
}

Here are three sentences that show you the difference between normal text, a positive value and a negative value:

Normal space
More space
Less space

line-height

The line-height CSS property sets the height of text lines when they are rendered. Here is an example:

p {
    line-height: 2.0em;
}

This example sets the line height to 2.0em which is 2 times the size of the standard font-size (1.0em).

Here is how a paragraph of text looks with 2.0em as line height:

This paragraph has bigger line-height. This paragraph has bigger line-height. This paragraph has bigger line-height. This paragraph has bigger line-height. This paragraph has bigger line-height. This paragraph has bigger line-height. This paragraph has bigger line-height.

Remember, line-height is inherited, so if you specify line-height inside an HTML element which already inherits a line-height, then using a percentage in the line-height might be multiplied to the inherited percentage.

text-align

The text-align CSS property can align the text inside an HTML element to the left, right or center. The text-align CSS property can take the following values:

left
right
center
justify

The value left will left align the text. The value right will right align the text. The value center will center the text inside the HTML element. The value justify will try to make even left and right sides on the text, so the text appears as a straight rectangle of text.

Here is a text-align example:

p#alignleft {
    text-align: left;
}
p#alignright {
    text-align: right;
}
p#aligncenter {
    text-align: center;
}

Here are some example paragraphs showing how text looks with the three text-align settings:

This text is left aligned. This text is left aligned. This text is left aligned. This text is left aligned. This text is left aligned. This text is left aligned. This text is left aligned. This text is left aligned.

This text is right aligned. This text is right aligned. This text is right aligned. This text is right aligned. This text is right aligned. This text is right aligned. This text is right aligned. This text is right aligned.

This text is center aligned. This text is center aligned. This text is center aligned. This text is center aligned. This text is center aligned. This text is center aligned. This text is center aligned. This text is center aligned.

This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned. This text is justify aligned.

text-indent

The text-indent CSS property can be used to indent the first line of a paragraph, just like paragraphs are in many printed books. The text-indent CSS property can take a number as value. For instance, 32px or 2em. You can also use a % value, in which case the % is interpreted as being a percentage of the width of the paragraph.

Here is a text-indent example:

p#indent {
    text-indent: 2em;
}

This CSS rule sets the text-indent CSS property to 2em, meaning the first line of text of the selected paragraph will be indented the same space as 2em, which is 2 times the standard font size. Here is a live example showing a paragraph with the first line indented:

This parapraph has the first line indented. This parapraph has the first line indented. This parapraph has the first line indented. This parapraph has the first line indented.

You can also use negative values for the text-indent property. If you do, the first line will be moved to the left ("pulled out") of the paragraph. Here is an example of that:

This parapraph has the first line indented with -2em. This parapraph has the first line indented with -2em. This parapraph has the first line indented with -2em. This parapraph has the first line indented with -2em.

text-shadow

The text-shadow CSS property enables you to add shadow to text. The text-shadow property takes four parameters: The x and y displacement of the shadow from the text, a blur radius telling how sharp or soft the shadow is to be, and the text shadow color. Here is an example:

p.withShadow {
    text-shadow : 5px 10px 0px #999999;
}

This example sets a text shadow on all p elements which have the CSS class withShadow. The shadow is located 5 pixels to the right and 10 pixels below the text. The blur radius is 0 pixels which means the shadow is as sharp as possible. The shadow color is #999999 which is a gray color. Here is how that text shadow looks when applied to a text:

This text has text shadow.

Here is how the same text looks with a shadow with a blur radius of 5 pixels:

This text has text shadow.

Multiple Text Shadows

You can have multiple text shadows. Just separate the parameter sets with a comma. Here is an example:

p.withShadows {
    text-shadow : 5px 10px 2px #ff0000, -3px 6px 5px #0000ff;
}

This example defines two text shadows at different locations, blur radius and colors. This makes it look like there are two different light sources on the text. Here is how a text looks with these text shadows applied:

This text has two shadows.

Realistic Shadows

To make a text shadow look realistic, remember these few shadow characteristics:

A shadow which is close to a text is normally not as blurred as a shadow that is far from a text. A shadow that is far from a text usually implies a light source which is also far from the text.
A shadow which is close to a text usually implies that the underlying surface is close (or that the light is close, or both). A close shadow is often darker than a distant shadow, because less light can get in between the shape and the underlying surface.

So, make close shadows less blurred and a bit darker, and make distant shadows a bit more blurred and brighter.

Next: CSS List Styling

Tweet
	Jakob Jenkov