9

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?

  • I have doubt, that either writing "font-weight" in css is correct, when you have all the options in the font family. eg: Raleway font has all the options from light to extra bold. So which way is appropriate to use all the fonts from family, so that we cannot loose the font character. – pooja Jul 20 '16 at 5:41
  • 1
    very related Q&A. – Cai Jul 20 '16 at 7:39
  • @poojaa, I've taken the liberty of editing your question to make the formatting clearer and bring the actual question more to the foreground. If you feel like I've changed the meaning, you can alway edit it yourself. – PieBie Jul 20 '16 at 7:45
6

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

  • Using one family name and only setting weights will still give you the correct weight in the case of font files not loading. The only reason to use both would be for compatibility reasons. – Cai Jul 20 '16 at 10:24
  • 1
    You are confused. Your Google font example does not only refer to the Raleway italic as just font-family: 'Raleway' (contradicting your bold example above) but, additionally, Regardless of naming the entire family Raleway or each variant individually with different font-family names has absolutely no bearing on applying faux or not. Even your own example proves this is an incorrect method, as your provided font-family: 'Raleway Bold', Helvetica, Arial, sans; does have Helvetica Bold and Arial Bold individually because that's just the incorrect way to cascade font variants. – rgthree Jul 20 '16 at 16:22
1

While both ways will give you the correct output, the more correct way would be to use a single font-family to group all the different variants of weights and styles. It's the same way you use system fonts (from 'Arial' down to 'sans-serif') and, in fact, if you use Google fonts to load Raleway you would be using the single font family route.

Let's outline several reasons why this is the correct method.

It reduces CSS complexity an, ultimately, file size

Having a single font-family means you can define an entire containing element with the font family, and only certain elements with different weight/styles. Take the following, for example:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

Notice how nice and consice this CSS is. We didn't need to specify "RalewayBold" as the font-family for .bold, nor "RalewayItalic" for our .italic. Infact, we don't even need to specify a bold & italic variant, since our classes will simply work. Further, if .bold is inside our .footer, it will be bold Arial and not Raleway, because it simply inherits Arial from the footer container.

It's the way the browser does it.

The above is essentially how the browser internal stylesheet defines fonts by using minimal styles and the inherent cascading nature of CSS.

It's the way the industry does and has done it.

The biggest web properties, applications and publishers all do it this way. Google, Facebook, NYT, ESPN, etc. all define and use fonts in this manner.

Not only that, but user interfaces before the CSS or even the internet specify single font-families and choose variants based on different specification of weight and style. Load Microsoft Word, KeyNote, Google Docs, even an old late 1990s WordPerfect and open the font drop-down; You'll see the font-family name "Arial" listed; not "Arial" followed by "Arial Bold" followed by "Arial Italic" etc.

Just load from Google Fonts.

If you load Raleway from the free webfonts repository on Google Fonts, you'll see Raleway is defined with a single family name:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
  • Doesn't this method ignore variations between font styles for faux ones? – Ryan Jul 20 '16 at 15:35
  • @Ryan Not at all. In fact, the name of the font family (either correctly bundling the family as Raleway with weight/style variants, or incorrectly defining individual variants Raleway Bold and Raleway Italic as individual font-families) has no bearing on applying faux variations or not. In fact, correctly bundling the family under the same name helps the browser pick a closer variation to apply a faux style while incorrectly naming each variation separately keeps the browser in the dark of available fonts to apply variations if the desired font is not loaded. – rgthree Jul 20 '16 at 16:26
  • (1) Just load from Google fonts: for websites sure, but there are a lot of other instances where html/css is used where an internet connection is not guaranteed and you have to load the fonts locally, (2) It reduces CSS complexity an, ultimately, file size: so you'll shave of 1kb on a site or app that's dozens of MB, the client will be amazed by how fast your app loads, (3) it's the way the browser/industry does it: browsers default to faux, and anyway the 'industry' is not always correct nor does it follow best practices (just look at flexbox) – PieBie Jul 22 '16 at 6:43
  • browsers default to faux What? You clearly do not know what are you talking about. When you specify font-family:Arial; font-weight:bold; (which, again is the right way to do it, regardless if it is Arial or Raleway) do you think the browser is applying a faux bold to a normal Arial font face? Incorrect. The browser is loading the ArialBold font face as the system defines and only if there is no exact font available will it apply a faux style to the best matching font based on the font-family name, which is why they must be the same! Can't say "Do this for Arial, but not Raleway." – rgthree Jul 22 '16 at 15:43
0

Here's the thing, If you ask the question about Raleway, a webfont programmed for css, both waysj work equally good. In this case Use font-weight because it's the "correct" course of action which will be easiest to change and control without major changes in the code.

Now you start to have problems once you embed a font yourself, a font that is not necessarily planned for css and the weights might not match the numbers.

Because of this, a very common bug on embedded fonts, extremely common in non-english fonts, is that css "boldens" or "lightens" the font automatically and the result is very bad.

Therefore I recommend that if you use a webfont like the fonts on google fonts, go ahead and use the numbers on font-weight, but when you embed a font yourself, stay on the safe side and use font-family for every single weight separately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.