0

I have a lot of css class where I redefine font sizes, example:

.ko {font-size:2.2em;}
.szik {font-size:2.8em}

Now I replace my default font with a custom one, I define a new one:

@font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
}

My problem is that the font size of the old one does not match with the new one, and my last chance to rewrite my all code. Can I solve this problem easily? How?

I try this solution, but it's not working.

@font-face {
    font-family: BebasNeue;
    src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
    font-size: 10.5em;
    font-size-adjust: 10.5;
}

Thanks for the answers.

flatronka
  • 1,061
  • 25
  • 51
  • I'm not sure I understand. But the font-size should be on an element and not where you import the fonts. – JimmyRare Dec 23 '12 at 23:53
  • 1
    Also font-size can not be assigned to `@font-face` – Arash Milani Dec 23 '12 at 23:54
  • 4
    Arash is wrong. Use `em` sizes, and you **won't** need to redo your sizes again. `em` is essentially a percentage from the parent. If you started with a base size on your body and use `em`s throughout, then you will be fine. – Brad Dec 23 '12 at 23:58
  • 2
    There's no difference between `150%` and `1.5em` when it comes to font-size. They are the same. It sounds like the OP's problem is that FontA and FontB have different glyph heights or widths (ie. FontA is larger or smaller than FontB). – cimmanon Dec 24 '12 at 00:00

2 Answers2

2

The font size is not changed at all when you change font family, but the dimensions of characters will change. If this is a problem, you need to reconsider your choices of font families and font sizes.

You’re not describing how you use fonts, so I’ll make a guess. Suppose your copy text font is Arial and you are using Bebas Neue for headings. In Bebas Neue, all letters are about as tall as uppercase letters in Arial. It’s an odd font that intentionally loses case distinctions, and this has its implications. (For example, if you used a huge relative font size like 2.8em, the sizes of letters will become even more huge, when in BebasNeue versus copy text Arial.) If you use it, you simply need to select font sizes accordingly. This should not be a big issue if you have set heading font sizes in a controlled manner.

In principle, you could use font-size-adjust to tune font sizes according to font family, but it works on relative x-heights (10.5 would be an absurd value), and it is only supported by Firefox, in a broken manner.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

You don't need to rewrite all the font sizes, just change the font-size for the body tag:

body {
  font-size: 15px; /* use an appropriate value */
}

When you say "1.2em" in a css rule, you're just saying that you want to use the inherited font size * 1.2. Is the same as using percentages.

alf
  • 18,372
  • 10
  • 61
  • 92