CODEWITHSUNDEEP
cssfontsfont-size
Dan
Dan

Reputation: 9488

What do these CSS font properties mean?

I grabbed some CSS from a website and while I have a pretty good understanding of basic CSS I don't understand all of the styles/properties here:

font: normal normal bold 36px/54px brandon-grotesque-n7, brandon-grotesque, sans-serif;

Some additional context - this is CSS for a logo, which you can see in this JS Fiddle.

Specifically I am curious about:

Upvotes: 2

Views: 594

Answers (2)

Steve Sanders
Steve Sanders

Reputation: 8651

What you are seeing is a shorthand font declaration. It is essentially the same as writing the following:

font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 54px;

Why does it say "normal normal bold"?

This is font-style, followed by font-variant, followed by font-weight. Another example would be something like italic small-caps bold.

Why is there a slash on the font-size?

This is font-size followed by line-height. In your example, the font-size is 36px and the line-height is 54px.

Why are there three font types listed?

This is called a font stack. The browser will attempt to use those fonts in the order that they are written. If brandon-grotesque-n7 is unavailable on the user's system, the browser will fall back to using brandon-grotesque. If that is unavailable, it will use the system's default sans-serif font.

A helpful cheat sheet for font shorthand: enter image description here

Cheat sheet source: http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

Upvotes: 6

disinfor
disinfor

Reputation: 11558

Just so this question has an answer not in comments. From CSS-Tricks.com:

CSS font: font-style font-variant font-weight font-size/line-height font-family;

USE font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

Upvotes: 1

Related Questions