In a web app I work with from time to time the issue of text readability has come up. The reason is that it involves passwords which will be read off of the web page or written down. One of my co-workers pointed out the Crystal font as one that is designed to be unambiguous ("l" and "1" aren't confused, "0" and "O", etc), but I'm pretty sure its not useful on the web. I realize that I will probably have to use a fallback strategy, but am looking for advice on what fonts are good for this purpose and specifically those fonts that users may have available. Also, links to resources on the topic would be great as well. Thanks!
Edit: People have suggested monospace as a readable web font. Can anyone provide additional info on possible fonts that users might have that may be better than monospace so that I can chain fonts together to get the best possible result?
A great start is font-family: monospace. These fonts are designed to be unambiguous.
If you're really desperate to get it exactly right, you can render a little image in your chosen font on the server, then send that.
If readability is the most important thing for the password and you are required to have a specific font you can draw the text on an image on the server using your specific font then serve it to the browser.
The generic monospace font will be somewhat good at this, but not perfect. iIl10oO
However, the best solution is to make sure that the passwords do not contain ambiguous characters.
Try this font stack
font-family: "Lucida Console","Courier New",Monaco,"Nimbus Mono L",monospace;
99% of Windows has Lucida Console and courier new
91% of Mac has Courier New
31% of Linux has Nimbus Mono L
http://www.codestyle.org/servlets/FontStack?stack=Lucida%2BConsole%252CCourier%2BNew%252CMonaco%252CNimbus%2BMono%2BL&generic=monospace&x=5&y=8
As you describe it is intended for people at your work, there's possibly a bit more control on which browser they use. If this browser is modern enough, you can consider using #font-face to explicitly use the Crystal font in your interface.
You can read this article by Paul Irish to learn more about implementing #font-face.
Have a look at #font-face browser support to see which browsers support this feature yet.
Can anyone provide additional info on
possible fonts that users might have
that may be better than monospace so
that I can chain fonts together to get
the best possible result?
On Linux, I like Bitstream Vera Sans Mono (or its more extensive variant DejaVu Sans Mono), on Windows I think Consolas is great (but only if Cleartype is on). Mac users might be fond of Monaco. You could name them all in your font declaration, before mentioning the fallback option "monospace" (which probably is Courier New on Windows machines).
I distributed serial keys before using Courier New and it was a bad idea. We regularly had calls about people who didn't read the key right.
We fixed the issue by using VerdanaMono, but Verdana is very similar (we wanted the keys to all take the same horizontal space). We also provided a list of possible characters so people could compare. (It looked like this : "The available characters are : ABCD... abcde... 1234...").
Related
A web design company design website for me. However, it largely uses Google font Montserrat and Lato, which lead to totally 40 font files(about 1.4MB) to be loaded when users open my website. And based on GTMatrix, 82% data transfer and 56.1% requests are for font files, which slow down my website greatly.
Therefore, I want to find some web safe fonts to replace Montserrat and Lato, so that:
The replacement fonts should look similar to the original fonts.
The replacement fonts should be available in most of the visitors' systems.
It is better to use a font stack so that there will be fallback fonts if these new fonts are not available on the visitors' systems.
In this way, the browser does not need to load additional fonts when user visit my website.
So, firstly, I try to find fonts similar to Montserrat and Lato, I use the following website:
http://www.identifont.com/
It does bring out 30 fonts similar to Montserrat. I call it set A.
Based in the following references, there are no standard list of web safe fonts:
Web Safe fonts - What exactly does that mean?
https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
What I use is a list at https://www.w3schools.com/cssref/css_websafe_fonts.asp, this list seems looks fine. I call it set B.
Now I try to find a font in both set A and B, with Excel. I can find nothing.
So my question is:
Is there a better way to find web safe font alternative to a given font?
Since there are no font appear in both set A and B, I plan to use my eye to check the similar fonts manually, I wonder if there is an easier way to do that?
The list of "web safe" fonts is really small and none look like Montserrat or Lato.
I'd advise you to stick with the fonts your designer picked. You don't have to load all weights (maybe only regular?) and you can host them yourself and use font-display: swap; so the impact on load time is minimized. If that still isn't acceptable you'd have to pick something like Arial or Verdana for a sans-serif that works on both Mac & Windows.
You probably don't need to change the fonts entirely, but you should only be loading the font styles and weights you are using on your website rather than loading all weights and styles. For example, if you are only using 400 and 700 weights in Lato, untick all of the other weights in Google Fonts.
You could also look at font loaders to help with those initial load times, for example: https://github.com/typekit/webfontloader
During development, and until clients have signed off on fonts, I use the external embed links Google Fonts provides. This combined with a SASS variable for the font face declaration in CSS makes it really easy to change fonts project wide if necessary.
As part of the final process for putting a site live once everything has been approved, I will investigate those external embeds and download the actual .woff2 files (plus related CSS) and add them to my own site files. This reduces the site's reliance on external links and makes the whole project more self contained.
I've just checked the project I'm currently working on (which uses three fonts in a variety of weights). All of the font files combined only add up to ~160k - nowhere near your quoted 1.4mb. At this size, and given modern network speeds and browser caching, I see no issue using web fonts.
My advice would be to optimise how your site pulls in the fonts you want to use, rather than looking for system based alternatives. If you are not comfortable doing the optimisation work yourself, I would get back in touch with the developers and ask them to fix the issue.
Im implementing a language plugin on a site, you know the sort click and it changes all the content into Arabic, Russian.. ect (im aware that modern browsers have built in features for this, but we've chosen to go this way.)
What i was wandering is how we deal with fonts, if our normal site is running using
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
Would it just fall back to the browser defaults if it couldn't render the new text in the above fonts?
Or is there a way of specifying fonts after the translation has taken place?
When characters on a page cannot be found in the font listed first in the applicable font-family list, then browsers are expected to scan the list further and eventually, when needed, fall back to scanning other fonts in the system, in browser-dependent manner. However, browsers (especially IE) are known to fail here and, moreover, the process may result in a mix fonts, even characters from different fonts in a single word.
Thus, you should make a reasonable effort to ensure that any font listed in your font-family list is as such sufficient for the text of the page, at least for letters (special symbols may often be picked up from different fonts without stylistic mess). This is virtually impossible for a widget that translates into “any” language.
I suppose you are referring to the use of a service like Google Website Translator. In addition to producing generally bad translations for business purposes, it may mess up the markup of the page, possibly affecting font issues too. For example, it seems to insert rather pointless font markup which may prevent your font settings from working. Moreover, it does not properly set the lang attribute in the translation result (but leaves the original lang attribute!), so you cannot even expect browsers to use their language-specific defaults for fonts right.
I'm not sure what do you refer to when you say "im aware that modern browsers have built in features for this, but we've chosen to go this way" - browsers don't really provide language selection.
There is, however, a reusable JavaScript library that my team developed, that does this, and it takes care of fonts, too:
https://github.com/wikimedia/jquery.uls
https://github.com/wikimedia/jquery.webfonts
You can use it, or take ideas from it to your implementation.
A client needs to have Malgun as the font whenever hangul characters are present. I'm trying to find something to use in CSS that is close to it. I was thinking Verdana. Anyone else have a suggestion?
Verdana is also looking closer to Malgun, I think you should try google fonts http://www.google.com/webfonts
There are no "standard web-based fonts", only fonts that are more or less probable to be installed on the computer, where the browser is running. You may try to build a font-stack, that comes close to the one you want, e.g. the Verdana based font stack from this Sitepoint article, and then use font-loading methods like Google Webfonts to load your defined font for browsers that support loading fonts.
Do not try to give each visitor the same experience, but the best experience possible. Tell your customer, that a website is not a application that looks the same everywhere, but more like a TV program, that must be viewable from a black and white TV also, see this video.
Have you thought about using Fontsquirrel #font-face generator ? Also, for hangul, you might be interested in reading this.
I have converted some open source ttfs from freearabicfonts.com into webfonts using fontsquirrel's webfont converter and gone through the usual css3 steps to get a webfont working (it's definitely there). However, when I try to use the font on arabic text it doesn't work.
background check:
db tables set to utf8, text saved in db as valid arabic, defaultcharset in htaccess set to utf-8, mysql connection: set names as utf-8 done, html5 meta tag set to utf-8, in view source the text is arabic, on the page, the text is arabic..... but the font is the ugly browser standard one...
Anyone ever seen this... I'm pulling my hair out...
Thanks very much indeed.
A
So after a LOT of reading, and bear in mind I am not an Arabic speaker/writer, here are my discoveries and solutions so far:
Currently, there are no solid ways of making Arabic webfonts via online font converters however I would imagine that this will change moving forward.
The options for arabic fonts are the following:
(1) You can use webfonts.fonts.com and their arabic fonts, this list is growing fairly quickly and as of writing this there are 35 font families (195 fonts) link here:
http://webfonts.fonts.com/en-US/Project/Choosefonts#languages%3DW20%26page%3D1
(2) If you have to use your font then you have to convert it yourself and beware, there be dragons down there... The way I font was to use fontforge which is available for unix, for mac you should get this via macports using sudo port install fontforge in the terminal. I think you can get it running in windows using cygwin too. You have to do a lot in the advanced export options to get a perfect result. There's simply too much to explain everything on this post. Instead I strongly recommend you skim read this to get a better grasp of output options from fontforge:
http://fontforge.sourceforge.net/overview.html
http://fontforge.sourceforge.net/gposgsub.html
it's all down to ligatures, glyphs & subsets, however I'm not sure i got mine right as I don't write arabic but mine seems to finally visually match things ok.
(3) As of writing this Google's free arabic webfonts are finished however look over here to track progress:
http://shashafont.com/
I'd really strongly recommend option 1.
Hope that helps someone
The font squirrell converter by default generates a fairly minimal font to keep the size small; any non-Latin characters are removed.
You have to enable some of the advanced options to maintain the arabic glyphs in the font: under "subsetting" choose "custom" or "no subsetting". I haven't actually tried it myself though.
Because Linux (and its variants) have a completely different set of fonts than Windows and Mac OS X, is there anyone with any experience of creating cross-platform font families - ideally finding equivalents to the common fonts found on the aforementioned operating systems?
If so, what is the best route to take?
Here are some good up-to-date listings of the most-installed fonts for PC, Mac, and Linux:
Sans serif font sampler and survey results
Serif font sampler and survey results
Hope this helps your decision!
List of Web Safe Fonts.
Most OS'es have support for Microsoft's Core Fonts For the Web. They all come bundled with OSX, and I'm reasonably sure they'll work (or have near-identical variants) on most any linux distro.
The Microsoft Typography page is also pretty cool
Just to clarify: You are looking for names of fonts that will make your website-design look similar to Windows and Mac OS X when viewed under Linux, you are not looking to design new fonts, correct?
(I read your question in the same way that Jason Navarrete did, so at least two people misunderstood your question.)
The font names you are looking for might be something like the Liberation fonts that RedHat has released?
Incidently, 'sans-serif' doesn't give the user "any sans-serif", it gives the user his/her preferred sans-serif - which may arguably be better than one you pick.
Well, this is a hard question.
There are generally 3 fonts that are in some form or other always supported. These fonts are Adobe Times, Adobe Helvetica, and Adobe Courier. The problem is that while every system and foundry have a clone of these, they have different names. They are also not entirely the same, but have the same metrics. The windows trio: Arial, Times New Roman, and Courier New are the monotype clones of them. On linux these have been provided as bitmap fonts by adobe, and as outlines in form of the URW Nimbus {Sans, Roman, Mono} clones. The outlines however are not pretty on screen (they are on a printer) as they lack hinting.
The solution would be to go for a multichoice for websites. As microsoft has at some point made the "core fonts" available for redistribution, many unix/linux systems do have those fonts available. So go with them. The liberation fonts are straight clones of the MS/monotype fonts, so should go ok as alternatives with a similar experience. Then go for "Helvetica", "Times", and "Courier" before the sans/serif/mono choice that puts you in the user's hands.
Sitepoint has an excellent article on font stacks:
http://www.sitepoint.com/article/eight-definitive-font-stacks/
TrueType Fonts (TTF) will generally work on Windows, Mac, and Linux platforms.
Thanks Jason, but this isn't the answer I'm looking for. Many Linux distributions come with their own fonts that are different in name to the Mac/Windows versions - presumably because of font licensing issues.
I'd like a response from a Linux user (preferably developer) who has experience with coming up with similar looking fonts. I really don't want to have to give Ubuntu Firefox users 'any sans-serif'.
This article explains the basic approach that has the most chance of working cross-platform. You have to think in terms of stacks which are sets of broadly similar fonts which cover most platforms.
You are always safe saying 'serif' which will get you Times New Roman or similar or sans-serif which will get you Helvetica/Arial or similar on most platforms. Then as the article suggests you can go further and distinguish between 'wide' and 'narrow' groupings.
You can take a more 'progressive enhancement' approach choosing your ideal font and providing generic substitutes for those platforms which do not have it. However at the end of the day the web is not print and you only get approximate control over font choice. You can do a lot of custom typography using the well-supported CSS properties such as line-spacing. But you will never be able to say 'use this font' and have it work the identically even across Mac/Windows/Linux let alone mobile devices, kiosks etc...
TrueType Fonts (TTF) will generally work on Windows, Mac, and Linux platforms.
http://en.wikipedia.org/wiki/TrueType