CODEWITHSUNDEEP
css
Goran W
Goran W

Reputation: 317

CSS: What/why specify font-size as font-size: 14px/1.31em?

In CSS, I've seen setting the font-size using both px and em as below:

font-size: 14px/1.31em;

What exactly does this way of writing mean and what problem do I solve by using this way of writing?

Thanks!

Upvotes: 0

Views: 1368

Answers (1)

lvarayut
lvarayut

Reputation: 15249

Here is the exact definition of em and px

Ems (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

What exactly does this way of writing mean and what problem do I solve by using this way of writing?

When you set your font-size equal to 10px, for example, and you use the 3em. You will get 30px (10*3).

EDIT:

Basically, we can use font: 14/1.31em, which is a short-hand, to set the font-size and line-height.

However, in your case, font-size: 14px/1.31em; doesn't have any short-hand. So, you cannot set it this way. It is a wrong syntax.

See more explanation of "CSS Font-Size"

Upvotes: 1

Related Questions