CSS Different Font Sizes on Different Families

css different font sizes on different families

There is a way to do this, but it's as of now very badly supported. The CSS property you are looking for is font-size-adjust - a new CSS3 property introduced specifically to address this problem. The specification says:

In situations where font fallback
occurs, fallback fonts may not share
the same aspect ratio as the desired
font family and will thus appear less
readable. The font-size-adjust
property is a way to preserve the
readability of text when font fallback
occurs. It does this by adjusting the
font-size so that the x-height is the
same irregardless of the font used.

However, it is only supported in Firefox as of now, so you might want to look for alternatives.

For examples of how to use it, see:

http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/

https://developer.mozilla.org/en/CSS/font-size-adjust

http://www.fonttester.com/help/css_property/font-size-adjust.html

http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

Fonts inside a font family display different in size

What you are looking for is the font-size-adjust property — a nearly perfect solution to this problem. Of course, browser support is terrible: it only works on Firefox.

Here's an example (open in Firefox): http://jsfiddle.net/zL6vL/1/

Assigining different font-size per each font in one font-family

You cannot set font size so that it would depend on the font family.

Instead, try and find a font that is suitable for both (or all) languages on the page. The font designer should have taken the different characteristic of different writing systems into account. Usually fonts designed for e.g. Asian languages have Latin letters, too (at least the basic Latin letters, which mostly suffice for English).

If you really want to set different font properties for different writing systems, you need to use markup that distinguishes between different languages, e.g. using lang attributes in HTML and selectors based on them in CSS. But normally the use of different fonts is a problem to be avoided, rather than a solution.

How to set two different font sizes in the same p

<p id="losinfo">Los Santos: <span id="secondText"> a sprawling sun-soaked ...</span></p>

Then style #losinfo and #secondText differently in css.

CSS specify font-size for each font in font-family?

Consider supplying similar fonts as alternatives. For instance:

font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;

That way, the alternative font won't make the layout break.

---

Related Topics