webfonts vs websafe fonts and alternatives

>You still think they should be free? I just don’t understand that way of thinking…

I didn’t say they *should* be free. I am just pointing out the fact that some fonts are free. (and I am using the term “free” loosely here. Google pays for the fonts, and Google gains a lot of money from us)

>Why is free an advantage over quality?

They are both advantages. Each service has its pros and cons. If one service had everything better then we would all use that service and the others would have no point to exist.

Hmm I don’t understand why you would rely on a 3rd party at all for fonts. Seems overkill. There’s plenty of optimized types out there, that can be loaded via your own management system from your own server. Maybe I’m missing something but I come from graphic design roots – fonts don’t change enough nor are diverse enough to justify a service. There’s basically 8 font faces in total… All fonts fall into these 8

Yeah for this example, but all fonts too. Web safe fonts are simply dynamic antialiased and flexi-proportion as opposed to software based rendering trickery.

Humans have spent the last 90 years perfecting linotype Inc as an example…. To make it Web safe took like a month more. There’s just nothing more we humans/google can do to streamline tried and true type faces. Changing a pixel of data for 36pt header fonts does not warrant reliance on 3rd parties.

And I agree, pay for good fonts. There’s a reason adobe owns the proportions and spacing…. It flows on all displays. Open source cannot [legally] capture this artistic design essence. Imagine that 1px of change in a 12pt font instead of 36 header and you get the idea…. The readable is untouchable. Its all about the 12pt. Good fonts are locked down, give in, obey, pay :)

I guess moral of the story would be stick with tried and true Web fonts (further pimped with css text shadow), lean and mean non-reliance on any display services, and buy the industry standard design faces for your icing on the cake.

Google Web Fonts are downloadable, so you can have them on your own server without relying on any 3rd parties.

I am not sure what are the “industry standard design faces” that you talk about. Can you clarify, and let me know how much exactly they would cost to buy them with a license that would allow you to use them on any website without any kind of restriction?

@Zoom caslon, garamond, and gothic are examples of very established display faces. (as opposed to block faces like arial or times).

Gothic you may recognize – its such a clean font. Been around since the 40’s. Things like the proportion of lowercase a or how the tails of the e and s end in a way that implies great horizontal eyeflow. Line heights are important too – notice how tall the lower cases are, lends itself to “solid” sans face.

yes it s pricey but if your clients are A list or require work on par with the rest of their industry, its worth it…. Even if just for logotype and marketing/slider/sales regions (accents a more “open” block face underneath).

And a random thought to keep in mind – kerning is important. Almost all fonts will look rather unfinished at display size… until letter spacing is adjusted just right. That’s the big “secret” of typesetting hah. Css can sorta kern but not really. Use images so you can granular adjust big gun typesets or logos. Save the css for last resort sub-focal kern/shadow, like if h1 is getting dominated by content, can’t be bigger, and needs a bit more eye pull. Theres a massive difference in readability/pull between naked h1 and optimized h1. Use with care :)

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.