Text in CSS: Fonts

One of the most important things people like to modify when they are making a web page is the font. CSS language makes this task something very easy to do. Here, the instructions you will use:


First, line-height lets you specify the space between a line and the next one.

About font-family, you need to know two things: The first one is that you can use this instruction to specify what font the browser will use to display the content of a page, but the browser will use the font only if the final user has is installed in his computer (not to mention Windows, Linux and Mac users have only fifteen or sixteen fonts in common). That said, designers usually state a second and a third alternative fonts to the font-family instruction.

The second is that you need to type the name of the font complete, and between apostrophes, if it has more than one word. Separate the alternative fonts with a comma, but don't use a space between the alternatives.

font-size helps you specify the font-size you will use on your web page. Besides the specific measurements, you can use xx-small, x-small, small, medium, large, x-large and xx-large with this instruction.

font-stretch lets you specify how wide the characters will be compared to the original font. Here you can use ultra-condensed, extra-condensed, condensed, semi-condensed, narrower, normal, wider, semi-expanded, expanded, extra-expanded and ultra-expanded with this CSS instruction.

font-style only has three options: normal, italic or oblique.

In turn, font-variant has only two: normal and small-caps.

As for font-weight, the options are lighter, normal, bold, bolder and numeric numbers which go from 100 to 900. With regard to these numeric values, normal would be like 450. Graduate from there.

Last but not least, with font you can specify almost all the instructions above in a single line. However, the order is somewhat fixed:

font: font-style font-variant font-weight font-size/line-height font-family;


line-height: 150%;
font-family: 'bitstream vera sans',verdana,sans;
font-size: .88em;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;

font: italic bold .88em/1.28em 'bitstream vera sans',verdana,sans;

Knowledge + Computers