Is space allowed around the slash in CSS font shorthand?

User avatar for Bart Veneman Bart Veneman in blog

Let’s say you’re writing a CSS pretty printer and you come across the / symbol: what do you do? You add space around it. Except in font: 16px/1.2 serif;, because no one ever seems to do it there. This leads me to think: is space around / even allowed in the font shorthand and does it actually work?

Testing shows that 16px/2 is the same as 16px / 2 and the spacing seems to work in all major browsers (Safari 17.1, Firefox 119, Chrome 119). The spec also does not seem to mention anything around whitespace, so we’re good there too. So why do we write it like this?

I could not find any sources or style guides that dictate the use (or lack) of space of / in shorthands, so if you do, please let me know! I guess the lack of space around the slash in the font shorthand is just an age-old preference and not commonly applied to other places.

What does this mean for our CSS formatter? Well, I’ve grown so used to not using spaces in the font shorthand that I’ve written a single if-statement to not add whitespace in that particular scenario. Other cases, like calc(2em / 2) and background: no-repeat center / cover url('image.png'); still get the extra space.

Back to blog

Popular posts