Take a Load Off Annie

By Keith Senkowski
On November 9, 2015

Did you know that the font-weight attribute corresponds with the font style control in Photoshop? Font weight isn’t just a way to define how bold something it is. It is a way to harness the variations in professional fonts to maintain some typographic consistency between what is created in Photoshop and what you put on the web.

Here is how it all maps out:

font-weight:100; //Thin
font-weight:200; //Extra Light
font-weight:300; //Light
font-weight:400; //Normal, Regular, Roman
font-weight:500; //Medium
font-weight:600; //Semibold, Demibold
font-weight:700; //Bold
font-weight:800; //Heavy
font-weight:900; //Black

Photoshop Dialog Box

The Photoshop Font Style toggle is where you go to map to font-weight.