CSS: Different Font Size for Each Font in Font-Family

[STINGER_LP]

Hi all. This is my first post here and i have a question.
I need to specify somehow the "font-size" CSS property for a each different font stated in "font-family" property.

Because each font have a different natural sizes (kerning, tracking... bla-bla-bla) it displayed differently with the same stated size (one looks bigger then other or vice versa).
So when i set "font-size" for my main font, the other specified below displays differently. And when visitor wouldn't have THAT "main font" on his computer he'll see site's content with a different default font that i specified. And the text size will be bigger/smaller than with "main font".

So i think about how to specify a font size for each font to solve this issue. Maybe create a separate .css for each font, but how to determine with what font site displayed? Or check what fonts (of specified in "font-family") user have on his PC/Mac...

P.S. Sorry for my english if something i said is not correct

 

[PixelPusher]

First off welcome to WDF, and your english is a little rough but ok

Generally when you declare a font family, you should use a secondary family (and tertiary if you want) and then end with a default face (sans or sans-serif). This way if the user does not have the first font in your list it resort to the second, and then if no second it takes the default, make sense?

For example:

p.similarFamily {
font-family: "Century Gothic", Arial, sans-serif;
}

The code above will apply Century Gothic if they have the font, if not, then it will use Arial, and if Arial is not available, it will use the computers default sans-serif font.

Now regarding font size, if you use similar font types, the size will generally be very close between them. What specific fonts are you having size issues with?

 

[STINGER_LP]

Thanks for reply. I know that about "font-family" that's why i wrote: "when visitor wouldn't have THAT "main font" on his computer he'll see site's content with a different default font that i specified". I faced this issue because of font called "Calibri" (Windows Vista & 7, MS Office 2007 default) and others. My example of font-family line:

font-family: Calibri, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;

I strongly want to use Calibri as a default font for the main body text, if user haven't this font (but i think the majority of my visitors have it) then Trebuchet MS goes, and so on.
And if font-size = 17px (105% in my case) Calibri looks fine, for Trebuchet MS font-size must be 16px to looks same as Calibri. Same situation with Arial. Geneva and Helvetica i haven't tested yet. Mac users are only 0.3% of all my visitors, so it only just in case.

 

[PixelPusher]

Have you tried using "em" measurements instead of pixels? An "em" unit is a measurement used in typesetting that is approximately the width of the letter "m". Using this method allows for better, more unified scaling of text in all browsers.

FYI - i would refrain form using Helvetica as a web font. The kerning does not display too well so words do not always read correctly. For instance: the word "click" looks like "dick" lol. Just a recommendation. Helvetica is better suited for print.

 

[STINGER_LP]

Have you tried using "em" measurements instead of pixels? An "em" unit is a measurement used in typesetting that is approximately the width of the letter "m". Using this method allows for better, more unified scaling of text in all browsers.

FYI - i would refrain form using Helvetica as a web font. The kering does not all work so well and words do not always read correctly. For instance: the word "click" looks like "dick" lol. Just a recommendation. Helvetica is better suited for print.

Thanks for advise about Helvetica. And yes, i've tried "em" and "percentage". I've experience this problem with all measurements. I have all font sizes set in percentage now.

 

[ddt]

Thanks Pixel Pusher, your advise on Helvetica is very useful information.