Weight / font-weight
How thick the strokes of a typeface are, from hairline Thin to solid Black. CSS calls it 100 to 900, with 400 regular and 700 bold.
See it
What it is
Weight is how thick a typeface's strokes are, drawn as separate cuts of the same family: Thin, Extralight, Light, Regular, Medium, Semibold, Bold, Extrabold, Black. CSS numbers them 100 to 900, where 400 is Regular and 700 is Bold. The names are not standardized across foundries, so one family's Medium can be visually heavier than another's Semibold.
Weight is the cheapest hierarchy tool you have. Going from Regular to Semibold separates a label from its value without changing size, color, or spacing. Two weights is usually enough for a whole product; three is a rich system. Body text below Regular is a readability trap, and hairline weights (100 to 200) only survive at display sizes.
Gotcha: faux bold. If you ask for 700 and the browser only loaded 400, it synthesizes bold by smearing the glyphs outward, which fills in counters and looks muddy next to real bold. Load the cuts you actually use, or ship a variable font where weight is a continuous axis and any value between 100 and 900 is real. One more optical effect: light text on a dark background reads heavier than the same weight on white, because the bright strokes bleed outward into the dark (irradiation, or halation). So light-on-dark text usually wants one step lighter, not heavier.
Ask AI for it
Build the typographic hierarchy in this UI with weight instead of size: body at 400, labels and table headers at 500, section headings at 600, page title at 700. Load a variable font (Inter Variable) and set font-variation-settings so every weight is a real cut, never browser-synthesized faux bold. Drop light text on dark backgrounds one step lighter, since bright strokes bloom against dark and read heavier than the same weight on white.