- Where to find it
- Labelled Typography → Weight in the "Selected Column" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
fontWeight
In plain English
Weight is the thickness of the strokes that make up the letters. You can pick the plain-English options "normal" and "bold", or a number from 100 (extremely light) to 900 (extremely heavy) in steps of a hundred.
The numbers line up with the words: 400 is the same as normal, and 700 is the same as bold. The values in between give you finer control — 500 and 600 are useful for a heading that should feel firmer than body text without shouting.
Weight is the single most effective way to establish hierarchy. A reader's eye lands on the heaviest thing on the page first, which is why a bold heading works better than a merely larger one.
What each option does
| Option | What you will see |
|---|---|
normal | The standard weight for body text. The same as 400. |
bold | Clearly heavier. The same as 700. The usual choice for headings and emphasis. |
100 – 300 | Lighter than normal. Elegant for very large display headings; too faint for body text. |
400 | The same as normal. |
500 – 600 | Between normal and bold. Good for subheadings and buttons that need firmness without weight. |
700 | The same as bold. |
800 – 900 | Heavier than bold. High impact, best reserved for a single hero headline. |
When you would use it
- A heading needs to stand apart from the paragraph below it.
- A key figure or label should draw the eye first.
- A large display headline would look more refined at a lighter weight.
How to change it
- Select the column, open "Selected Column", then "Typography", then "Weight".
- Pick a keyword or a number from the dropdown.
Watch out for
- Not every typeface has all nine weights. When a weight is missing the browser picks the nearest one it has, so 300 and 400 can look identical.
- Bolding a long stretch of text cancels out the emphasis — if everything is bold, nothing is.
- Weights below 400 on small text are hard to read, especially on lower-resolution screens.
Related settings
For developers
The technical reference for what this setting produces: MDN: font-weight. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.