CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

Can I contain my em sized font inside a px line-height?

The CSS I am looking at looks like this:

header .logo {
    text-align: center;
    line-height: 77px;
    font-size: 4em;
    font-weight: bold;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

Can someone tell me if this is likely to be a problem if I move to a mobile device? Should I ALWAYS contain a font with em size inside a line-height with em size ?

Upvotes: 1

Views: 135

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

The px unit and the em unit are very different. The px unit denotes a pixel, which is a relative concept and may vary by presentation device (see CSS Values and Units Module Level 3 for a detailed explanation), whereas the em unit, when used in the value of a font-size property, denotes the font size of the parent element. That size varies by context, by CSS rules applied, etc., and is ultimately under the control of the user. So it can be just about anything. If you assume em to be something specific in pixels, then the assumption will inevitably fail in some situations; and if you assume a specific size, why not use px throughout?

So you should set font-size and line-height using the same unit or using units with fixed, well-defined relation. Usually, you should set both in em units, or both in px units, to make sure they fit together. You can however use a pure number for line-height, like line-height: 1.2, if you set font size in em, since the pure number effectively has em as the implied unit except for inheritance issues.

For example, either

line-height: 77px;
font-size: 64px;

or

line-height: 1.2em;
font-size: 4em;

would be consistent.

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

In theory, the em unit is the new and upcoming standard for font sizes on the web

I don't think using em here would be a good idea, specially when your viewing device ranges from normal computer screen to a mobile device

Comparing EM, PX, PT and %

Here your Line height is persistent to 77px but the size of em will change as per as viewing device.

Upvotes: 0

matewka
matewka

Reputation: 10158

em unit is:

Equal to the computed value of the ‘font-size’ property of the element on which it is used.

That's what the specification says.

So, in your case font-size will be four times bigger (4em) than it would be normally inherited and line-height will be always 77px.

Depending on what you want to achieve, you should generally abandon your approach because no matter how your font-size changes the line-height will be always the same. I suggest setting line-height in em.
Personally, I use em units very rarely. I try to always work with px. I do a lot of responsive design.

Upvotes: 0

Related Questions