How does Inspect determine the font weight displayed in my prototype?
- 04 Jan 2023
- 1 Minute to read
- DarkLight
How does Inspect determine the font weight displayed in my prototype?
- Updated on 04 Jan 2023
- 1 Minute to read
- DarkLight
Article Summary
Share feedback
Thanks for sharing your feedback!
We use the following hard-coded table to assign a numerical weight to each font weight:
| Font Weight | Numerical Weight |
|---|---|
| "Thin", "Hairline" | 100 |
| "Extra Light", "Ultra Light" | 200 |
| "Light", "Book" | 300 |
| "Normal", "Regular", "Roman", "Standard", "Plain" | 400/Normal |
| "Medium", "Demi" | 500 |
| "Semi Bold", "Semi Bld", "Demi Bold", "Demi Bld" | 600 |
| "Bold", "Bld" | 700/Bold |
| "Extra Bold", "Ultra Bold", "Extra Bld", "Ultra Bld" | 800 |
| "Black", "Heavy", "Ultra", "Fat", "Poster", "Ultra Black" | 900 |
For any font weights that would fall into the 400 (normal) or 700 (bold) bucket, instead of showing the number “400” or the number “700", we instead will show the weight name “Normal” or “Bold” respectively. All other font weights should display as the numerical value in Inspect using the logic above.
For example, the following table illustrates the weight value you should expect to see in Inspect (on the right) based upon the font weight used in your file (on the left):
| File | InVision |
|---|---|
| Regular | Normal |
| Light | 300 |
| Medium | 500 |
| Bold | Bold |
| Black | 900 |
Was this article helpful?