0

In migrating a site from a in-house CMS to Drupal 7, I'm trying to match font sizes between the older site and the newer one. In D7 we're using a Adaptive theme.

Using Firefox's inspector, the font size has a computed size of 10.88.

enter image description here

My question: in using only font-size: x em specifications, how should I most properly match that? Do increase / decrease the initial em size setting in the Adaptive style sheets?

Improve this question
2
  • 2
    Clearly this is a CSS-only question, and is as such off-topic for this site.
    – Letharion
    Mar 4, 2013 at 18:20
  • 1
    I agree with Letharion on this one. Even though, AT is your base theme, it is a problem that rests in how you are building out your CSS approach. If anyone disagrees, we can bring this to meta and/or vote to reopen.
    – mpdonadio ♦
    Mar 4, 2013 at 19:35

1 Answer 1

Reset to default
2

It depends on the base size of the font, as em is effectively a ratio. If in the CSS for the body of your webpage is

font-size:16px;

Then

font-size:1em;

is equavelent to 16px (100%).

To get from base size (B) to desired size (D) use formula:

D/B

So if your base size was 10px, to get a desired size of 10.8833px:

10.8833/10 = 1.08833

so

font-size:1.08833em;

If the base size was 16px

10.8833/16 = 0.68

font-size:0.68em;

So you need to know the base font size, and then work at an em value based on this. The default size for medium text in a browser is 16px, so if body font-size is set to 100%, then the base size is 16px.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.