css Question posted in
Some basic documentation can be found here.

How to set normal and bold font-weight independantly with CSS?

I have a font with three weights: light, regular, bold. I would like to use light-weight for normal text and bold-weight for bold text.

Using font-weight: lighter doesn’t work in this case because it forces bold text to regular-weight, thus breaking bold functionality.

What is the correct CSS to achieve this?

<html>
<style>
p {
  font-weight: lighter;
}
</style>
<body>
<p>Light weight, <b>bold weight</b></p>
</body>
</html>
Tags:

2

Answers


  1. 0

    CSS:

    p {font-weight: lighter;}
b, strong {font-weight: bold;}
    Login or Signup to reply.
  2. 0

    You may also re-map your fonts to the desired default font-weights by custom @font-face rules:

    /* map light (300) to regular (400) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
}

/* heavy (800) to bold (700) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
}

body{
    font-family: 'Poppins';
}
    <p>Light weight, <b>bold weight</b></p>
<p>Light weight, <strong>bold weight</strong></p>

    In the above example we map the actual Poppins light/300 to regular/400. You can extend this concept e.g to tweak the default weight for by default boldened elements like <strong> or headings like <h1-5> (e.g when you find the default bold weight to thick or to thin).

    Besides, I recommend to avoid relative font-weights like lighter or bolder as they are not very intuitive (See mdn docs: "Meaning of relative weights"). Related post "Bolding text is not working in different devices"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search