1. Forum
  2. >
  3. Topic: Duolingo
  4. >
  5. Why Duolingo should change it…

https://www.duolingo.com/profile/Luke_5.1991

Why Duolingo should change its font to Noto

Now that Duolingo is beginning to add courses that teach Slavic languages, you may have noticed something unusual about its font: diacritic markers alter the font of the letters that they modify. This is a bit of an eyesore, and some may find it distracting.

I just discovered an open-source font called Noto that fixes this problem entirely. It has one design across all languages. It also has the added advantage of being clean and easily readable. As we delve into Polish, Czech, or even Arabic and Hebrew, it would be wise to have a uniform font like Noto that worked well across all languages.

October 23, 2014

19 Comments


https://www.duolingo.com/profile/Lenkvist

There seems to be confusion about where the issue is happening. Here is an image from the Rumanian interface:

Maybe the comments support the characters correctly but it doesn't look good in the interface.

Edit: Actually, in the comments they are not in bold, but they are still different from the regular characters. a ă ț t


https://www.duolingo.com/profile/Nitram.

I agree, Hungarian has two characters unsupported by Duolingo: ű and ő. You can see how significantly different they look.

However this Noto does not seem to be the right alternative. The uppercase "i" looks the same as the lowercase "L" which used to cause a tremendous amount of trouble for Italian learners as well as learners from countries that do not use the Latin alphabet.


https://www.duolingo.com/profile/pont

In my browser (Chrome 38.0.2125.104 64-bit on Ubuntu 14.04), your ű and ő look fine, and clearly match the rest of the font. I think this needs to be reported in Troubleshooting or to support@duolingo, with screenshots and system/browser details.

Here's how it looks for me (colours inverted because I'm using the Duolingo Dark style):

text

Update: I tried Firefox (version 33.0 64-bit on Ubuntu 14.04) as well -- here I do see the problem, at least with the lower-case Hungarian letters:

text


https://www.duolingo.com/profile/Mega9Yo

ű and ő look really ugly mixed in between different font-ed letters. These are some Hungarian words written with them: Űrhajós and Őrült. But you could probably find (or make) better fonts for them.

*Also, I'd like to see someone try to make an ideal font for Duolingo. Or Duolingo could have an editor for the Duolingo font so that everyone can edit it. Or you choose what font you want. It's up to you, Duolingo staff!


https://www.duolingo.com/profile/pont

I don't think this problem lies with the font -- it must be some error in the way the site's coded. As far as I know, Duolingo uses Museo Sans [edit: actually Museo Sans Rounded -- thanks scilling! -- but both fonts support these characters], which certainly supports Polish (and a bunch of other languages, including Esperanto).

Here's Museo Sans on my desktop, with some Polish and Hungarian:

text


https://www.duolingo.com/profile/Lrtward

Websites are coded, typically, with three fonts listed in the CSS, something like:
h1{font-family:"Times New Roman", Times, serif}

What this means is that if the client (that's you and me and all the Duo-learners) have a "Times New Roman" font installed on our PCs, laptops, or mobile devices, then that's what should be used when the Duo stuff is displayed on our screens. If we don't have that specific font, then we should use "Times". And if we don't have that then we should fall back to whatever serif font we do have installed.

So it's not really a problem of poor coding or poor font choice on Duo's part, exactly. It's that they've opted to use some font(s) that some of us do not have on our devices, so to some of us it looks weird or bad.


https://www.duolingo.com/profile/pont

No, Duolingo is using Web Fonts, so it should work regardless of what you have on your device. (I didn't have Museo Sans installed until I installed it to investigate afeinberg's problem.)


https://www.duolingo.com/profile/Lrtward

:) You're two steps ahead of me, pont!


https://www.duolingo.com/profile/Lrtward

Looked at it more closely, and it looks like Duo does use museo-sans, and they provide that as a truetype font so we don't even have to have it installed. So not sure what's going on, exactly. I agree, move this to troubleshooting.

