I was wondering if there are pre-defined/standardized font-sizes that even though not being a must it is still a good idea to follow when designing a website. I am aware that this might also highly depend on the font that a particular website is using, but let's assume that all fonts are equal and take a popular font like Arial or Helvetica as our base font. For example, what px size would you put for the following font-sizes:
--fs-xx-small =
--fs-x-small =
--fs-small =
--fs-medium = 16px (1rem)
--fs-large =
--fs-x-large =
--fs-xx-large =
In addition I assume that for math's sake we can take the default font-size and just use a rem unit based on that default size. However, in that case are there any pre-defined/standardized rem values?
Last but not least, I managed to get the default font-size value on Chrome by creating a div and then inspecting it via the DevTools panel in the "Computed" section, which revealed that the default unit value is 16px. Therefore, I have set the fs-medium to be 16px, but feel free to correct me if I am wrong.
Thank you in advance and I really look forward to hear what you think on this topic, as well as what is your solution to using different font-sizes.
Related
See images:
Firefox on Mac:
Firefox on Chrome:
On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?
I am using a font with #font-face property.
Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In the meantime, you can do two things.
1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.
2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.
Best of luck.
You forgot to mention which of the two cases is the correct font rendering.
A few ideas that come to mind:
Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.
If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
Also I'm not sure how you are implementing the #font-face - if you wrote it yourself I suggest generating your #font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.
For more help you will need to expand your question with a bit more data - add the #font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.
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.
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