System Font Weights

Share on

As I mention in the 7.7 release post, the addition of system fonts did not include the font weight options. This is just a quick post to give you the styles for the font weights. Just add these classes to the element you are adding and CSS should take care of the rest. If you run into any problems, please let me know.

Screenshot showing the text--bold class assigned to the text element and the effect on the text - text is now bold. — Class assigned to the text element

UPDATE: In addition to the CSS below, in the typography settings I recommend some negative letter spacing. For me, -.03em is best for h1 and -.02em for other headings.

:root{
  --900:900;
  --800:800;
  --700:700;
  --600:600;
  --500:500;
  --400:400;
  --300:300;
  --200:200;
  --100:100;
}
/* Tag targeting */
.text--heavy :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--900)!important;
}
.text--extrabold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--800)!important;
}
.text--bold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--700)!important;
}
.text--semibold :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--600)!important;
}
.text--medium :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--500)!important;
}
.text--regular :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--400)!important;
}
.text--book :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--300)!important;
}
.text--light :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--200)!important;
}
.text--thin :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,span,em){
    font-weight:var(--100)!important;
}

/* Alternative all encompassing */

.thin {
  font-weight:var(--100)!important;
}
.light {
  font-weight:var(--200)!important;
}
.book {
  font-weight:var(--300)!important;
}
.normal {
  font-weight:var(--400)!important;
}
.medium {
  font-weight:var(--500)!important;
}
.semibold {
  font-weight:var(--600)!important;
}
.bold {
  font-weight:var(--700)!important;
}
.extrabold {
  font-weight:var(--800)!important;
}
.heavy {
  font-weight:var(--900)!important;
}

Originally published on April 14, 2022