765062 - The default font-family should explicitly recommend something appropriate for Linux

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[mat]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:13.0) Gecko/20100101 Firefox/13.0
Build ID: 20120608021316

Steps to reproduce:

Visit MDN with Firefox on Arch Linux.


Actual results:

Most texts rendered very ugly (stair effect, no anti-aliasing..). Texts very even hard to read.

Using Firebug, I disabled the Lucida Fonts in 

body {
    color: #333333;
    font: 14px/1.428 "Lucida Grande","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif;
}

in

https://developer.mozilla.org/skins/mdn/Transitional/css.php.

It seems, that Lucida renders ugly on some Linux systems.


Expected results:

Include "DejaVu Sans" before Lucida:

body {
    color: #333333;
    font: 14px/1.428 "Lucida Grande","Lucida Sans Unicode", "DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
}

Comment 1

[Luke Crouch [:groovecoder]]

Out of curiosity, does https://developer-new.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko have the same problem?

Comment 2

[mat]

Attachment: screen shot

Comment 3

[mat]

Hi Luke,

as you can see in the screenshot, the named page is affected by this problem, too.



I actually fixed this for me by installing "Lucida Grand" found in some corners of the web. But most people on Linux, which have the MS-Fonts installed (which Lucida is part of), probably suffer this problem.

Since I also installed a patched version of truetype2 yesterday (infinality), the screenshot might already be less ugly than it was yesterday.

For the screenshot, I deactivated "Lucida Grand" on my system, but did not uninstall the infinality-truetype2 version.

Comment 4

[Luke Crouch [:groovecoder]]

looping in Craig Cook to see if he remember if/why/how we can accommodate Linux users with our MDN fonts.

Comment 5

[Craig Cook (:craigcook)]

Linux doesn't have quite the range of fonts as OSX and Windows, and lots of common Linux fonts are pretty crummy, sadly. And we don't test designs extensively on Linux so things like this tend to go unnoticed for too long. 

But that's definitely an ugly rendering. It looks like DejaVu is a pretty common font on Linux (it's preinstalled on Ubuntu, not sure about other distros) and it's pretty analogous to the Lucida family so we should add it to the font stack:

"Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;

Comment 6

[Luke Crouch [:groovecoder]]

John can you do https://github.com/mozilla/kuma/pull/300 to check on Linux?

Comment 7

[mat]

If there is anything I can do, I would be happy to assist.

Comment 8

[John Karahalis [:openjck]]

Thank you for reporting this, Mat.

This should only be a problem for people who have Lucida installed. I do not have Lucida installed, so the page looks pretty good to me: http://i.imgur.com/ikrea.png

The question becomes: How many Linux users have Lucida installed? It is not part of the main Ubuntu installation, and it is not part of the Microsoft fonts package, so the number is probably fairly small. Mat, did you install Lucida manually?

Anyway, here's what happens when the page loads. Ubuntu cannot find a font for the first three in the list (Lucida Grande, Lucida Sans Unicode, and Lucida). When it reaches Arial, it finally has a match. This match is an alias from the font "Alias" to the font "Liberation Sans". This is the font that you see being rendered in my screenshot.

So skip DejaVu Sans. Using the following font-family should fix the problem for all users:

"Lucida Grande", "Lucida Sans Unicode", "Liberation Sans", Lucida, Arial, Helvetica, sans-serif;

Comment 9

[John Karahalis [:openjck]]

Quick correction: It finally matches "Arial" because Ubuntu has an alias from the font "Arial" to the font "Liberation Sans".

Comment 10

[mat]

Hi John,

I was wrong, Lucida is not part of the ms-fonts package but installs as part of xorg-fonts-75dpi in arch (or xfonts-75dpi in ubuntu).

Comment 11

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/b416f20f435c1897ee60ea7c25d23642c2a81831
fix bug 765062 add dejavu sans for linux

https://github.com/mozilla/kuma/commit/3104d4740eb4b888ba6612acdba985ebe75dde9d
Merge pull request #300 from groovecoder/dejavu-sans-font

fix bug 765062 add dejavu sans for linux

Comment 12

[John Karahalis [:openjck]]

Awesome. Thank you, Luke!

I am reopening to change the font to "Liberation Sans" as per comment 8. This shouldn't be hard since you already identified all of the sections that need updating.

On that note, we might want to consider using SASS or LESS at some point. Should make changes like this a bit easier.

Comment 13

[John Karahalis [:openjck]]

On second thought, it would probably be best to see what Craig thinks.

Craig: As I mention in comment 8, Ubuntu currently uses Liberation Sans to render the MDN. With that in mind, do you think it would be better to use Liberation Sans explicitly or switch to DejaVu Sans?

Liberation Sans (same as current): http://i.imgur.com/3wZFK.png
DejaVu Sans: http://i.imgur.com/FCZkM.png

Comment 14

[John Karahalis [:openjck]]

13:29 <craigcook> openjck: the two fonts look pretty similar, so I have no strong feelings on which is better to use
13:30 <craigcook> DejaVu is a bit more open and closer to Lucida, so maybe we should go ahead with that