Hot answers tagged web-safe
I still think that for web, the best free option out there is Liberation Sans. It renders perfectly with @font-face. But you can get Helvetica Neue for web from Fonts.com for web use for a fair price too. I would probably use font-family:"Helvetica Neue, Helvetica, Liberation Sans, Arial, sans-serif"; so those pcs with the font installed can see it, and ...
You might be able to find something similar in the Google Fonts Directory. All you have to do is include their link in your html page's head and you can use the fonts in your css. http://www.google.com/fonts/ PT Sans is pretty similar (compared to the rest of the list): http://www.google.com/fonts/specimen/PT+Sans
If your website targets the designer crowd, many of them will have the Adobe Suite installed (don't ask by what means). Kottke.org uses it without css embedding, and this is his font family rule: font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
Roboto is a good neo-grotesque sans that can replace Helvetica. Commissioned by Google and released for free. Used as Android's answer to iOS' Helvetica (Neue). More about Roboto's similarity to Helvetica here. It's slightly more humanised I think. I wouldn't overstate its similarity, but I would say it's a good free alternative. I also agree with ...
You have various choices: One day in the future you could use @font-face loading any font that you want (which license is free to distribution). If you use it only for titles, you could use the SIFR technique that use flash, or a simple Image Replacement technique Or you could use, like already suggested payment hosting servers for font Typekit.
No. The new line of thought is to avoid Photoshop for layout and typography design and start in the browser as early as possible. By passing the client an actual URL as opposed to a Photoshop comp, you avoid the client's expectations being dashed when the final product renders slightly different in their browser of choice vs the Photoshop comps. ...
Most operating systems and browsers render with antialiasing or sub-pixel antialiasing. Sub-pixel antialiasing is common on desktop platforms, like Windows (with ClearType) and OS X. Standard monochrome antialiasing is common on mobile platforms, where the device's sub-pixel order may change with device orientation, and where sub-pixel rendering isn't as ...
Unfortunately, none of the "true" web-safe fonts really fit your description (W3Schools has compiled a useful list of safe options: W3Schools page on web-safe fonts). What you could do is use the @font-face rule, it's widely supported nowadays and pretty easy to implement: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp My favourite old school ...
The good one is Neue Haas Grotesk, but if you need a typeface only for headings I can propose my own typeface :) Take a look on this image.
Summary If your server dishes out pages with ligatures (like smartypants does), search engines are inconsistent. Bing currently doesn't index the ligatures right. I'd say in general, it's asking for trouble. Since search engines change, there's a method below you can use to test how search engines you're interested in index ligatures. If your server dishes ...
Based on the one live example I saw I would be extremely concerned with extensive use of this because it will affect SEO. The special characters get parsed as Unicode so Google's algorithm will not read it. It should be fine for sparing uses but I wouldn't go crazy with it or use it on anything important like a title. Here is the link to the live example I ...
A free font that is very, very close: http://www.fontspace.com/arro/vegur The character support isn't the best, but if it's only for headlines and it really has to be Myriad, then the extra effort of @font-face-ing it may be worth it.
On my Windows 7 installation (with MS Office 2010 installed) I have these fonts that are the closest match: Lucida Sans, Segoe UI, Calibri , and then the generic font sans serif as the last fallback. CSS for this would be: font-family: Myriad Pro, Lucida Sans, Segoe UI, Calibri, sans serif;
These look similar. I hope they'll work for you. http://www.fontsquirrel.com/fonts/TeX-Gyre-Heros http://www.google.com/fonts/specimen/Lato
Vegur has a @font-face (as well as Cufon) kit at http://www.cufonfonts.com/en/font/12046/vegur. Browser support has advanced to the point that most people will be able to see the font used through @font-face even if they don't have the font installed, as long as the font is hosted on the server.
I don't have any experience with it, but from the docs: Some bitmapped image file formats store a dots-per-inch (dpi) or other resolution values. FOP tries to use this resolution information whenever possible to determine the image's intrinsic size. This size is used during the layout process when it is not superseded by an explicit size on ...
Re-posting as answer here just in case someone misses the comment. I've always used Liberation Sans for web, because it's one of the fonts that render the best with @font-face:
Unfortunately, Scott is right. Adobe has continued to leave the ppi at 72. This is a big limitation in the face of device proliferation. The concept of device central showed that Adobe had their head in the right place but they haven't kept pace. One work-around I've used for multi-resolution output can be done in the Save for Web dialog. If you're working ...
Short Answer: You can't. Not only is Photoshop never ideal for knowing how your typefaces will render outside of it, it's just not ideal for working with fonts in general. (When I worked at a Design Firm/Print Shop, everything designed in PS had to be exported as a PDF for this same reason). Then comes the issue of the web, it's browsers and the OS that ...
The easy answer is to keep to OpenType (.otf) fonts. These are all inherently cross-platform (Mac OS, Windows, Linux). They can have Postscript or TrueType outlines internally. The only bit of (annoying) confusion comes in where some OpenType fonts with TrueType outlines are given a .ttf extension. You can determine if a .ttf is OpenType by looking at the ...
I had the same question, I settled at CartoGothic-Std after reading the following article: http://www.onextrapixel.com/2011/06/29/10-awesome-alternative-free-web-fonts/ The font's download link: http://www.fontsquirrel.com/fonts/CartoGothic-Std
Only top voted, non community-wiki answers of a minimum length are eligible