Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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.
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');
}
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.
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."
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.