@font-face{font-family:'museo-sans-rounded';src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot');src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.woff') format('woff'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300')


https://www.duolingo.com/profile/scilling

No, they’re using Museo Sans Rounded (in the 300, 500, and 700 weights), which is not the same typeface as Museo Sans. The character set of Museo Sans Rounded can be seen on page 3 of this specimen document; it does have the ő and ű of Hungarian and the ă, ș, and ț of Romanian. However, none of these Hungarian and Romanian letters is displayed in Museo Sans Rounded under my current browser/OS combination (if not other under combinations). This could be a Duolingo problem with its CSS files, or evidence that they’ve edited their font files, or perhaps it’s a rendering problem only for certain browsers or platforms. If it’s the latter, then perhaps an explicit unicode-range descriptor would be needed to ensure that Museo Sans Rounded will be used to render these characters in additional browsers. (The current candidate recommendation for CSS Fonts Module Level 3 doesn’t require an explicit unicode-range descriptor to use all of a typeface’s characters, but perhaps some browsers don’t currently support this candidate recommendation fully on all platforms.)

EDIT #1: See here for the complete set of letters with diacritics that doesn’t use Museo Sans Rounded under Firefox.

EDIT #2: Firefox has started supporting unicode-range with version 36 in the “release” update channel (non-Linux), with version 38 in the “esr” update channel, and with version 41 in the “release” update channel (Linux). Note that enabling this support requires a variable change to be set manually in about:config.

EDIT #3: The manual variable change in about:config is no longer needed, starting with Firefox version 44 in the “release” update channel and with Firefox version 45 in the “esr” update channel.


https://www.duolingo.com/profile/sadfhrw

The .woff file that is actually downloaded (if you use Chrome) does not contain those characters. I guess Duolingo dropped them out to reduce the size of the download and only now when there are new languages it became an issue.

As you can see in the picture, a lot of glyphs that shoupd be part of Museo Sans Rounded are actually not bundled in the file that Duolingo embedds


https://www.duolingo.com/profile/scilling

If they’ve created a trimmed version of Museo Sans Rounded (would their license from exljbris allow them to do that?), then that would certainly explain the behavior where it’s been observed; your picture looks as though they’d decided to use an ISO 8859-1 subset (plus Œ, œ, and Ÿ for French) of Museo Sans Rounded, perhaps to match their initially targeted western European languages.

On the other hand, if their .woff file hasn’t been modified, and the browsers are just downloading a subset of the typeface, then I wonder if Chrome (and Firefox, and Safari, and …) would require an explicit unicode-range descriptor to download the entire typeface? But since some people have reported not observing the problem, including at least one Chrome user on Linux, it seems that further research might be necessary.


https://www.duolingo.com/profile/sadfhrw

Trimming web fonts is a good practice. You should drop everything you don't use to save bandwidth and improve load times and performance. And maybe licensing costs as well—it is possible that the less glyphs you use, the less you pay in licensing fees. Bundling a web font is after all a "redistribution" and you have to pay extra for this.


https://www.duolingo.com/profile/sadfhrw

Some people don't see any problems because their default system font is virtually indistinguishable from Museo Sans Rounded. Especially if you are not a graphics designer. Therefore when the browser substitutes the missing glyphs, they (we) don't see a difference.

On my computer it is true for the font size used in discussion. This line ěščřžýáíé looks more or less fine on my system. Unless I look really close. Like comparing letters ěé. But at the size used for headlines the Museo is much thinner than my system font, so the missing glyphs really stick out.


https://www.duolingo.com/profile/Selcen_Ozturk

We've had the same problem in the Turkish course since the beginning, and I reported it several times. The problem is with ı İ ş Ş ğ Ğ


https://www.duolingo.com/profile/yimantuwingyai

I've become so attached to Duolingo's font. I am a bit of a font enthusiast and it's rare I like a font quite this much. I would actually be sad to have to adjust to a new one, as lame as that sounds.


https://www.duolingo.com/profile/pont

It's pretty clear by now that the problem is not with the font itself (which supports all the characters mentioned in this discussion), so I don't think the fix (if and when it comes) will involve changing fonts.

Learn a language in just 5 minutes a day. For free.