Take the 2-minute tour ×

whats the difference between this:

font-family: Arial, helevetica;

and this:

font: arial/ helvetica;

I've seen both but not really sure of the difference?

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

Is the slash (/) a typo? Because the only slash I can image in the font: property is the one denoting font-size and line-height (e.g. 16px/20px)

Anyway, font: is the property that lets you set several font properties at once, whereas font-family obviously only lets you set the font face. With font: you can also set size, bold/italic, line-height and variant:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

Is the same as:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

You can omit properties that are already set, too. For just size, family and bold:

font: bold 1em arial,verdana;
share|improve this answer
ok yes i must have mis-read the slash placement! –  benhowdle89 Dec 7 '10 at 12:13
add comment

Thanks for asking this question.

As @Stephan Muller said the slash could just be a typo trying to denote the font-size and line-height, however there can also be a slash in some fonts like these:

font-family: Copperplate / Copperplate Gothic Light, sans-serif;

Hope this helps!

share|improve this answer
add comment

The slash is a shorthand used to set font size and line height at the same time. So, the syntax is of the shorthand you have is incorrect.

font: 12px/14px Arial, helvetica;

is the only correct usage of the slash. In this example it would set the font size to 12px, the line height to 14px and the font family to Arial, helvetica.

share|improve this answer
add comment

Your Answer


