font:0.5em Georgia,"Times New Roman",Sans-Serif;
What does this mean when someone sets 3 different fonts? Also what is the em mean?
Update: Does the double quotations around Times New Roman mean it is telling CSS to use this first?
Multiple fonts indicate an order of preference in fonts to use. In this case, Georgia is the preferred font; if that's not available, use Times New Roman, and finally fall back to Sans-Serif.
em is a relative measure of font size, so in this case it means use half of the "normal" font size.
Failover. If you dont have the first one, it tries the second, and so on.
Yes. The first installed font is used, so, in your case, the font Georgia is used if installed. If not, Times New Roman is used. If neither of these are installed, then any Sans-Serif font will be used. (Yes, Sans-Serif is not the name of a particular font, but a name for a family of similar fonts, without so-called serifs.)
When it comes to the unit "em", please see W3C Schools.
Alternatives in case of a font isn't installed on the system (if there's no Georgia, go for Times New Roman, ..).
Em is a CSS size unit (http://www.w3schools.com/css/css_units.asp). It's equal to the text size (i.E. browser default, depends on context of course).
If a font name contains white-space, it should be quoted. Single quotes must be used when using the inline "style" attribute in HTML
Related
So I was under the assumption that for all possible values of font-weight, all fonts support them. However, this is wrong according to the specifications found here where it says "The nine font weights can not be relied on. These weights are dependent on weight subsets of a font being available." and exemplified in this doodle where there seems to be only normal and bold support (anything <=500 looks like normal) for font monospace. How can we tell, then, how many font-weight levels a given font supports?
In fact, the "nine font weights" are purely a CSS thing, not actually something that formally exists in any font specification. Also, any font can currently only model one weight (the OpenType specification only just got updated with variable dimensioning, and that's going to take a while to a) be refined as "this is the right way to do it" specification and b) make it into browsers), so if you want all nine supported weights you need nine fonts, and for each of those you need to tell CSS which weight it maps to because the font's internal weight value in no way has to match CSS's choice on what font weight numbers are.
If you rely on system fonts by name, or you rely on "not even fonts" by using category keywords like monospace then you're out of luck: there are almost no fonts that run the full CSS font width range.
So: if you want true control and all weights: use a webfont that you know has all nine weights, bound using some sensible #font-face rules. It's going to take a bit of effort to verify they do on your part, but once you do you are guaranteed it'll work in every (modernish) browser, on every operating system.
if you are using a google font, documentation clearly states the font weight available, for example:
https://fonts.google.com/specimen/Roboto
as for built in font, i'm not sure if there is a way. more info on how the browser handles a font-weight that is not supported can be found here:
https://css-tricks.com/almanac/properties/f/font-weight/
hope that helps :)
I'm using the "Quicksand" font for a web project (http://www.google.com/fonts/specimen/Quicksand) and I've a problem : the ² character doesn't exist for that font. I thought that it would be rendered in other fonts (written after Quicksand in the font-family property), but it is not. When I write ², the only thing rendered is a white space.
Is there a way to render not supported characters by other fonts ?
Here's the CSS used :
font-family: "Quicksand", Helvetica, Arial, sans-serif;
There is a bug in the Quicksand font: for the Unicode code position U+00B2, SUPERSCRIPT TWO, it has an empty glyph. It is 396 units wide, so it is wider than a normal SPACE (300 units) in the font. Another character with a similar problem is U+201A SINGLE LOW-9 QUOTATION MARK “‚”, which has an empty glyph 230 units wide.
In principle, you could circumvent the bug by using unicode-range in a #font-face rule to specify that a particular character be taken from a different font. However, browser support is still too limited (and the approach would require that you host the font files instead of using them from the Google server).
Another possibility would be to edit the font. This requires a font editor and a permission from the copyright holder (and your hosting the font files of course).
A third option is to wrap each occurrence of “²” in a span element with a class and setting font-family on them suitably. Beware that this means mixing glyphs from different fonts, which should be avoided in good typography.
Finally, consider using a different font. There are several questions about rendering problems with the Quicksand font at SO.
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'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.
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.