

Ask HN: Best Pretty Web Font Solutions? - biznickman

I've increasingly noticed websites using pretty fonts that are not commonly included in the standard list of "web-safe" fonts.  However many of these sites simultaneously are not using services like Typekit.<p>Forrst for example appears to use Bakersville, and I saw a blog post via Hacker News the other day that's using "Helvetica Neue".  My question is this: what are the best practices for using pretty fonts on websites?<p>Are these sites just betting on most visitors having the non-web-safe fonts and then reverting back to generic fonts under the worse case?  Would love to hear more from the community about best practices surrounding pretty font usage.
======
tdupree
You don't have to use a service like Typekit to use a pretty webfont. The
advantage Typekit has is that it gives you access to a lot of font choices to
use (which you wouldn't otherwise have access to) and hosts/serves up the
fonts for you.

Sites not using Typekit are most likely just using their own @font-face
solution and hosting the fonts on their own server (which can also be a faster
solution than loading in 3rd party font solutions).

Never use fonts and just hope a user might have it. It's not too hard to roll
your own solution for serving up pretty fonts using @font-face. You will need
to read up on it to learn the ins and outs, and what sort of goofy
idiosyncrasies exits that you need to deal with.

I would recommend using the @font-face generator from fontsquirrel.com
(<http://www.fontsquirrel.com/fontface/generator>). This helps you take a font
you want to use and prepare it for the web, creating all the different font
file types, as well as creating the css you need to use to embed the font for
use.

When you use the font, be sure to use it as part of a font-family, so that you
can plan what fonts to use as a fallback in case your @font-face declarations
don't work out.

Understand that your font will be rendered differently between various
browsers and operating systems. Sometimes using a css declaration like text-
shadow (text-shadow: #FFF 0px 0px 1px;), and matching the text-shadow color to
the background color the text is on, can help smooth out jaggies on the
rendered font (works well for webkit browsers), YMMV. Definitely check out how
your font looks in all the major browsers, as well as different OS platforms.
For instance, I have found Windows XP to render some @font-face fonts much
worse than say Windows 7.

Just know that things aren't quite perfect yet with @font-face, so think long
and hard about using it in a production environment, and really test all
platforms, browsers, etc to see how it looks. Understand how your choice to
use a custom font might hurt readability for large blocks of small-sized text
(like a blog post) because of rendering issues. Also, Remember to use custom
fonts responsibly, you really shouldn't need more than 1 (2 max) custom fonts
on a page. Some people get a little carried away.

Some free fonts you can use online. NOTE: Always check the font license to see
if you are allowed to use it on your site. If you plan to make a profit on
your site, always check to see if the font can be used commercially!:

<http://www.josbuivenga.demon.nl/>

<http://code.google.com/webfonts>

Recommended reading (these should help you get in the head space of what you
need to do, and what the @font-face landscape looks like right now):

[http://paulirish.com/2009/bulletproof-font-face-
implementati...](http://paulirish.com/2009/bulletproof-font-face-
implementation-syntax/)

[http://nicewebtype.com/notes/2009/10/30/how-to-use-css-
font-...](http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/)

[http://www.evotech.net/blog/2010/01/font-face-browser-
suppor...](http://www.evotech.net/blog/2010/01/font-face-browser-support-
tutorial/)

[http://blog.themeforest.net/tutorials/how-to-achieve-
cross-b...](http://blog.themeforest.net/tutorials/how-to-achieve-cross-
browser-font-face-support/)

~~~
joshuacc
"Never use fonts and just hope a user might have it."

I would question that statement. Specifying fonts a user "might have" is the
entire basis of normal CSS font selection.

There's absolutely nothing wrong with specifying a somewhat unusual first
choice. That's what fallbacks are for! For instance:

 _font-family: "Adobe Myriad Pro", Myriad, Georgia, Times, Times New Roman,
serif;_

Just make sure that you order them from most desirable to least desirable and
it will display the best installed font.

~~~
tdupree
You are certainly right about that. I should have added more context to what I
was thinking when I wrote that.

I was thinking more along the lines of having some non standard font on your
computer that would differ greatly from a common web-font, specifying that as
the top choice in a font stack, and then designing your site using that font.
Which I was thinking was essentially the goal of the OP.

I think your font stack example isn't quite as extreme as I was thinking in my
head. Even still, your example has two sans-serif fonts that may/may not be on
a users computer, with your fall back choices then being serifed fonts.
Already, that font stack is setting your site up to present some very
different designs to various visitors. That font stack would fare better if it
was something like _font-family: "Adobe Myriad Pro", Myriad, Lucida Sans
Unicode, Lucida Grande, sans-serif;_

If you are going to pick a non-standard font to use without font embedding,
then your fallbacks should be web-safe fonts that are similar in design and in
rendering size. Exotic Font Y at 16px can look much different from web-safe
Font Z at 16px.

So, if a very small percentage of your users will have an exotic font
installed that you want to use, and you aren't embedding that font for others
to use, then you are setting yourself up for design/rendering problems for all
of the people who have to use the fallback. It just ends up looking goofy and
unprofessional, as well as being a bear to get to render nicely for both
varying font styles in a "pixel perfect" design. Font stacks should be about
trying to get the same experience across multiple platforms and browsers, not
30% get the best experience and 70% get a crummy degraded experience.

~~~
joshuacc
Ha! Sorry about the confusion. I meant to type Minion, not Myriad.

I definitely agree that you should be designing with the majority in mind. But
if you set up good fallbacks then you can get 30% with fantastic type and 70%
with quite decent type.

I don't tend to do "pixel perfect" design. I prefer designing in the browser,
but can see how the traditional approach would make things difficult.

~~~
tdupree
Right on :) I've been tasked lately with a lot of "this needs to look the same
for everyone on every platform" pixel perfect sort of stuff, so I have had to
deal with getting everything the same and haven't had a lot of leeway. If you
have the opportunity to give that 30% fantastic typography, and the other 70%
still has a great experience, I'm definitely cool with that.

------
tdupree
Not sure why your comment got killed, but you're welcome! I had been looking
into using @font-face for a while but didn't get the chance until just
recently. It's kind of a moving target right now so I'm happy to pass on what
I have picked up in trying it out. I'm using Museo Sans
(<http://www.josbuivenga.demon.nl/museosans.html>) right now for a site and
its going pretty well. That font seems to render decently across various
browsers/OS.

