Advertisement


Setting font-weight vs bold font-family in CSS, which is more correct?


Question

There are basically two ways of making a font bold in CSS: via the font-familyattribute and via the font-weight attribute.

Let's say i'm using the font Raleway for example and have loaded a Light, a Regular, a Semibold and a Bold variant via css. I could turn a simple heading bold by setting it to h1{font-family: 'Raleway Bold'} or to h1{font-weight: 700}.

Which of these is more correct, or are these both the same?

2016/07/20
1
9
7/20/2016 7:32:00 AM

Let's say we've loaded a Bold font variant like so:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

I would argue in favour of using both font-family and font-weight in your style specification. For example:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

Both basically do the same thing: tell your heading1 to be bold. This won't double the boldness or anything, it just repeats that it needs to be bold.

The reason for this is pretty simple: if your font file is not loaded (server overload, client restrictions, voodoo), then your visitor will still see a bold font (in this case a faux bold Helvetica) and can thus distinguish between a title and the body text, which would not be the case had you only specified the font-family.

See in this image the top set is Raleway and Raleway Italic but has the proper Raleway Italic being loaded with:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

The bottom is only loading Raleway. As a result the bottom set has Raleway and FAUX Raleway italic. Note the differences in lower case "a" and "k" for example between the real italic and faux italic. A well designed font will have differences between regulars, bolds, and italics that you won't get if you don't load them.

enter image description here

2016/07/22
6
7/22/2016 6:35:00 AM