Skip to navigationSkip to content

Use the right font for the job

Something that I seem to find on a lot of websites that bothers me is when the wrong font-weight is used. No, I’m not talking about someone using a font-weight I don’t think works but when someone uses a font-weight that is not available for the typeface or when they’ve loaded a specific weight but then changed the font-weight with CSS. This makes the text look odd and usually, it also makes it look a bit jagged.

Here is an example of where things have gone wrong. Inter is loaded via @font-face and assigned to a font family called Inter Black, this is a weight 900 font. But later on for the .button-class, the font is used but ‘transformed’ into a weight 300 which manipulates the font to look thinner.

@font-face { font-family: 'Inter Black'; src: url('inter-black.woff2') format('woff2'); } .button { font-family: 'Inter Black'; font-weight: 300; }

Instead what would have been better is to define all weights needed to a collective font family called Inter and then grab the correct font file based on the assigned weight.

@font-face { font-family: 'Inter'; src: url('inter-black.woff2') format('woff2'); font-weight: 900; } @font-face { font-family: 'Inter'; src: url('inter-light.woff2') format('woff2'); font-weight: 300; } .button { font-family: 'Inter'; font-weight: 300; }