Can someone help me out on this one. I have a website which was developed on a Mac. When viewing certain text in "verdana" on the Mac all looks great, but on the PC the text is very fine and thin on all browsers. Other text with bold and larger size seems to present the same on both PC and Mac. Is there a simple way I can improve the browsers text representation on the PC.
The two operating systems have different text rendering algorithms. The contrast is most drastic on thin letters, where Windows mangles the letterforms slightly but makes them look very crisp, while the Mac causes thin text to look smudged but preserves the shape better. This is not in your control as a Web developer.
Rendering always depends on system. Like on windows, if the user has setup clear type fonts, he will be having a much better experience.
Some useful information
that may help take decision on improving font families for different systems
Common fonts on all systems
Some good information on various fonts that work on different systems and are best rendered at certain sizes.
-
codestyle.org determined best fonts via survey.
See that verdana comes out lower in both case.
For Windows:
Tahoma – 99.81%
Microsoft Sans Serif – 99.71%
Courier New – 99.66%
Verdana – 99.66%
Times New Roman – 99.37%
Arial – 99.32%
Trebuchet MS – 99.27%
Comic Sans MS – 99.13%
Lucida Console – 99.13%
Georgia – 98.94%
Impact – 98.89%
Lucida Sans Unicode – 98.65%
Palatino Linotype – 98.65%
Arial Black – 98.55%
Franklin Gothic Medium 97.96%
For Mac:
Helvetica – 100%
Lucida Grande – 100%
Geneva – 99.43%
Monaco – 99.43%
Courier – 98.85%
Times – 97.70%
Arial – 97.41%
Verdana – 97.41%
Georgia – 95.11%
Helvetica Neue – 95.11%
Trebuchet MS – 94.54%
Times New Roman – 94.25%
Related
Is it allowed to use:
"font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif"
And just rely on the font thats already installed on the system. Including "ROBOTO" on any android device...
I would like to go away from google-fonts (Open sans), as it is causing data-protection problems in EU, and is also blocking website speed (CLS). Whatever.. I think its stupid to download a font.
I know it will look slightly different on Windows and Mac Systems, - but anyway it does look different on Android devices all the time, so let the Mac use Trebuchet MS an I am fine with that. It will not destroy the whole design.
I just would like to use "Segoe UI" if it is available on a Windows System (and it is on 99,9% of them anyway)
I do not offer it for download or safe it somewhere.
Is that legal?
I found the standard-web fonts (Arial, Verdana,...) are always missing a semibold weight, thats why I dislike to use them.
It is legal if you don't upload it on you site, if you just specify like font-family: Segoe UI, Trebuchet MS, Lucide grande, sans-serif its legal
If you want place font to your site (upload to your server) for all users (not only if they have it on PC) you need to buy Web License for it
I have spent a long time reading about the advantages of using "open sans", "promima nova", "Helvetica Neue" and some other new fonts which I am told are all better than those fonts we have been using for a long time.
But when it comes down to it. Will most people actually notice any difference and what if I just use Arial in my font-family with no backup font at all.
If my users are using the modern browsers / modern operating systems from the last couple of years will that be a good choice for a very readable font or is there another font stack that people can recommend?
One recommendation I saw was to use the stack:
font-family: Arial, Helvetica, sans-serif
But why? Is not Arial installed on every computer?
With services like Google Fonts and others like it (no affiliation), this question becomes less important. Such font services allow you to choose pretty much any typeface that you want, and be guaranteed that it will work for all of your visitors.
This may not directly answer your question, but it does clarify the fact that a user's installed fonts aren't as important anymore, and there's no reason to fall back to plain old Arial.
No. To begin with, most smartphones do not have Arial.
The other part of the question asks for font recommendations, which is off-topic at SO.
The reason why fallbacks are recommended is that indeed, not all computers have widely distributed fonts available. In particular, most Linux distributions do not come with Arial or other Microsoft fonts due to licensing issues, such as Ubuntu. Setting a sans-serif fallback is not a bad idea, since if the font is missing, then it may default to a serif family font, which may be very different from the intended font.
To answer your question, Arial will not necessarily work on every computer and mobile device, it will work on most, but it is still good practice to leave a generic fallback.
My research indicates that for Windows, Helvetica falls back to Arial but is it also true for linux?
EDIT
Helvetica.ttf is present on my system. Also on another system where it is not present, the same behavior can be seen.
EDIT
Do not know how but this is a comparison between how Firefox rendered it and how Chrome did it (I have erased the non-required parts of the images):
As can be seen the first two 'GR' on both browsers are in Helvetica (technically) but only Firefox renders Helvetica, while Chrome does not.
No, this does not affect Linux computers.
Windows silently maps "Helvetica" to the Arial typeface - this probably a legacy from the time when most web-designers were using Macs, and Mac OS X comes with Helvetica but Windows doesn't, instead it has Microsoft's Helvetica knock-off: Arial. Designers of the time overused Helvetica in their CSS documents without specifying a good fallback for Windows, or even the sans-serif fallback family so Windows users would have gotten Time New Roman or some other serif font when it was the baseline default in IE 3.0 and 4 (remember when webpages had grey backgrounds by default, not white?).
Linux isn't Windows, and therefore does not have this problem - instead it has it much worse: (Most) Linux users don't have Helvetica nor Arial installed - so they're very dependent upon CSS authors specifying baseline families (sans-serif, serif, monospace, fantasy). But nowadays you can use WOFF to embed fonts in webpages without depending on them being installed, but be careful as fonts are regularly 30KB-300KB in size, or even larger (Chinese-language fonts are often 30MB!).
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am working on a WordPress site that will be entirely in Arabic (except for the backend). I am an English speaker and have never dealt with Arabic in my time as a web developer. What font choices do I have that should be available on the vast majority of Arabic speakers' computers?
Font stack
Be sure to use a CSS 'font stack' to list many fonts by name in order of your preference. For example:
font-family: "Geeza Pro", "Nadeem", "Al Bayan", "DecoType Naskh", "DejaVu Serif", "STFangsong", "STHeiti", "STKaiti", "STSong", "AB AlBayan", "AB Geeza", "AB Kufi", "DecoType Naskh", "Aldhabi", "Andalus", "Sakkal Majalla", "Simplified Arabic", "Traditional Arabic", "Arabic Typesetting", "Urdu Typesetting", "Droid Naskh", "Droid Kufi", "Roboto", "Tahoma", "Times New Roman", "Arial", serif;
CAVEAT The fonts above were arbitrarily chosen as possibly having Arabic glyphs. That list is not my recommendation; I have not seen any of those fonts as I neither read nor speak Arabic. You are responsible for making your own choice of fonts.
Alan Wood's Unicode Resources provides lists of Arabic fonts for:
Mac OS X
Mac OS 9
Windows
Those lists are somewhat outdated. You may find that Apple, Microsoft, and the Linux makers have been adding more and better fonts to better support non-European scripts in recent years.
Alan Wood also provides this Arabic test page.
DejaVu Font
DejaVu is an actively developed, open-source, free license, and free of cost font. Has wide support for various scripts including Arabic. Installed by default on many Linux distros. Has serif, sans serif, and monospace families. See PDF samples.
Most glyphs are well designed. If you find any to be lacking, you are welcome to design and contribute improvements.
BEWARE DejaVu is released in different packages. The LGC downloads (Latin, Greek, Cyrillic) omit Arabic and similar character sets due to technical issues. Pay close attention when choosing from their download page.
Google for "font survey" to find percentage of computers that have been found to have various fonts installed.
Fonts supplied with:
Mac OS X (Apple)
Across generations (click to sort on Target script)
iOS (Apple)
Across generations
Windows (Microsoft)
Across generations (click to sort on Target Script)
Windows 8
Windows 7
Windows Vista
Windows XP SP2
Google
Roboto font
Droid Arabic Kufi & Naskh for Google™ fonts
+1 with Tahoma and DejaVu ("DejaVu sans" for emphasis) were the way to go, but things are changing --thanks God-- with first Arabic Web Fonts coming out earlier this year.
Alefba has put some useful information and ressources on the subject, e.g. Arabic and Persian Webfonts with WordPress blogs
See also How to use custom arabic fonts in your web design projects recently published by Hussain from Bahrain Web Design
Hope this will be of any help for you or any other Arabic website designer.
Google provides free fonts
Getting Started Guide: https://developers.google.com/webfonts/docs/getting_started#Quick_Start
Tahoma from 0.5em to 1.1 em and Arial from 1.2em and up
There are a list of these kind of fonts. Here are the ones I think are best, but you have to decide for yourself of what font is best for your website.
WebFonts:
Dinnext
Greta
Arabic
Droid Sans
Jennah
Helvetica
Ge
SS
Cocon
ff Frutiger
Hacen
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.