In html-reset.css, Tahoma is the first font on line 78: font-family: Tahoma, Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;.

This contradicts the comment stating that you are using "Microsoft core web fonts." In fact, Tahoma was designed in 1994, which is pre-web for Microsoft.

I recommend dropping Tahoma entirely. It wasn't designed for the web and just looks wrong, especially with its unpleasant italics. Use Calibri instead.

Comments

JohnAlbin’s picture

Status: Active » Fixed

Calabri is not widely distributed on non-Windows systems. And, in fact, isn't even available on vanilla Win XP. See http://en.wikipedia.org/wiki/Calibri

According to my notes Tahoma has been distributed since Windows 98. However, you are correct; its not a part of the Microsoft's core fonts for the web: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

I think it got added to my list because its widely available on Windows and Mac OS. But, I agree, let's nix it.

As for the new default first font… font-family: Helvetica, Arial, "Bitstream Vera Sans", sans-serif;?

It doesn't really matter too much, since the html-reset.html is designed to be modified.

Marking as "fixed" unless someone has any strong opinions. Aren, I've credited you with this change in the CHANGELOG. :-)

Aren Cambre’s picture

Category: bug » feature
Status: Fixed » Active

Thanks!

I suggest putting Arial before Helvetica. Arial is more universal and Helvetica wasn't designed for the web.

Garrett Albright’s picture

Arial is ugly; please don't force it upon us Mac users when we could be using Helvetica instead.

On the other hand, apparently Helvetica looks like butt with Windows' poor anti-aliasing (for those Windows users who will even have it installed). I remember coming across an article about this a while back with screenshots, and man, it wasn't pretty. I can't re-find the article at the moment, though. Apparently Helvetica Neue is better, but to my eyes, Helvetica Neue is very ugly on the Mac.

Of course it's a matter of taste, but I disagree with Aren about Tahoma/Verdana looking ugly. I think they look just fine on both platforms, and are highly legible. And, yes, they're widely available. If Helvetica/Arial or vice-versa are going to be leading the default font stack from now on in Zen, that's something that I personally am going to be changing on most of the subthemes I create.

JohnAlbin’s picture

lol! bikeshed! bikeshed!

Do we want to go with: font-family: Verdana, Arial, Helvetica, "Bitstream Vera Sans", sans-serif; instead?

Garrett Albright’s picture

Totally bikeshedding.

Verdana/Tahoma/Bitstream Vera are quite different from Helvetica/Arial, the former being "humanist" typefaces better for screen reading and the latter being "grotesque" typefaces better for print. If I had my druthers, they wouldn't be mixed in the same stack. Simply font-family: Verdana, "Bitstream Vera Sans", sans-serif; ought to do it, though I wish there were a generic specifier to specify between grotesque and humanist typefaces instead of sans-serif, which can and does apply to both.

JohnAlbin’s picture

Well, it would be nice if Zen hints at proper typography. I think we should split up the Humanist/Grotesque typeface stacks.

However, I don't know which UNIX font we should use in the Helvetica/Arial stack. With my basic fontography skills, I can't readily recognize which of the top UNIX fonts on this page would match: http://www.codestyle.org/css/font-family/sampler-UnixResults.shtml Can someone give me a little help?

(FYI, we added Bitstream Vera Sans in #120052: Add linux fonts.)

Garrett Albright’s picture

Nimbus Sans L and FreeSans were the two on that page which looked the most Helvetica-like to me.

EDIT: Although, if you split up the stacks, where is the grotesque one going to be used?

JohnAlbin’s picture

Although, if you split up the stacks, where is the grotesque one going to be used?

It won't be. Its just a commented-out suggested font stack with some widely-available fonts.

Given that #626868: Replace Bitstream Vera with DejaVu fonts also sounds like a good idea, here's what I'm preposing:

body,
caption,
th,
td,
input,
textarea,
select,
option,
legend,
fieldset {
  /* The following font family declarations are based on the Microsoft core web
   * fonts which are common fonts available on most computer systems. The DejaVu
   * fonts are commonly available on Linux systems where the MS fonts are less
   * common. Tahoma and Helvetica are also widely available, but not universally.
   *
   * A user's web browser will look at the comma-separated list and will
   * attempt to use each font in turn until it finds one that is available
   * on the user's computer. The final "generic" font (sans-serif or serif)
   * hints at what type of font to use if the web browser doesn't find any
   * of the fonts in the list.

  font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
  font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;

  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
  font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;

  font-family: "DejaVu Sans Mono", "Courier New", monospace;

   */

  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
}
Aren Cambre’s picture

I still think Tahoma makes no sense as a general purpose web site font pick. It's a UI dialog font that has ugly italics.

JohnAlbin’s picture

@Aren: Well fortunately for you, Tahoma is just one of several font stack samples. And it is no longer the default, thanks to you. :-)

Garrett Albright’s picture

Status: Active » Fixed

font-family: "DejaVu Sans Mono", "Courier New", monospace;

Hmm, interesting. I see you used the FOSS alternative first in this stack.

Personally, when I want to display something in monospaced text with CSS, I'll just use "font-family: monospace;". Obviously the spacing differences between various monospaced fonts are rather inconsequential, and this way nerds like me who have their browsers configured to display monospaced text in their coding font of choice don't get it overridden by CSS.

Just my opinion, though. Shall we call it an issue?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.