Hi all,

I've been developing my portfolio website, and have been using Tahoma as my font for my text-based logo. I have it aligned in such a way that my logo and my menu sync up nicely.

Anyway, after taking a trip over to BrowserShots, I notice that under Linux and Mac that my nicely styled logo/menu doesn't show up too well....spacing gets thrown off and whatnot.

My question is twofold: Is there a good font similar to Tahoma in the other OS worlds? I can't say I'm too familiar with Linux other than a quick foray into using it during my college years.

The other part would be a recommendation for a font (again, similar in most OS'), that you guys prefer to Tahoma. I know there are better ones...and hopefully that doesn't get to be too subjective (if so, I will edit it out of the question).


I wasn't planning on showing this yet since its nowhere near completion...I'd still like to clean up the CSS a bit before releasing it to the world, but if it would help my font issues then why not :)

efredericks.net/redux

4 answers

2
points
This was chosen as the best answer

Verdana is the safest bet, but for best practices you want your font to be able to fall back gracefully when it's not available.

It sounds like you might be better off putting your logo element inside another positioned element so that if the logo text gets thrown off, the outside element (maybe with a border or something) would still line up with the menu.

Here's a good link: http://www.fonttester.com/help/list_of_web_safe_fonts.html

Answered over 6 years ago by Mike Heath
1
point

On mac os you can use Geneva font which is considered the alternative to Tahoma. However, I can suggest Helvetica/Trebuchet or Georgia, but just because I like them, it's hard to suggest you a font without seeing your logo.

Answered over 6 years ago by Matteo De Felice
1
point

I'd use this CSS: font-family: Verdana, Geneva, sans-serif;

Though this could definitely be caused by the font (Could you post those BrowserShots?) it's probably due to the different default paddings and margins used by different browsers.

The best thing to do in this case is make sure you're resetting the default margin, padding, etc. in your CSS file. For example:
* { margin:0px; padding:0px; }

(A full reset is a lot more efficient for the best possible results across platforms and browsers, but you have to start out with the full reset before you code the rest of your CSS. Inserting one now would probably hurt more than help.)

Hope this helps! -pb

Answered over 6 years ago by Preston Badeer
0
points

Probably the safest I've seen over the years is going Arial, Verdana (or you could go Verdana, Arial) for your font-family tag and of course the sans-serif fallback is smart. These days the chance that anybody doesn't have Arial would be slim to none, it's been a long time default for a ton of non Serif content.

Answered over 6 years ago by jackkeller