Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

  1. #1
    Join Date
    Aug 2005
    Location
    Dorset, England
    Posts
    46
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Aug 2005
    Location
    Dorset, England
    Posts
    46
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by FordCorsair; 09-07-2005 at 11:31 AM.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Sorry, I don't use Dreamweaver, so I can't help you there.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Aug 2005
    Location
    Dorset, England
    Posts
    46
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Unfortunately you cannot embed a font in html

    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.

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Feb 2006
    Location
    LA, CA, USA
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by esteban
    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

  10. #10
    Join Date
    Feb 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ...hold the graphics, extra text please

    Quote Originally Posted by Twey
    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."

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •