Text Layers » Font Weight

Font Weight

The nine different Font Weight options
Download Framer project

In Code, you set the different weights with numbers, just as in CSS.

Here’s a list of what the different values stand for:

  • 100 — Thin / Hairline
  • 200 — Extra Light / Ultra Light
  • 300 — Light
  • 400 — Normal / Book / Regular (the default)
  • 500 — Medium
  • 600 — Semi Bold / Demi Bold
  • 700 — Bold
  • 800 — Extra Bold / Ultra Bold
  • 900 — Black / Heavy

Instead of 400, you can also write "normal”, and when typing "bold” you’ll get the 700 weight.

In Design, you can see which font weights a specific typeface actually has (and select them from the list).

Very few typefaces will have all these weights, though. Most only have Normal and Bold.

When a typeface doesn’t have the weight that you picked, Framer will use the closest available one. (So it makes sense to check in Design if a weight even exists.)

Sometimes a particular weight might be found in a separate typeface. To get the black version of "Arial", for instance, you’ll need to use the "Arial Black" font family.

Note: Even though fontWeight is a numeric value, it is not animatable. Animating to a new value will simply skip the in-between values.