9 font weights cheat sheet

Numeric font weights

Font weights come in two styles: a numeric value like “400”, and a short English phrase like “normal”. In CSS, the common convention is that there are a range of nine font weights–at the low end they start at “100”, which would be the thinnest or lightest version of a font, and they go up by 100s, ending at “900” for the thickest or blackest version. Occasionally you’ll find a standard that also defines font weight 950, and some fonts get really carried away with many fine gradations of font weight, like Lucida Sans.

Common font weight names

It is more difficult to understand what English font weights correspond with their numeric equivalent. After all, unless you work with fonts every day, who knows the difference between “book” and “normal”, or “heavy” and “bold”?

Above, we used an example where 400 is “normal”. That convention is more-or-less cast in stone, although you will find exceptions without trying too hard. The other common one is 700 being equivalent to “bold”.

Font weights cheat sheet

Not many people know what the other weights are called, and more importantly, what order they are in from lightest to blackest. If you’re asking yourself “what the heck does the Demi weight look like,” then here is the font weights cheat sheet you need:

100: Thin or Hairline
200: Extra-light or Ultra Light
300: Light or Book
400: Normal, Regular, Plain, Roman, Standard, or Book
500: Medium or Book
600: Semibold or Demibold
700: Bold
800: Black, Heavy, Extra Bold, or Ultra Bold
900: Black, Heavy, Extra Black, Ultra Black, Fat, or Poster

See also:
https://www.w3.org/TR/css-fonts-3/#font-weight-prop
https://helpx.adobe.com/fonts/using/css-selectors.html
https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights
https://docs.oracle.com/javafx/2/api/javafx/scene/text/FontWeight.html
https://www.webtype.com/info/articles/fonts-weights/
https://www.npmjs.com/package/postcss-font-weight-names
https://css3-tutorial.net/text-font/font-weight/
https://github.com/jonathantneal/css-font-weight-names

Leave a Reply

Your email address will not be published. Required fields are marked *