Helpful Information

Category: Computer hardware and software

Fonts (PC vs MAC) - what's your advice?

I'm a PC operative.... and having just been loaned a Mac iBook to do some home work i notice it doesn't have the PC fonts like Tahoma, Verdana, Trebuchet etc hence a couple of my sites look a bit rubbish (chunky text) when viewed on the Mac. I don't want to be limited to just Arial, Times or Geneva.

Is there a way to embed fonts so they appear as they should on any browser?

What do you do??

Dom

It's not a case of PC vs Mac: it's a case of Windows vs. anything else. I (a Linux PC user) have this problem with badly-designed sites too.
The CSS font-family property allows you to specify a list of fonts. For example:
font-family: Verdana "Times New Roman" serif
The above will use Verdana; if Verdana can't be found, it uses Times New Roman; if that can't be found, it uses the system's generic serif font.

Thanks Twey,

I notice in Dreamweaver it lists related/similar fonts in the font drop down, but how would one write specific font info into a CSS? Sounds like a simple solution, but I'm still a little unsure how to input the text on a CSS and the varieties of font i wish the browser to look for..

Apologies, I'm a 'Windows' PC user.

Sorry, I don't use Dreamweaver, so I can't help you there.

Twey, looking back to your previous reply, it's given me food for thought and something to experiment with, thanks.

Unfortunately you cannot embed a font using html.

Fonts on PCs and MACs have a slightly different file structure making them incompatible to be read directly by each other's platform machines. There are many fonts that are designed for both platforms but there will still be differences between the two versions. The biggest difference will be the spacing between letters will vary slightly so even if it's the same font it might lay out differently than you intend. Different web browser and the way they interpret code will also affect your page layout. The key to making the font visible to all users is that the font must be present and active on the users computer. Many people use font managemtn programs like Adobe Type Manager or Suitcase to turn fonts on and off as needed. For this reason it's best to choose a font from the default system fonts that is common to both platforms - fonts like Arial/Helvetica and Times New Roman/Times.

There are ways around not being able to embed a font. You can create an image of the font you want to use. This of course wouldn't be effective as a body of text but more as a header or title image above the body text. Another way around the issue is to create a Flash SWF file. You can embed your fonts in this file type but you have to own and know how to use the software which may be much more overkill than you're interested in. If you really care about pleasing both MAC and PC visitors I would suggest as your best option to create header or title images using your unique fonts and leave your body copy to a simpler font like Arial/Helvetica/Sans-Serif or Times New Roman/Times/Serif.

Unfortunately you cannot embed a font using html.Actually, not true. It's possible using something called WEFT, but not feasible, as it's IE-only and uses a lot of bandwidth.
You can create an image of the font you want to use.Waste of bandwidth. No font is so important that you should waste that much bandwidth on it; also, images can't be resized to suit the user's needs, and may look odd at other resolutions.
Another way around the issue is to create a Flash SWF file.Plus you need the plugin, which not everyone has.
If you really care about pleasing both MAC and PC visitors I would suggest as your best option to create header or title images using your unique fonts and leave your body copy to a simpler font like Arial/Helvetica/Sans-Serif or Times New Roman/Times/Serif.No, you should use a list of likely fonts and a suitable generic font family as backup, as I've said above.

I know this is an old thread, but I found the following site to be invaluable:

http://typetester.maratz.com/

