Many popular websites (including Stack Overflow, GitHub, Medium and Wordpress) have adopted the usage of the system font stack.
What is the system font stack?
Why should I use the system font stack?
What should the system font stack look like?
There are many different sites with different versions of the system font stack, but it is not obvious which one is most up-to-date and has the most compatibility with modern devices:
systemfontstack.com
CSS Tricks: System Font Stack
Related questions:
Does specifying “Roboto” in a “system font stack” actually do anything?
How to specify the system’s default serif and sans-serif font-family?
What is the system font stack?
The CSS font-family property takes a list of fonts and uses the first one which is available to the browser.
A (not the) system font stack is a list of fonts which are:
likely to be installed on lots of computers (with the goal being to have at least one font in the stack available on every computer that might view the website)
similar in appearance so the design is consistent (e.g. similar letter widths, etc)
As I said, this is a "a" not "the" matter. A list of system fonts similar to Ariel is going to be different to one similar to Times New Roman.
Why should I use the system font stack?
To get a consistent appearance across different devices without the bandwidth or time implications of loading a font file from the Internet.
What should the system font stack look like?
That's a matter of opinion.
While it is backed up by science (people do research on the availability of fonts across devices), which fonts you want to use and decide are similar enough for your purposes isn't cut and dry.
1. What is the system font stack?
This generic font family lets text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms.
W3C CSS Fonts Module 4: system-ui
2. Why should I use the system font stack?
The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.
W3C CSS Fonts Module 4: system-ui
3. What should the system font stack look like?
If you don't need legacy browser support (mainly IE), system-ui covers all modern browsers except Firefox. For Firefox, you can still use -apple-system for macOS and iOS with something like font-family: system-ui -apply-system;.
Related
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.
I'm currently developing a site for my University's library, and a very strange issue came up. The font on the website, whether the live version or the one on my machine (not the server) is always smaller than it should be. This is only the case on two computers--my own, and my supervisor. It happens in all browsers. I'm pretty sure it's happening on both of ours because we've handled code, but I can't think of any CSS rules that would be affecting it. To make it worse, it's affecting two different CSSs--the old site (which I have not touched) and the new site which is intended to be rolled out tomorrow. I've tried fixing the way the computer displays fonts, the way browsers display fonts, changed the resolution, and tried zooming in. None of those methods worked. Also, other computers with the same resolution and monitors look at it just fine. No other websites that I visit have this issue. I'm stumped. Any ideas?
The site is here: http://library.uis.edu
Comparisons of the text can be seen here: http://imgur.com/a/Tb7Mv
I think this might be a font issue, rather then a font size issue. Myriad pro is not considered a websave font. As your machine and probabaly the one of your supervisor have probabaly Adobe installed, wich comes with Myriad, you are seeing the site in Myriad, while the other machines are seeing the site in Verdana. (not entirely sure though)
It looks like you are calling Myriad Pro as the first font. I have that font installed on my system, but you're calling the font size to be 75%, which on a font like Myriad Pro, will shrink it down considerably. If I clear the font-size, and font-family to just Verdana, it renders okay, but some of your elements such as the tabbed nav, would need to be addressed.
I'd stay away from fonts like that unless you are using #font-face and a web generated font pack. By choosing Myriad Pro as your font, you will only render that font on computers that also have the font. Consider using something like Google Web Fonts: http://www.google.com/webfonts/
Having fonts at the body level is fine, and cross fonts (headings versus paragraph) should be handled at a global level for those elements (not the body). Assume the body will take the bulk of the text in the body. You can define a standard font size such as 1.0em; at the body level if you wanted, and then define em sizes for other elements such as h1, h2 tags, and p tags if you don't want to use 1.0em from the body.
I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am searching for a list of fonts I can use in CSS. Since these fonts may be copyrighted, which fonts should I use that are available across Windows (as of XP), Mac OS X and, say, Ubuntu 8.04?
I don't want to rely solely on the newer OSs.
A great bonus would be if the same fonts existed on mobile devices.
See this list of browser safe fonts.
It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.
Here's some required reading:
Safe Web Fonts
Common Fonts
Also some related questions on StackOverflow:
What is the most readable, appealing font?
Font (typeface) selection for the Web?
All about choosing the right font for a website
The only 100% safe way to declare fonts is to use generics as fall backs.
The generics are:
'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western) (wtf?)
'monospace' (e.g. Courier)
From the W3C
All five generic font families are
defined to exist in all CSS
implementations (they need not
necessarily map to five distinct
actual fonts). User agents should
provide reasonable default choices for
the generic font families, which
express the characteristics of each
family as well as possible within the
limits allowed by the underlying
technology.
Fonts such as Arial and Verdana which many web designers take for granted may not be present on Linux browsers (even firefox on centOS from experience). Apple has most of the Microsoft fonts but there are some which are absent.
Typetester!
Features:
compare fonts side by side;
choose from the list of safe fonts, win fonts or mac fonts;
all from the browser.
Just remember: Friends don't let friends use Comic Sans.
(Seriously, you've got good answers above already...).
Verdana is a good one.
CSS allows you to use any fonts installed on the system. font-family allows you to list many fonts. If the parser doesn't find the first one installed on the system, it moves onto the next one. That's why most font-family definitions cascade down to sans-serif or serif. If the browser doesn't have any of your fonts, it uses the default serif, sans-serif, or monospaced font, etc.
If you're a sucker for typography, unfortunately until CSS3 fonts take off you're going to have to live with serving up all the good fonts to your Mac users, since Mac OS X has a far greater selection of great fonts installed than Windows. I get a little depressed when I load up my sites on Windows and I'm greeted with a pile of rigid, aliased fonts.
Here's a guide...
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As for mobile, all I can say is good luck! My daughter got my Blackberry from me for five minutes and changed my background, ringtone, and now all my fonts are cartoon fonts.
Here's a list of iPhone fonts, but it maybe slightly out-of-date. http://daringfireball.net/misc/2007/07/iphone-osx-fonts
You could use sIFR for headers and not worry about web-safe fonts at all. Take a look at the example page. It's pretty awesome.
Arial is my "safe" font that I use all the time.
But I've been using Trebuchet a lot lately. It's common enough that practically everybody is going to have it. It's used all over the place at StackOverflow, FeedBurner, and a lot of other popular sites these days.
But, just in case the user doesn't have it, I'd use CSS like this (just like StackOverflow has it)...
font-family:Trebuchet MS,Helvetica,sans-serif;
I'd recommend using web fonts if you desire layout consistency and complete control over the fonts rendered for your site. Here are some web font services to check out:
WebINK - No longer offered
Google Web Fonts
TypeKit
Fonts.com
All of these services provide thousands of high-quality fonts. Google fonts are totally free. WebINK and TypeKit both require a subscription model. I've never used fonts.com but they probably have a similar model.
Here's a nice article about typefaces for the web.
A lot of fonts are available from modern browsers. However, keep it simple and a little large. Also, use contrasting colors for easier reading.
While having such a list is certainly useful, you should also take advantage of the fallback mechanism of CSS. For example, you can list Consolas, Courier New, monospace in your font-family attribute and get the best possible match on that device.
The last item on each font-family list should be a neutral one such as "sans serif", "serif", "monospace", etc.
This way, your designers can use fonts they think best, as long as there's a reasonable downlevel experience.
See, for example w3.org's guidance
You're pretty save with Helvetica/Arial (yes, I know there's a difference!) or Verdana for sans-serif or Georgia or Times for serif. In your css you can just put a list in your preferred order. You should always end in a generic font-family to cover all your bases.
My sites usually look something like this:
font-family: Helvetica, Arial, sans-serif;
font-family: Georgia, serif;
If you want to get cute and fancy with your typography, you should look into SIFR, which uses flash to embed special fonts.