Hot answers tagged

50

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 ...


36

Roboto is a good neo-grotesque sans that can replace Helvetica. Commissioned by Google and released for free. Used as Android's default font. Google re-designed Roboto in July 2014. The above sample has now been updated. More about Roboto's (pre-redesign) similarity to Helvetica here. I wouldn't overstate its similarity, but I would say it's a good ...


20

Arimo (see samples above and below) is identical to Liberation Sans (suggested by Yisela) and available from Google Fonts. The following font stack includes Arimo and suppresses the substitution of Arial for Helvetica on Windows machines and WebKit browsers, but otherwise puts the most Helvetica-Neue-like fonts first: "Helvetica Neue", ...


18

OPTION 1: Use a browser extension (Easy) Extensions such as WhatFont (available for Chrome, Firefox and Safari) make it quite easy to detect font families of any text in a webpage. You just need to install the extension, activate it on a site and click on the element you want to inspect. The results are shown in a floating box, always in the context of ...


17

You embed fonts in CSS by using base64 encoding. You can apply styles in SVG documents similar to CSS by using a <style /> element. So if you have a WOFF font, you'd embed it like this: <style> @font-face { font-family: "Sample font"; src: url("data:application/font-woff;charset=utf-8;base64,..."); } </style> Where ... is the ...


16

It's not in Google fonts (I think), but the .ttf can easily be converted for @font-face. I find Liberation Sans really beautiful. Plus it renders REALLY well in most browsers, and it's free for personal and commercial use: http://www.dafont.com/liberation-sans.font


15

That's the thing about Helvetica, there isn't really anything quite like it. We are talking about one of the (if not the) most beautiful font in existence. You could settle for Open Sans or Source Sans Pro but it won't be the same. But you probably already know that as there are only 121 fonts to choose from.


13

If you really want to use a Google Font, I highly suggest using NUNITO. It has 3 styles: Book, Normal, and Bold. Here is a sample comparison between Book 300 and Avenir: https://web.archive.org/web/20140415053621/http://joelcrawfordsmith.com/new/font/avenir The sentence length is a perfect match and x-height is great. Its only fault is that the ascenders ...


12

Tex Gyre Adventor is a really nice replacement for both Avant Garde and Century Gothic. Useful if you also target devices that are not a pc or Mac. It's available as a @font-face kit at FontSquirrel: http://www.fontsquirrel.com/fonts/TeX-Gyre-Adventor


12

I think Museo Sans is good enough: On Google fonts there is also Montserrat could be used for some words :)


12

I just tried the "Roboto" font and it seems OK:


12

It's legal to ask the browser to use Helvetica Neue if it's available on the system, but you'd need a license if you want to serve the font yourself. One option is to use Helvetica Neue if it's system-installed and fall back to some other sans-serif font like Arial if it's not.


12

I think the best approach is to use the advanced search tool on your web font service. For example, if you're using Google Fonts, you'd search for "Latin Extended" fonts, and use "ā a" as the test text, to confirm that it contains the macron'd a in the font.


11

Tex-Gyre-Heros is for me the best one. Enjoy it!


11

This part of your code... .amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; font-weight: normal; font-style: italic; font-size: 1.1em; line-height: 1em; } Control the ampersands.... Watch the ampersands change as I toggle that CSS on and off.... If you want to change their font, ...


9

My solution: SVG sprite sheets with PNG fallback Personally, I think icon fonts are a poor stop gap technology that won't be around in 5 years. SVG images are a far better way to go if you need vectors. SVG has most of the benefits of icon fonts, plus: SVGs can contain colours, gradients and other effects. Works with img tags. Works as CSS ...


9

A search yielded a list of possible alternatives, top of which is Courier. While it may be ubiquitous and not particularly interesting, it's a native font on every [? almost every] OS and present on most systems. Thus it will be rendered well without additional work on your part. The other fonts listed there which satisfy the requirement for slab serifs ...


8

The most condensed monospace, open-source font I've found is via fontsquirrel and is called M+ 1m.


8

This font is commercial property and is not allowed to use without proper licensing for usage. Linotype licensing


8

Nunito is really quite different to Avenir - letters are quite rounded. I've done some serious work on this for a client and found the Google font LATO is virtually indistinguishable from Avenir - you can literally put two words in the two fonts next to each other and not tell the difference. LATO FTW!


7

Windows Metro uses the font Segoe. The font Segoe bears resemblance to the font Frutiger, so in your search for Segoe alternatives you can expand your search to Frutiger alternatives. The font M+ 2p is a free font that's an alternative to Frutiger: It is indeed a strange name for a font, but it is desgined by a foundry called M+. You might also want to ...


7

Century Gothic is pretty well-saturated on the Web and has letterforms that are in the same ballpark as Avant Garde. If a Mac doesn't have it on their system, you can put Futura lower down the font stack. Not sure how scientific these surveys are, but the numbers are in line with what I've read before: Century Gothic is on probably about 87% of PCs (63% of ...


7

There are actually a handful of different weights for Open Sans. This is most likely the Open Sans Light 300.


6

Constantia would be a better fallback than Times New Roman for Garamond, and Corbel would arguably be a better fallback than Arial for Proxima Nova. They may also have Gill Sans installed with some software, plus Open Sans is not bad. I'd put something like: "Adobe Garamond Pro",Constantia,"Times New Roman",Times,serif "Proxima Nova","Open Sans","Gill ...


6

I highly doubt this is a font. Each letter is a custom illustration.


6

Nasalization Heavy look close, like Scott said I'm also doubt but i think they used this font for customization.


6

If you're trying to create a 3D ribbon effect, start drawing ;) As others noted, this is custom. The reason you will not find a font (in addition to Microsoft's IP lawyers) is the complex shading. The commonly accepted font formats do not support illustrative gradients and borders. Besides, the effect in the MS example could be greatly improved upon. The ...


6

Actually there are some pretty simple principles if your number one criteria is a high-readability font for a website. Think mainstream. Thanks to @font-face you could choose from thousands and thousands of fonts - but less popular or newer fonts often have rendering issues between browsers and operating systems, sometimes even when they come from ...


6

I ended up using Muli from Google Fonts, I think it's pretty close:


6

Is there a recommended way to do this The recommended way is to not do that. The client is hiring the graphic designer for their skills and making decisions like that. If you're just letting the client randomly pick elements of your design, you're not a designer...you're merely an assistant. If you must print out a bunch of fonts, install them all, ...



Only top voted, non community-wiki answers of a minimum length are eligible