What does 'normal normal medium 45px/61px Oswald' mean in a css font rule?

Question

I'm working on converting a design in Adobe Xd to a HTML template, for one element its suggesting the following css rules.

top: 149px;
left: 54px;
width: 463px;
height: 208px;
text-align: left;
font: normal normal medium 45px/61px Oswald; 
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;

Btw, I am familiar with the font shorthand like font: italic small-caps bold 12px/30px Georgia, serif; and it works too but what is this new format that Xd is suggesting? Even Chrome is finding it as invalid.

What don't you understand about it? The information given in the MDN documentation for the [`font` shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/font) seems to give useful information. — David Thomas, Dec 14 '20 at 17:56
But your question - as you asked it - is: "What does '`normal normal medium 45px/61px Oswald`' mean in a css font rule?" which MDN explains; you may wish to edit your question to make it clear what your specific question is. — David Thomas, Dec 14 '20 at 18:01
Try putting font-family value (Oswald) in the beginning of the rule — Misha Borisov, Dec 14 '20 at 18:03

simmer · Accepted Answer · 2020-12-14T18:05:56.703

8

Shorthand syntax for the font property translates to:

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

So that generated code is equivalent to:

/* font: normal normal medium 45px/61px Oswald; */

font-style: normal;
font-variant: normal;
font-weight: medium;
font-size: 45px;
line-height: 61px;
font-family: Oswald;

The invalid property here is font-weight, which can't accept "medium" as a value. "Medium" is an OpenType value that roughly corresponds to font-weight: 500, but isn't a valid CSS value.

This is a useful debugging technique for future reference: if you ever run into the invalid property value error when using CSS shorthand, it's helpful to rewrite the shorthand property as individual properties, which then lets the browser's devtools point out exactly which property has an invalid value.

edited Dec 14 '20 at 18:05

answered Dec 14 '20 at 18:03

simmer

2,639
1
18
22

Ahh makes sense, Thanks. – Mohd Abdul Mujib Dec 14 '20 at 18:04
1

Cool, Thanks for the nifty tip. – Mohd Abdul Mujib Dec 14 '20 at 18:06
It was a subtle error! I initially read right past my own `font-weight: medium` line without realizing that was the invalid bit. – simmer Dec 14 '20 at 18:18

What does 'normal normal medium 45px/61px Oswald' mean in a css font rule?

1 Answers1