I'd like to set different line-height for different fonts from a list fall-back fonts. For example:
body {
font-family: "Small x-height font", "Larger x-height font", sans-serif;
}
When the preferred Small x-height font is used, I'd like to set line-height to 1.3. When Larger x-height font is used because the preferred font is not available, I'd like to set line-height to 1.5. When both fonts are not available and the sans-serif fallback is used, I'd like to set line-height to normal.
Is this possible using CSS 2.1 or CSS 3 without resorting to JavaScript?
Rationale The problem is that different fonts have different x-height (the height of lowercase letters such as x relative to the font size). To make text with larger x-height look good, it must be set with a larger line height. The x-height of the default fonts (sans-serif in the example above) is unknown and may differ drastically from the x-height of the font of our choice. So a line height that looks good with our font may look ugly when the font failed to load.
I don't believe there is a way to do this in the exact way you are requesting.
However, I can tell you that if you are using a font service (eg Typekit), you may be able to style fallback fonts depending on whether the font has been loaded or not.
In Typekit's case, they add classes to the element when the font is loading, loaded, or inactive. They also provide classes for the specific fonts/weights.
You can then provide specific styling depending on the situation.
Here's a rough example:
body {
font: 400 16px/1.5 "typekit-font", "fallback-font";
}
.wf-inactive body {
font-weight: normal;
line-height: 1.8;
}
More information can be found in their corresponding help article.
There is a font-size-adjust property in CSS3 which addresses this problem. You can specify font-size-adjust: 0.6 for your body and all fonts will be transparently scaled to have the x-height of 0.6em. This has the additional benefit that you can combine fonts with different original x-height on the same line and they will have roughly the same lowercase letter size without the need to adjust font sizes manually.
Only Firefox implements font-size-adjust (as of November 2012). WebKit does not.
See the CSS3 Fonts specification for more information and David Baron's post for some examples.
In CSS, you cannot make the value of a property depend on the choice of a font. Basically, properties are independent of each other, with some exceptions that do not apply here.
Normally, fonts in a font-family list should be more or less similar in general characteristics. It’s not just a line-height matter. The choice of a font affects the page as a whole.
A different strategy is to use a downloadable font via #font-face. Then you can be reasonably sure that your font will be used, and you can set line height and other properties according to it.
Related
What is the difference between the terms 'text' and 'font' as used in CSS property names? Do they mean the same thing, or is there a semantic difference between a CSS property name starting with font- and one starting with text-?
For example, why do we have these CSS properties:
font-size: 34px;
text-decoration: underline;
instead of them being named like this?
font-size: 34px;
font-decoration: underline;
or like this?
text-size: 34px;
text-decoration: underline;
Is there a semantic difference in the way font- and text- are being used here, or is the choice of prefix completely arbitrary?
As far as my understanding goes about this:
Text: The way the layout and presentation is computed.
Font: A character to glyph mapping. The 1-to-1 'mapping' doesn't entirely hold up when you consider ligatures and other advanced font features, but in general it is a good mental model. The font determines the shape of the characters.
You can underline text drawn with a certain font, but you cannot underline the font itself. You can, though, resize the shapes such that text drawn with that font has larger glyphs. (hence, font-size)
That's also why you have font-style: italic and not text-style: italic, since the actual shapes change when you typeset in italic. The same goes with font-weight vs text-weight.
Hope this helps.
If you look at the properties starting with text- and those starting with font- you can see a clear difference:
text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
These are all used for layout, positioning or visual presentation of the text.
font
font-family
font-size
font-style
font-variant
font-weight
#font-face
font-size-adjust
font-stretch
And these are all used to transform the shapes of the characters, the glyphs.
The parts of a CSS property name have no meaning, and the property name as a whole has only the meaning assigned to it in CSS specifications (or drafts). Usually the names, when interpreted as English words, are suggestive of the meaning, but the name does not define the meaning, and some names are outright misleading. (For example, white-space affects division into lines even in contexts where no whitespace characters are involved.)
So the names are just identifiers, but there might be some systematics in the assignment of names. As it happens, property names that start with font- relate to the choice of typeface used to render characters or a specific way of using a typeface. Property names that start with text- relate to other aspects of formatting text (characters).
This division is relatively clear, but it depends on the techniques: some features of formatting are font-related, due to the way font technologies work, some are not.
The division is reflected in CSS3 “module” division: font-related features are defined in CSS Fonts Module Level 3 (which defines properties with names beginning with font), whereas other text-formatting features are mostly defined in CSS Text Module Level 3 (which defines some properties with names beginning with text-, but also other properties).
Looking over the font- properties listed on MDN's CSS Reference, it seems to me that properties starting with font- affect, or at least have the potential to affect, the choice of which font from within the font-family to use to draw a particular character. Properties starting with text- never do this, but do all kinds of other stuff, including post-rendering to add text effects like shadows that are independent of glyph choice.
For instance...
font-family - provides a list of font families from which to choose a font with which to render each character; obviously, this affects glyph selection.
font-weight - where possible, shows the text at the correct level of boldness by selecting an appropriately bold font from within the font-family.
font-size - may apparently affect the actual font chosen, because not all font formats are arbitrarily scalable. This is corroborated by the following quote from the font-family docs (emphasis mine):
When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.
(Although I'd guess this is mostly a historical issue, since I don't think non-scalable font formats are still in use today.)
font-size-adjust - much like the above.
font-stretch - to quote the docs:
This property does not change the geometry of an arbitrary font by stretching or shrinking it. Like font-feature-settings or font-variant, it is merely a mean to choose the most appropriate face of the font, if this one offers several of them.
... and so on. Not all these properties always affect font selection; for instance, font-size is obviously about glyph rendering, not font selection, in the case of scalable fonts, and the font-weight and font-style properties may result in the browser synthesising bold or italic glyphs rather than using a bold or italic font, as noted by W3:
Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.
The thing that the font- properties have in common, though, is that they are the properties that can potentially affect font and glyph selection. So the choice of when to use the font- or text- prefix seems not to have been made arbitrarily.
My problem is that I am using a locally-hosted webfont (which we'll call Gothic) and the font-size I apply in the stylesheet has a dramatic effect on the backup fonts declared.
Example, using imaginary numbers for ease:
Gothic is sized at 48, px or em, takes up about a width of 300px. Backup font Arial, if it loads instead for whatever reason, at 48 px or em, loads at a width of about 1200 pixels.
I have never seen a typeface behave like this which makes me wonder if the strangeness is due to the construction of the file format, but I am unsure. Any help would be welcome.
First of all, take a look at browser's #font-face support and note that:
EOT format is supported by IE only
WOFF is supported by any browser but IE8
SVG is not supported by IE and Firefox
TTF/OTF is well supported by any browser but IE
Do you cover any browser?
Then you need to provide a fallback for browsers not supporting #font-face at all.
I suggest you to include Modernizer on your document's head section.
Select #font-face and Add CSS classes on Modernizer's download page, or follow this download link.
Modernizer adds classes to your page's <html> element, so you can use this classes to override settings for browsers not supporting a specific feature.
This rule will apply to the whole document:
.no-fontface {
font-size:16px; /* the font size value for Arial only */
}
It must be placed below any other font-size rule.
Alternatively, you can declare font-size:16px !important; and put the rule anywhere in your stylesheet. It will not be overwritten (except by other rules using important! of course).
If you want to target a specific element, you've to put .no-fontface at the beginning of the selector. For example:
.no-fontface #header h1 {
font-size:18px;
}
Ideally, you want to choose a group of fonts with similar proportions for your font stack. If there's no font that you can expect on any OS that's similar to your preferred font, then there's not really you can do at this point in time.
Font-sizes are not something you can rely on anyway, as users can and will modify this. What happens to your designs when they do?
Is it possible to set a different font-size according to font availability?
Currently my problem is that Verdana is too big, and if the user don't have Verdana installed, I will end up with a very small font-size
Is there is any way to set a font (Verdana in my case) to 13px and if the user don't have that font installed, try with another font (Arial for example) but with bigger font-size?
Notes:
Preferably CSS only
CSS hacks allowed
As was answered just a minute ago by someone else (but already deleted?), you could use Font Detector Javascript solution:
http://jsfiddle.net/FHnJw/1
This might take some work to implement (I have not ever actually done it myself), but it seems that the font-size-adjust property helps "equalize" font's by standardizing the x-height. See http://www.w3.org/TR/css3-fonts/#propdef-font-size-adjust for the official description.
Font-size adjust only works with Firefox
The standalone 'font' css declaration only allows you to state font-size, style and weight once before declaring the different font families in succession so that's a no-go either
I'm sorry to say this cannot be done through css alone
As for the JS alternative, here's the one I recommend:
http://www.lalit.org/lab/javascript-css-font-detect/
Good luck
I have a CSS declaration like this:
font-family: font1, font2, font3;
where font1 is an embedded eot/ttf font, but the problem is that this font is smaller than the other fonts so I want to have a different font-size (1.8em) for this font (font1). All other fonts (font2, font3) stay untouched.
The problem is, that I cannot verify if the user's browser uses font1, font2 or font3. Is there any css declaration which allows different font-sizes for different families?
Thanks.
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
I know it has been a while, but recently I stumbled upon the very same problem as described by the OP. As font-size-adjust is still very poorly supported, I'd like to share another solution that worked for me:
Note: The following solution does only work if the fonts are embedded using the #font-face-declaration.
In that case just include e.g.
size-adjust: 90%;
in your #font-face-declaration. The relevant font will appear at only 90% the size of the specified size.
Browser support
Browser support is currently at 74% with all major browsers supported except for Safari and IE. I know this is far from optimal. But as this problem is "just" about design and not about functionality, I suppose it is better than nothing.
I'm working on a WordPress that will allow the site administrator to switch between sans-serif and serif fonts.
I'm trying to code the stylesheet in such a way that the font sizes are similar whether or not they choose Georgia vs Arial.
The problem is that when I have it looking nice with a serif font, it looks WAY too big when in sans-serif. When I then adjust it to look nice in a sans-serif font, it looks WAY too small in serif.
Is there an ideal font size and line-height that works well with both serif and sans-serif?
Or do I need to make separate stylesheets (a serf version and a sans-serif version)?
P.S. I've set a base font size on the body at 12px, and then set the rest of the font sizes as a percentage of the base. Of course, this base font size could be set in ems or in percent, because the percentages will still scale proportionally.
The issue you're running into is related to the different relative x-height of different fonts, which is just repeating your original issue in technical terms: Georgia # 12px does not equal Arial # 12px. This is due to the fonts' aspect value.
There is a css3 property "font-size-adjust" which will in theory equalize the x-height of all fonts to the one you specify, but I'm not sure if it's widely supported, or supported at all. You can read about it # http://www.fonttester.com/help/css_property/font-size-adjust.html
You can check out this page, which has a javascript solution:
http://www.brunildo.org/test/xheight.pl
And finally, the w3 documentation for your issue:
http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
hope some of that helps.
Well first I would use em unless you have a compelling reason to use %. Also at a 12px base font size I like to set my line height to 1.25 or 1.5 em (15 or 18 px). Then you need to find a serif font that approximates the spacing of the sans serif... or vice versa. If you research "font stacks" you can find some good information on what fonts are good to use together.
Thanks for both of your answers. Very helpful information here. I learned some things about font stacks and relative sizes that I didn't know before. I'm going to offer users the ability to change their font sizes and "tweak" them to match their liking.