CODEWITHSUNDEEP
htmlcssfonts
ryanwilliams
ryanwilliams

Reputation: 115

CSS Font best practice

I am trying to understand this font declaration in a CSS template that I am using and learning from. Most of the CSS tutorials do not set font size this way. It does seem to work, I'm just wondering exactly what is going on.

body{
font:300 15px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

What is the 300 number doing? Why would the creator use a fraction of 15px/1.4 instead of just putting something like 10px?

Also, when is it appropriate to use quotations on the typefaces, and when is it not?

Upvotes: 7

Views: 7155

Answers (2)

Chris Herbert
Chris Herbert

Reputation: 6285

It's shorthand syntax for the following:

font-weight: 300;
font-size: 15px;
line-height: 1.4;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Font Weight

300 is just a number representation of the weight of the font. The default is 400, "bold" is equivalent to 700. Here's a font with many different weights that should give you a good idea of what the numbers correspond to: http://www.google.com/fonts/specimen/Source+Sans+Pro

Line Height

When the number doesn't include a unit (like px, em, etc), it's a multiple of the font size. In this case, 15px * 1.4 = 21px, so it's the equivalent of line-height: 21px.

Font Family

This is a list of your preferred fonts, in descending order. If the user doesn't have Helvetica Neue installed, it will fall back to Helvetica. If they don't have that, it will fall back to Arial. If they don't have that, it will use whatever the browser's default sans-serif font is. In OSX and iOS, that's Helvetica, on Windows it's Arial, and on Android it's either Droid Sans or Roboto, depending on the version.

Upvotes: 8

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

300 - font weight

15px/1.4 - FONT Size/Line Height

font - 'Helvetica Neue' single quotation first priority font

Syntax

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

example

body {
   font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

Upvotes: 1

Related Questions