It has a list of so-called "safe fonts" (this is mac/windows "safe" -- I don't think they acknowledge Linux... here's a page that summarizes the most common fonts on Linux, Mac, Windows (http://www.webspaceworks.com/resources/cat/devtools/41/), but take these surveys with a grain of salt because the methodologies they employ are far from perfect).

Anyway, the safe fonts comprise a short list, so Twey's advice is the best (create a list of fonts, in order of preference) -- hopefully typetester.com can assist you when you are devising your list of fonts.

ALSO: I have learned the hard way that some fonts (i.e. Verdana) are much larger than other fonts, which can create problems if you mix Verdana with other fonts (i.e. if a user doesn't have Verdana, the font swapped in might look a lot smaller than the designer intended, in terms of relative size). If you were to use Verdana exculsively, however, then you wouldn't have to worry about this, of course.

Also, you might want to test your page to see how well it handles re-sizing fonts (i.e. when a user increases the font size, via her browser, to see the text better).

I have learned the hard way that some fonts (i.e. Verdana) are much larger than other fonts [...]Indeed, which is why fonts with unusual aspect values (ratio of x-height to font size) like Verdana should generally be given a wide berth. An exception is when the font will be the same size (or larger) than the browser default (with headings, for example). This avoids the unreadability problem should the font be substituted.

If you were to use Verdana exculsively, however, then you wouldn't have to worry about this, of course.However, that requires the assumption that all users have Verdana, which isn't the case (not even with Windows, exclusively).

Mike

Actually, not true. It's possible using something called WEFT, but not feasible, as it's IE-only and uses a lot of bandwidth.Waste of bandwidth. No font is so important that you should waste that much bandwidth on it; also, images can't be resized to suit the user's needs, and may look odd at other resolutions.Plus you need the plugin, which not everyone has.No, you should use a list of likely fonts and a suitable generic font family as backup, as I've said above.

Wow! The web would be a BORING place if we all followed your text-only design approach. I'll give you that WEFT is an option but as you mentioned, consumes too much bandwidth and is limited to MSIE - a browser people would be smart to stay away from for security reasons, but that's another thread. But to say that using an image in place of a particular font as a headline or header is a bandwidth hog is very misleading. You can make these images very tiny in filesize. Flash files are also for that matter - especially if the swf file doesn't contain a gross overuse of animation. And chances are, no plug-in downloads are needed since nearly every browser from version 4.0 and up has come with the flash pugin already installed - just make sure you save your swf as an older version such as 5.0, of course unless you're designing using more advanced actionscripting (which I'd be willing to bet you're not).

Here's the final word...
DESIGN FOR YOUR TARGET AUDIENCE
If the average person in your target group is using 28.8kBps dial-up or the type of person that doesn't know much about computers in general, by all means keep your page free of or light on the graphics and use mostly all text. Actually, you should use as much true text on your page (as opposed to text within graphics) for the fastest load time as well as search engine optimization and indexing reasons (of course, you can always attach text to images using html alt-tags to help index important words within a graphic - these words are shown as the image loads and is replaced by the image once loaded) And as I also mentioned above and agree with Twey, you're best bet for body copy is to use a font common to all users and platforms such as Arial, Verdana, Times, etc.

However, if your average user is 56k or higher, you probably want to incorporate some design aesthetics to make your page a little more attractive rather than simple text. If you know the average user you're designing for is using broadband, you probably don't really need to consider bandwidth for the average site. In this case, use of special fonts can be very important in creating the impact you're looking for. Case in point, look in the upper left of this page. You'll notice the Dynamic logo with its special fonts. It's only 2kb! - loads nearly instantly even for 28.8 users! It's all in how you create the image. Basic rule of thumb: if your image has solid colors with crisp edges separating it from the background, save your file as a .gif. If your image has gradations such as photos, has drop shadows, or other "effects" save your file as a .jpg. (yes, nitpickers, there are other file types you can save as that can be viewed within most browsers such as .png but let's keep this easy). If you're really worried that a particular image may load too slowly, try cutting/slicing the image into a few pieces and reassemble them in the html layout. 2 or 3 smaller images loading simultaneously will load faster than one large uncut image. Another tip is to use tileable images where possible such as backgrounds. There are some really great pixel pattern background sites out there, such as http://www.k10k.net/. There is no cut-and-dry method for designing your site. Just keep your target audience in mind and make something you're happy with and loads "fast enough."

Actually, not true. It's possible using something called WEFT, but not feasible, as it's IE-only and uses a lot of bandwidth.Waste of bandwidth. No font is so important that you should waste that much bandwidth on it; also, images can't be resized to suit the user's needs, and may look odd at other resolutions.Plus you need the plugin, which not everyone has.No, you should use a list of likely fonts and a suitable generic font family as backup, as I've said above.

Wow! The web would be a BORING place if we all followed your text-only design approach. I'll give you that WEFT is an option but as you mentioned, consumes too much bandwidth and is limited to MSIE - a browser people would be smart to stay away from for security reasons, but that's another thread. But to say that using an image in place of a particular font as a headline or header is a bandwidth hog is very misleading. You can make these images very tiny in filesize. Flash files can be very small also for that matter - especially if the swf file doesn't contain a gross overuse of animation. And chances are, no plug-in downloads are needed since nearly every browser from version 4.0 and up has come with the flash pugin already installed - just make sure you save your swf as an older version such as 5.0, of course unless you're designing using more advanced actionscripting (which I'd be willing to bet you're not).

Here's the final word...
DESIGN FOR YOUR TARGET AUDIENCE
If the average person in your target group is using 28.8kBps dial-up or the type of person that doesn't know much about computers in general, by all means keep your page free of or light on the graphics and use mostly all text. Actually, you should use as much true text on your page (as opposed to text within graphics) for the fastest load time as well as search engine optimization and indexing reasons (of course, you can always attach text to images using html alt-tags to help index important words within a graphic - these words are shown as the image loads and is replaced by the image once loaded) And as I also mentioned above and agree with Twey, you're best bet for body copy is to use a font common to all users and platforms such as Arial, Verdana, Times, etc.

However, if your average user is 56k or higher, you probably want to incorporate some design aesthetics to make your page a little more attractive rather than simple text. If you know the average user you're designing for is using broadband, you probably don't really need to consider bandwidth for the average site. In this case, use of special fonts can be very important in creating the impact you're looking for. Case in point, look in the upper left of this page. You'll notice the Dynamic logo with its special fonts. It's only 2kb! - loads nearly instantly even for 28.8 users! It's all in how you create the image. Basic rule of thumb: if your image has solid colors with crisp edges separating it from the background, save your file as a .gif. If your image has gradations such as photos, has drop shadows, or other "effects" save your file as a .jpg. (yes, nitpickers, there are other file types you can save as that can be viewed within most browsers such as .png but let's keep this easy). If you're really worried that a particular image may load too slowly, try cutting/slicing the image into a few pieces and reassemble them in the html layout. 2 or 3 smaller images loading simultaneously will load faster than one large uncut image. Another tip is to use tileable images where possible such as backgrounds. There are some really great pixel pattern background sites out there, such as http://www.k10k.net/. There is no cut-and-dry method for designing your site. Just keep your target audience in mind and make something you're happy with and loads "fast enough."

The web would be a BORING place if we all followed your text-only design approach.I never advocated text-only sites. I'm against images used as text, not images in general.
But to say that using an image in place of a particular font as a headline or header is a bandwidth hog is very misleading.The other argument I presented was the more important of the two.
Flash files are also for that matterSo long as the Flash file is designed flexibly, it should be possible for the text to become larger or smaller in proportion to the space available. This is a good idea, except for the plugin issue. If you're certain that alll your users are computer-savvy enough to install the plugin, and will be running a system capable of supporting it, then using Flash is an excellent idea - so long as the text is of a flexible size.
nearly every browser from version 4.0 and up has come with the flash pugin already installedReally? I've never seen one.
yes, nitpickers, there are other file types you can save as that can be viewed within most browsers such as .png but let's keep this easySince when was it easier to use GIF than PNG? :-\

Wow! The web would be a BORING place if we all followed your text-only design approach.That sort of straw-man response typically negates any sort of point a person intended to make.

(of course, you can always attach text to images using html alt-tags to help index important words within a graphic - these words are shown as the image loads and is replaced by the image once loaded)That seems to represent a misunderstanding of alternative image text.

The contents of the alt attribute is a replacement for the image itself. It should be able to convey the content of the image in the event that the image cannot be rendered. Moreover, it's not the case that one can add alternative text, but that one must; it is a required attribute.

It should be noted that decorative images - which, strictly speaking, have no content - should be assigned an empty attribute value, or one containing only whitespace. For instance, if there were images of butterflies as decorations in a document (drawing on a previous example in these forums), adding the value, 'butterfly', is useless and distracting. It's simply meant to be pleasing to the eye, and the user shouldn't need to care if it's missing.

[...] use a font common to all users and platforms such as Arial, Verdana, Times, etc.You seemed to miss the part of this thread where Verdana was said to be a bad choice.

You'll notice the Dynamic logo with its special fonts. It's only 2kb! - loads nearly instantly even for 28.8 users!The logo doesn't use special fonts (just Arial) and it's closer to 3KB. :p However, the logo does demonstrate one of Twey's earlier points: that text cannot be resized, and some may find the tag-line ("DHTML Scripts for the real world") difficult to read as a result.

If you're really worried that a particular image may load too slowly, try cutting/slicing the image into a few pieces and reassemble them in the html layout. 2 or 3 smaller images loading simultaneously will load faster than one large uncut image.Only if those fragments cover portions of the area occupied by the whole image.

Mike

It's not a case of PC vs Mac: it's a case of Windows vs. anything else. I (a Linux PC user) have this problem with badly-designed sites too.
The CSS font-family property allows you to specify a list of fonts. For example:
font-family: Verdana "Times New Roman" serif
The above will use Verdana; if Verdana can't be found, it uses Times New Roman; if that can't be found, it uses the system's generic serif font.

The Goodie Answer (Y)