I have a question about font size

font-size:30;

I know there’s:
em, px, pt, and percent

What does it mean when there’s only a number and nothing next to it?

Is there a name for that measurement?

Also, what would 30 be equivalent to in px?

There isn’t. It’s not in the specs.

Browsers have always taken liberties to help render things if there is a developer error. It probably gets interpreted as px in most browsers.

In CSS, font-size without a unit of measure is invalid, therefore ignored.

@asasass, See your previous post for a few more comments.

2 Likes

I’m going to change them to 30 px.

don’t use px anywhere other than for 1px borders. font sizes should usually be specified in em.

1 Like

really, how come?

only until someone zooms the browser.

You should use em because it will change all of the sizes relatively when needed instead of breaking as soon as someone uses different browser settings to you.

4 Likes

What are your thoughts on the using of % for font? http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

When applied to font sizes, percents and ems are essentially the same thing in that they act the same way. 1em = 100%.

1 Like

I was just going to ask you that.

1 Like

In CSS, font-size without a unit of measure is invalid, therefore ignored.

Ah I guess it is. I typed that from my phone and didn’t test it. I assumed OP was asking because it was making his text bigger, which made me think it was one of those things browsers put in for you.

I bet one of the one of the <IE10 would. They do a lot of that crap.

1 Like

I tend to do it like in the Addendum of that article. I set the base size to 100% as part of my reset. I will then use em almost exclusively for any elements with non-standard size.
Note the addendum is dated 2011, so it’s a bit old. There are some new units on offer now, if i’m not using em, I’m using them.
rem is related to em but a bit different, as it does not cascade the same way, it’s relative to the root size, which some find easier to understand and use. I will use it now and again where useful.
The others come with a warning as they can get a little crazy, vw and its kin, vary depending on screen size. You can tame the craziness a bit by combining it with em within a calc() something like:-

font-size: calc(1.5em + 2vw) 

But I would only really use vary-size text for things like headers. And if using calc and vw, do provide a standard unit fall-back for old browsers.
I don’t use pixels for font-size at all. Why? Because I want my visitors to have the freedom to increase (or decrease) their browser font size at will.
When css is done right it should not matter what the font size is from one person’s browser to the next, it should just work.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.