WordPress.org

Make WordPress Core

Opened 11 years ago

Closed 7 years ago

#8352 closed enhancement (fixed)

Font Issue in Ubuntu

Reported by: jick Owned by: nacin
Milestone: 3.2 Priority: low
Severity: minor Version: 2.7
Component: UI Keywords: has-patch
Focuses: Cc:

Description

I just noticed something about the font in WordPress. It looks a bit off to me. It was fine-looking before. I seem to have tracked the issue down to the default font WordPress uses in the back-end. I did some searching and it looks like the main font it uses is Lucida Grande. I think I just now noticed it because I was playing with some new programs in Ubuntu and one of them installed some new fonts. I'm guessing that I never had Lucida Grande before that program installed it. So, I guess my browser was using the next possible font in the font-family declaration which is Verdana. But, now that I have Lucida Grande it is using that. So I assume that is why I noticed the change suddenly. But, however it happened is irrelevant to the point of this ticket.

The point is: The WordPress back-end was looking pretty slick before but now it just seems, well, off. Have a look at the screenshot I'm attaching. It will show you what I'm seeing. Ugly in my opinion. I think the whole interface looked much better with a font like Verdana. I can't even tell you for sure why I don't like the Lucida Grande. Something about it just doesn't feel right... It could just be me and/or my setup I suppose but I don't know. I guess my overall feeling is just that the font doesn't seem to fit in with the rest of the interface. It sticks out like a sore thumb in my opinion.

So my question is, can anything be done about this? Could we maybe use a different default font for the back-end? Or is this how it is supposed to be? Some details of why that particular font was used would be nice at the very least.

Attachments (5)

screenshot.png (164.3 KB) - added by jick 11 years ago.
What it looks like for me…
no-hinting.png (126.1 KB) - added by JeremyVisser 11 years ago.
Screenshot of Lucida Grande in Linux with hinting disabled
2.7rev9919-dashboard-windowsXP.png (68.5 KB) - added by kpdesign 11 years ago.
xp_ff3.png (32.0 KB) - added by futurix 11 years ago.
Fonts issue on XP SP2 with Firefox 3
8352.patch (6.6 KB) - added by iammattthomas 9 years ago.
Removes Lucida Grande from sans-serif font stack, moves Bistream Vera Sans behind Arial in all declarations.

Download all attachments as: .zip

Change History (44)

@jick
11 years ago

What it looks like for me...

#1 @JeremyVisser
11 years ago

  • Resolution set to invalid
  • Status changed from new to closed

Not a WordPress bug, as this is an issue with your font rendering settings. If you turn off Hinting in System → Appearance → Fonts, the fonts will be truer to their original design.

I'll attach a screenshot of what it looks like for me with hinting disabled.

@JeremyVisser
11 years ago

Screenshot of Lucida Grande in Linux with hinting disabled

#2 follow-up: @jick
11 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

