PDA

View Full Version : Questions about using fonts in web design.



Harold Mansfield
01-04-2010, 03:50 PM
From my understanding, no matter what fonts you use for text on a website, it will come down to each individual users browser settings.

Outside of the normal and default fonts that browsers are set to decipher such as Georgia, Arial, Century Gothic, New Times, Tahoma, Verdana and so on, does it really make any sense to create text with specialty or custom fonts ?

From my understanding, the only way to insure that each user will get the full effect of custom fonts is to embed them as an image file or in flash.

Am I correct here, or missing the boat somewhere ?

vangogh
01-04-2010, 04:34 PM
Yes and no. What you're describing is what the situation has been for years, but it's changing.

The issue is that unless the computer being used to visit your site has a font installed the browser can't render that font. It'll look for the next font you list as an option and eventually fall back on the default that's set in the browser.

However if you embed a font within your site so the visitor's browser can download it then it can render that font. For years that's meant using solutions like sIfr and cufon and any of the other flash style image replacement techniques.

More recently browsers can render fonts declared with the css @font-face property (It even works in IE). Here are a few posts I've bookmarked (http://delicious.com/vangogh99/%40font-face) on the subject. You have to use slightly different code for IE and other browsers and the key is to link to font you want to use.

The issue is becoming less one of technical ability and more to one of type foundries wanting to protect the fonts they create. Once the font files make their way out on the web anyone can download an exact copy and the foundries lose out on their revenue. Some sites like typekit are being created that are putting a buffer between the fonts being freely downloaded and they're charging a fee to license the font. You end up paying ongoing fees to use fonts on your site. I don't think the business model will work long term since it seems to me an impossible sell to clients to ask them to pay more to use a certain font.

There are many free (price and licensing) fonts available, though most aren't going to be quite as good as those professionally designed. One site with a lot of fonts you can freely use is FontSquirrel (http://www.fontsquirrel.com/). You'll download the fonts, upload them to your server, and link to them via @font-face.

I haven't been using @font-face yet myself, but plan on doing so in the future. I'll likely stick to the free font choices and I suspect in time the quality of free fonts will improve. I'd also suspect most people won't be able to discern the difference in quality between the free fonts and the professionally designed and licensed fonts.

Spider
01-04-2010, 04:49 PM
Do you have people going to your site to look at and admire the fonts, or do they go to read and absorb the information you provide?

I am working on the basis of only using the most common fonts that are likely to be on every computer and stacking them in order of my preference to best render the readability of my information.

Another - perhaps, better - option is to do nothing in this regard and let the user decide on the font in which they want to read the information.

Harold Mansfield
01-04-2010, 05:01 PM
Thanks VG. Very clear explanation.


Do you have people going to your site to look at and admire the fonts, or do they go to read and absorb the information you provide?

I am working on the basis of only using the most common fonts that are likely to be on every computer and stacking them in order of my preference to best render the readability of my information.

Another - perhaps, better - option is to do nothing in this regard and let the user decide on the font in which they want to read the information.

Well it's not so much me..I don't care. I've been happy with standard fonts for my own use, but sometimes people see a certain font somewhere and ask to have it, or something simular used for their text content.

vangogh
01-04-2010, 05:38 PM
Do you have people going to your site to look at and admire the fonts, or do they go to read and absorb the information you provide?

It's not about whether or not people are admiring the fonts as it is about different fonts can communicate different things, much the same way different colors communicate things. Fonts are an aspect of design that until recently we haven't been able to realistically use on the web due to technical differences. Now the technology is to the point or near the point where different fonts can be used.

Limiting yourself to the few fonts that are installed on all computers is like limiting yourself to a handful of colors. Nothing wrong with that since you can certainly design something with a limited palette, but why not avail yourself to a larger palette if you can.

Harold Mansfield
01-04-2010, 07:16 PM
It's not about whether or not people are admiring the fonts as it is about different fonts can communicate different things, much the same way different colors communicate things. Fonts are an aspect of design that until recently we haven't been able to realistically use on the web due to technical differences. Now the technology is to the point or near the point where different fonts can be used.

Limiting yourself to the few fonts that are installed on all computers is like limiting yourself to a handful of colors. Nothing wrong with that since you can certainly design something with a limited palette, but why not avail yourself to a larger palette if you can.

So how far are we ?
Is there a way to check and see which browsers recognize which fonts ?

billbenson
01-04-2010, 07:58 PM
But don't go crazy in the other direction. In general you want fonts that are easily readable like veranda which is evenly spaced.

Don't let the user select the font either as that could make your site look horrible on their computer.

Harold Mansfield
01-04-2010, 08:01 PM
But don't go crazy in the other direction. In general you want fonts that are easily readable like veranda which is evenly spaced.

Don't let the user select the font either as that could make your site look horrible on their computer.

That's what I kind of figured. I have no intention on changing any of my sites.
I'll just stick to my normal suggestion to people about browser compatibility.

Spider
01-04-2010, 08:40 PM
...Don't let the user select the font either...

Ah! The tyranny of the world wide web! :D

vangogh
01-05-2010, 12:38 AM
Is there a way to check and see which browsers recognize which fonts

Harold it's not about the browsers having to recognize the fonts. You actually link to the font. The font files will currently need to be in two formats. .eot for IE and .ttf for everything else. Ideally at some point all browsers will agree on one type of file and it appears like they'll all use .webfont.

For now you either load both types of font file on your server and link to them or find them on someone else's server who will let you link to them.

Here's how the css would look



@font-face {
font-family: 'Droid Sans';

/* for IE */
src: url('/shared/fonts/DroidSans/DroidSans.eot');

/*
* for non-IE: first see if the font exists locally on the browser's
* computer. If so, use that copy of the font. Otherwise, load it
* from the server
*/
src: local('Droid Sans'),
url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}




body {
font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}


You use the fall backs (in this case arial, helvetica, sans-serif) in case any browser doesn't support @font-face.

All the code above comes from this post, @font-face in depth (http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/)

Again it's not that the browsers need to support specific fonts. Think of it more like using an image as the background of a div. The image needs to be on a server somewhere online and then you list the src in your css when using the background property. The browser would only need to support the css background property for that to work.

In the case with fonts the browser needs to understand the @font-face property and most modern browsers do. The only difference is that IE only supports the .eot file type while other browsers support the .ttf file type so you need both file types on the server.

rezzy
01-05-2010, 10:20 AM
Ive started using the method on my sites and it works great.

Ive got a question though, how do you know what are "legal" fonts to use? Which ones dont need fees or require licensing for websites?

I have started incorporating fonts, but the legality has always been an issue.

vangogh
01-05-2010, 10:40 AM
Hopefully the sites where you get the font from will show licensing with the font. Unfortunately if you don't see a license for a particular font it may mean you'd need to contact the author of that font directly to make sure.

Licensing more than anything is the issue now, though I suspect in time much of that issue will go away. Right now the type foundries are trying to essentially add DRM to the use of their fonts through systems like typekit. Given that DRM hasn't worked for any industry that has tried it I suspect the same will end up being true here.

Fir now just try to use fonts where there is a license that clearly allows you to use the font commercially.