That looks a little bit better. But now I think fonts everywhere else look worse. I like having full hinting because then the fonts are nice and thin (closer to how they're intended to look). With hinting off everything is much bolder. I don't like that. It also doesn't seem to be what the font is supposed to look like.

But I think how the fonts are rendered is beside the point...

I think just Lucida Grande itself doesn't really fit in with the rest of the interface. The Lucida Grande font has always seemed less readable to me. It's more of a designers font rather than something you'd use in an app (like WordPress).

But again, that is just my opinion I suppose...

I was just hoping we wouldn't have to be stuck with that as the default font. Like I said, it just doesn't seem to fit...

#3 follow-up: @kpdesign
11 years ago

I'm having a similar issue in Windows now that Bitstream Vera Sans has been moved in front of Verdana in the stylesheets in changeset 9918. I'm using Windows (with ClearType enabled to smooth the fonts) and the interface looked great when Verdana was being used.

I also have Bitstream Vera Sans installed on this computer, and the interface now looks pretty bad in Windows - it is very unreadable for me. Combine the Bitstream Vera Sans font with the line height increasing and it just doesn't look good (my opinion here).

I've attached a screenshot - WindowsXP, FF 3.0.4, ClearType enabled. The Dashboard says rev 9909, but I keep this install updated via SVN, so this screenshot was done at changeset 9919.

#4 in reply to: ↑ 3 @jick
11 years ago

Replying to kpdesign:

I'm having a similar issue in Windows now that Bitstream Vera Sans has been moved in front of Verdana in the stylesheets in changeset 9918. I'm using Windows (with ClearType enabled to smooth the fonts) and the interface looked great when Verdana was being used.

I also have Bitstream Vera Sans installed on this computer, and the interface now looks pretty bad in Windows - it is very unreadable for me. Combine the Bitstream Vera Sans font with the line height increasing and it just doesn't look good (my opinion here).

I've attached a screenshot - WindowsXP, FF 3.0.4, ClearType enabled. The Dashboard says rev 9909, but I keep this install updated via SVN, so this screenshot was done at changeset 9919.

Wow! That screenshot does look pretty bad... Well, I'm glad it's not just me then...

I just hope it is something that can/will be fixed. I say we just go back to Verdana (or a similar font) and call it good. Everything was fine with that font. I can understand attempting to make the overall interface nicer but, I think they instead made it worse by changing it.

#5 @kpdesign
11 years ago

+10 for going back to Verdana. Sometimes when you continue to tweak things, especially the appearance, some of the changes end up making things worse instead of better. It looked great with Verdana - clean, readable, usable.

#6 in reply to: ↑ 2 ; follow-up: @JeremyVisser
11 years ago

Replying to jick:

That looks a little bit better. But now I think fonts everywhere else look worse. I like having full hinting because then the fonts are nice and thin (closer to how they're intended to look). With hinting off everything is much bolder. I don't like that. It also doesn't seem to be what the font is supposed to look like.

Well create a .fonts.conf file, disabling hinting only for the Lucida Grande. I still don't think this is valid as a WordPress bug. Open a bug on the Ubuntu bug tracker, and ask them to add an entry for Lucida Grande in /etc/fonts/conf.d.

#7 in reply to: ↑ 6 @jick
11 years ago

Replying to JeremyVisser:

Replying to jick:

That looks a little bit better. But now I think fonts everywhere else look worse. I like having full hinting because then the fonts are nice and thin (closer to how they're intended to look). With hinting off everything is much bolder. I don't like that. It also doesn't seem to be what the font is supposed to look like.

Well create a .fonts.conf file, disabling hinting only for the Lucida Grande. I still don't think this is valid as a WordPress bug. Open a bug on the Ubuntu bug tracker, and ask them to add an entry for Lucida Grande in /etc/fonts/conf.d.

Well, I really just don't see what the big deal is. Why couldn't it just be switched back to Verdana? Why was it changed in the first place? It was great how it was.

If it ain't broke...

#8 @kpdesign
11 years ago

Changeset 10000 moved Verdana back ahead of the Bitstream font, but I'm still seeing Bitstream Vera Sans in the admin UI using the latest SVN version (10002), even after dumping my cache, etc. Hmmmm.....

#9 @jick
11 years ago

Well, even with that change it still doesn't look right to me. There is still "Lucida Sans" and "Lucida Grande" in front of "Verdana". Those fonts aren't looking right to me as I stated before.

As for you not seeing any changes... It seems to me like you were expecting a pretty noticeable change with that changeset. But I'm not sure how different "Lucida Sans", "Lucida Grande", and "Bitstream Vera Sans" really are. Maybe you are seeing the change and it's just that the fonts aren't different enough to distinguish.

#10 @kpdesign
11 years ago

It took another change in global.css to have Verdana override the Bitstream Vera Sans font (changeset 10009).

Now Verdana is the dominant font for me, and it's looking good again.

#11 follow-up: @jick
11 years ago

It's still not Verdana for me...

By "dominant font" do you mean everything is in Verdana for you now? Cause if it is, then that must mean you're missing the Lucida Grande font on your system. But it seems that I do have Lucida Grande on my system so I see that rather than Verdana. And Lucida Grande is still ugly to me...

I'm still not sure if it's the font itself or just some configuration problem but the font does look really bad for me. I wish Verdana would come back...

I can see how some would just think "why not just remove Lucida Grande from your system?" but I don't think that is the right approach. The interface must be consistent. We need a default font that will look great on all platforms/setups. We shouldn't have to modify our systems to make the interface look decent.





As a side note: One idea I had is maybe a font switcher in the WordPress settings area. The user could choose which font they want to use on the back-end. It would be a per-user setting I think. Now, I'm sure such a feature would probably take some reworking of the core but it could be a solution to all the font problems. But... this idea is beyond the scope of this particular ticket I think.

#12 in reply to: ↑ 11 @kpdesign
11 years ago

Replying to jick:

It's still not Verdana for me...

By "dominant font" do you mean everything is in Verdana for you now? Cause if it is, then that must mean you're missing the Lucida Grande font on your system. But it seems that I do have Lucida Grande on my system so I see that rather than Verdana. And Lucida Grande is still ugly to me...

Lucida Grande is not on my system - I do have Lucida Console, Lucida Sans and Lucida Sans Unicode.

Most of the interface text is now Verdana for me, the exception being the page headings, menu section titles, and a few others on the dashboard.

I'm still not sure if it's the font itself or just some configuration problem but the font does look really bad for me. I wish Verdana would come back...

You're right...Lucida Grande isn't so "grand" to look at, regardless of the OS.

I can see how some would just think "why not just remove Lucida Grande from your system?" but I don't think that is the right approach. The interface must be consistent. We need a default font that will look great on all platforms/setups. We shouldn't have to modify our systems to make the interface look decent.

I agree - there needs to be one font that works/looks good on all platforms without asking the end user to modify their individual system to turn a font on/off.

#13 follow-up: @JeremyVisser
11 years ago

Now that I am clearly defeated on the issue and Bitstream Vera Sans is higher in the list, why not list DejaVu Sans one place ahead of Bitstream Vera Sans? DejaVu Sans is a font preinstalled on most Linux distributions which is visually the same as Vera, except it contains many more glyphs, which is useful for internationalisation.

#14 in reply to: ↑ 13 @jick
11 years ago

Replying to JeremyVisser:

Now that I am clearly defeated on the issue and Bitstream Vera Sans is higher in the list, why not list DejaVu Sans one place ahead of Bitstream Vera Sans? DejaVu Sans is a font preinstalled on most Linux distributions which is visually the same as Vera, except it contains many more glyphs, which is useful for internationalisation.

Well, I think that could be done. After all, the more fonts it can fall back to the better. But, I don't think that addresses the issue of Lucida Grande. Adding DejaVu Sans to the list one place ahead of Bitstream Vera Sans still leaves Lucida Grande as the first in the list and Lucida Grande is the problem here, I think.

@futurix
11 years ago

Fonts issue on XP SP2 with Firefox 3

#15 @futurix
11 years ago

I added a screenshot of 2.7 RC1 from Firefox 3 on Windows XP SP2 - also has some weird font for some options.

#16 @markjaquith
11 years ago

  • Owner set to iammattthomas
  • Status changed from reopened to new

Assigning to Matt Thomas, though we're nearly out of time.

#17 @azaozz
11 years ago

  • Milestone changed from 2.7 to 2.8

Perhaps we can revisit this in 2.8. Was planning to try to include few alternate stylesheets (selectable in the browser) to handle this and similar differences, will need more time to test/refine.

#18 @janeforshort
10 years ago

FWIW, I'm not a huge fan of Lucida Grande either.

#19 @janeforshort
10 years ago

  • Severity changed from normal to minor
  • Type changed from defect (bug) to enhancement

#20 @Denis-de-Bernardy
10 years ago

  • Keywords needs-patch added; dev-feedback removed
  • Milestone changed from 2.8 to Future Release

Punting to Future from lack of traction

#21 @iammattthomas
9 years ago

  • Owner changed from iammattthomas to janeforshort
  • Status changed from new to assigned

This is in the realm of the UI group now, I think. FWIW I'm fine with switching away from Lucida Grande, too. It's great on the Mac but Verdana is more consistent between platforms.

#22 @jane
9 years ago

  • Owner janeforshort deleted

Removing myself as owner so an actual developer can pick it up. Sounds like the consensus is to ditch Lucida Grande, but there's no patch, so this could be punted unless someone whips up the proper CSS asap.

#23 @nacin
9 years ago

so this could be punted unless someone whips up the proper CSS asap.

This is already future release. I imagine MT saw this by looking for tickets he's been assigned the owner for.

@iammattthomas
9 years ago

Removes Lucida Grande from sans-serif font stack, moves Bistream Vera Sans behind Arial in all declarations.

#24 @iammattthomas
9 years ago

  • Keywords has-patch added; needs-patch removed

This was an easy patch, so here it is, if anyone wants to pull the trigger. :)

#25 @JohnONolan
9 years ago

  • Owner set to nacin

#26 @nacin
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

(In [15858]) Remove Lucida Grande from the sans serif font stack. fixes #8352, props iammattthomas.

#27 @nacin
9 years ago

  • Milestone changed from Future Release to 3.1

#28 @nacin
9 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This more or less received some sort of sign off from O'Nolan, MT, and Jane, but this looks ugly and deserves a real review.

http://cl.ly/ffa177d4028b59959010

#29 @nacin
9 years ago

  • Keywords ui-feedback added

#30 @iammattthomas
9 years ago

Unfortunately that's what it's going to look like if we switch to Verdana. I agree that Verdana in bold is way too bold; I think that's what you're responding to. Another alternative might be Helvetica/Arial but I'm going to let someone else own that decision. :)

#31 @JohnONolan
9 years ago

*Points at Jane*

#32 @Denis-de-Bernardy
9 years ago

Before we get to the Arial / Helvetica fallback, aren't DejaVu Sans, Bitstream Vera Sans, and Liberation Sans installed on most if not all Linux platforms?

#33 @azaozz
9 years ago

There are couple of other ways to fix this. The simplest one would be to consolidate all "font-family" into one CSS rule and output an override in the header when we detect Linux as the browser OS (the same can be done for Mac OS if needed).

The more involved one is to include an alternate stylesheet which would be selectable by the user and "remember" the selection in the user settings cookie. This can also be used for a high-contrast (accessibility) override stylesheet, etc.

#34 @freddyware
9 years ago

If we're on Windows or Mac and prefer Lucida Grande, there's no easy way to add it into the font stack, other than user stylesheets, is there? I dislike Verdana.

#35 @hanni
9 years ago

  • Cc hanni added

#36 @JohnONolan
9 years ago

  • Milestone changed from 3.1 to Future Release
  • Priority changed from normal to low

#37 @nacin
9 years ago

(In [17327]) Remove Lucida Grande from the remaining font stacks. We should at least be consistent. props demetris, fixes #16298, see #8352.

#38 @automattor
8 years ago

(In [17347]) Revert [17327] and [15858]. Props markmcwilliams, JohnONolan, et al. see #16298 #8352

#39 @helenyhou
7 years ago

  • Keywords ui-feedback removed
  • Milestone changed from Future Release to 3.2
  • Resolution set to fixed
  • Status changed from reopened to closed

I think we can call this fixed as of [18407] for #18020.

Note: See TracTickets for help on using tickets.