152

Update 3 - The changes from round 2 are live, but with one notable exception: On Linux, we spec’d “Liberation Sans” and “Liberation Mono”. Did some digging on that PR and installed a few Linux VMs and found Liberation to be the best way to normalize across Linux distros. It also solves an issue where Ubuntu Mono—regardless of how you feel about the typeface—is smaller than its sans-serif counterpart.

Also noteworthy, we aren’t touching webkit antialiasing right now. I was reacting to a change in macOS 11.3 that removes the ability to set antialiasing at the OS-level. I hope it’s a bug, and is patched up in 11.4.

Plenty of little bugs to squash yet, and I’m chipping away at them. If something feels off on Windows, do revisit your ClearType settings. I’ve seen some folks realize with this switch that they were running some non-stock antialiasing.


Update 2 - Alright folks, got some follow-up for you. You can see I’m considering some changes over at the Stacks repo. Sidenote: did you know our front-end library is open source and y’all can see what we’re up to?

  1. macOS and iOS continue to get San Francisco
  2. Windows continues to get Segoe, but we drop system-ui since it isn’t quite ready for primetime.
  3. Linux gets “Arial” which is never Arial, but often Liberation Sans, or Noto, but maintains the status quo.
  4. Android gets Roboto, but we don’t specify it since it was clobbering Debian
  5. If all else fails, sans-serif.

As for general font sizes, I think our fonts have always been too small. The base font size is 13px and we even show some bits of UI at 11px. I’ve got long term goals of bumping those up a point or two. I hear y’all with aging eyes. Mine are also aging—always have been, always will be 😛

I’ve read every comment and answer here and I think this strikes a balance between how we want to move forward and issues people have had in good faith. I’ll get to chipping away at the small issues once we iron out the bigger ones.

If this follow-up works, I’ll make sure to update the screenshots in this original post in a third update.


Update 1 - These changes are now live!

TL;DR We’re shipping system fonts as our default font stack. We plan to do this on May 10th, 2021.

What?

We’re planning on specifying system fonts on Stack Overflow and the Stack Exchange Network. On macOS and iOS, you’ll see things set in San Francisco. On Windows, you’ll see Segoe. On Android you’ll get Roboto. Ubuntu will show, well, Ubuntu. We’ll also use their monospace equivalents when writing in code or rendering keyboard keys.

OS Sans Mono
macOS San Francisco San Francisco Mono
iOS San Francisco San Francisco Mono
Windows Segoe UI Consolas, or Cascadia Mono, Segoe UI Mono if you've installed those manually
Ubuntu Ubuntu Ubuntu Mono
Android Roboto Roboto Mono
Chrome OS Roboto Roboto Mono
Fallback sans-serif Menlo, Monaco, Consolas, monospace

We’re leaving serif fonts alone so those will stay as Georgia, Cambria, Times New Roman, Times, and then serif as a fallback. We really don't do much with serifs anyway, and we don’t want to mess with the themes that rely on them.

Here’s the exact font stack we’ve specified that’ll go live on the 10th.

@ff-sans:
    system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
    "Segoe UI", // Windows
    "Ubuntu", // Ubuntu
    "Roboto", "Noto Sans", "Droid Sans", // Chrome OS and Android with fallbacks
    sans-serif; // The final fallback for rendering in sans-serif.
@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@ff-mono:
    ui-monospace, // San Francisco Mono on macOS and iOS
    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    "Ubuntu Mono", // Ubuntu
    "Roboto Mono", // Chrome OS and Android
    Menlo, Monaco, Consolas, // A few sensible system font choices
    monospace; // The final fallback for rendering in monospace.

Why?

Mark Otto put it really well on his personal blog, documenting GitHub’s rationale for switching. Like GitHub, our original font stack used Arial across macOS, iOS, and Windows. Arial was first created in 1982, and has served the web well for decades. But technology moves on. Modern system typefaces look better on both new high DPI screens, and old screens alike. Apple’s San Francisco and Microsoft’s Segoe both look great on retina displays, have more expressive weights, and improve readability across all contexts. With more weights, we can have better hierarchy. We can also get more expressive. For example, in dark mode, we could drop our font weights a bit for better readability.

But what about consistency?

We originally chose Arial because it was available on the widest set of devices, allowing us to have a consistent experience wherever you were. However, Arial doesn’t ship with Linux distros or Android devices. We’re currently only achieving consistency between macOS, iOS, and Windows, leaving 2 platforms to choose their system font. We’d rather have the consistency be shifted to the device itself—when viewing Stack Overflow on iOS, it’ll feel that much more native in San Francisco. Same with Android, which is already being displayed in Roboto.

We should also note that prior to these changes, our monospace font stack varied wildly. Now you'll have better consistency between sans and monospace, since we'll do our best to choose the right pairings.

Will my Stack Exchange site lose its custom font?

Nope! This change will not affect sites that have their own typefaces. Sites like Christianity and English will still be displayed in their custom fonts.

Future possibilities

If consistency were the absolute goal, we’d ship our own custom font. I would love to be able to truly express our brand through a typeface, but that means users would have to download custom fonts and wait for them to display. We’d also have to cover international character sets. Displaying custom fonts is getting more realistic every day at our scale, so we may revisit that choice at some point, and come back to a more consistent experience. System fonts let us modernize in the meantime without too many drawbacks.

Also, since a lot of our site is built using our design system, we can store these font stacks as CSS variables. We could allow users to more easily specify dyslexia-friendly typefaces, or load their own entirely.

Some screenshots

Safari on macOS Safari on macOS

Firefox on Windows Firefox on Windows

Firefox on Ubuntu Firefox on Ubuntu

So what now?

When this change drops, we could use your help in discovering any bugs—things like unexpected alignment, or any questionable bits where we clearly got the wrong typeface.

134
  • 124
    Hopefully this will prevent issues like 'pom’ getting mistaken for ‘porn’ in the future. – ColleenV May 4 at 19:39
  • 43
    Would still be nice if all the fonts made the difference between l and I (bonus points for not noticing which is which) substantially more noticeable, at least along the lines of what the Ubuntu font does. – Zoe the 1337 Princess May 5 at 16:31
  • 16
    A welcome change as long as it doesn't break Tony the Pony.;-) – Jon Ericson May 5 at 16:44
  • 40
    What about non-ubuntu linux? – Aconcagua May 6 at 10:05
  • 16
    It seems arbitrary to simply pick Ubuntu out of thin air to be representative for Linux. What about openSUSE, Archlinux, Debian, etc... We will see how it goes, but this looks like another solution in search of a problem. I'd rather see Stack lead than just follow what github does... – David C. Rankin May 8 at 4:00
  • 31
    Could we have this as an option in our preferences? That way it'd look OK across most browsers, instead of excluding most in favor of, seemingly, macOS. – Ollie May 10 at 17:26
  • 65
    Please make this a toggle in the settings. The fonts look truly horrific – leonheess May 10 at 18:20
  • 48
    This is a bad change. At least on AskUbuntu - site that I visit (or visited) most often the Ubuntu font is much less readable than plain sans-serif, be it Arial, Liberation or whatever. I get tired just from browsing the site. It may look as a nice nice idea for someone who is only looking at Stack sites, but definitely not for someone who actually reads them. The whole effect of this will be that it will simply discourage me from visiting the site too often, just to save my eyes. :( – raj May 10 at 19:13
  • 15
    Oh my eyes... this font seems piexlized, too much curves, I am on Windows Chrome.... Don't like it... – serge May 10 at 19:29
  • 76
    Ewww (Windows 10). Can we have the old ones back please? – Nick May 10 at 23:31
  • 47
    Another Windows 10 + Chrome user here who hates this change. I think it looks even worse on StackOverflow dark mode. Code fonts look blown out (font-weight) and fuzzy at the edges. Smaller fonts like in comments are spindly, especially when italicised. – Phil May 11 at 0:20
  • 16
    I love SO Community, it makes a lightning-fast solution fixing any such Update. Thanks everyone who helped me to revert this. Segoe UI in current configuration is eye-bleeding font. – aepot May 11 at 0:22
  • 36
    As a Windows 10 user with an old, 23" 1080p display, I am definitely against this change. The sans-serif font is just slightly too thin for me to read comfortably, and at the same time the monospace font looks... almost blurry. My eyes are watering after reading the top couple answers here. – matthew-e-brown May 11 at 4:47
  • 22
    As a nearly 50 year old viewing the site on Windows 10, this change is terrible for my aging eyes. – 17 of 26 May 11 at 18:55
  • 17
    I wanted to have the clean logic of trying to show the system font where appropriate: you keep saying “system font”, but that’s not what these fonts are. They are actually system user interface fonts. So, they are appropriate nowhere for body text. They are designed for things like window titles or menu items, which are short phrases. As the font self-description says, “The new Ubuntu Font Family was started to enable the personality of Ubuntu to be seen and felt in every menu, button and dialog”. It is sheer luck that the Windows UI font is passable as a general-purpose font. – Emil Jeřábek May 12 at 11:34

60 Answers 60

194

Now that this has gone live... Serious question:

How do I go back?

The new font chosen (Using Firefox in Windows 10) feels substantially harder to read and has some gnarly issues with anti-aliasing, to the point that italic text is nearly painful to read, especially in comments.

20
  • 9
    Related. – 41686d6564 May 10 at 16:47
  • 3
    @AaronShekey Any chance to get a user script to change the font? – samcarter_is_at_topanswers.xyz May 10 at 16:54
  • 1
    @samcarter_is_at_topanswers.xyz github.com/openstyles/stylus – Zoe the 1337 Princess May 10 at 16:58
  • 5
    @AaronShekey Having a play around with multiple settings, I think my biggest issue is, it feels like this change hasn't taken into account high DPI devices, it looks... okay I guess?, while running at 200% scaling in 4K, but any less than that is extremely uncomfortable, and I have no intention of using my screen at 200% scaling, ta for CSS heads up – Nick May 10 at 16:59
  • 1
    @Nick Our intent with the system font switch is that they look better on high DPI and 1x screens. I use both throughout my day. – Aaron Shekey May 10 at 17:01
  • 13
    I can live with most of the changes, but reading comments specifically (whatever the system-ui default is for Windows at 13px) is straining my eyes, so I'll be reverting to the old font stack with a userscript as well until this is addressed. – Patrick Roberts May 10 at 17:02
  • 14
    From the wayback machine: body{--ff-sans:Arial,"Helvetica Neue",Helvetica,sans-serif;--ff-serif:Georgia,Times New Roman,Times,serif;--ff-mono:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;} – SuperStormer May 10 at 17:03
  • 6
    Here's a UserScript I just threw together, adjust the @match to taste: gist.github.com/patrickroberts/3b3a89cb38c94c8eb591443e329cc768 click the "Raw" button to automatically prompt installation if you already have Tampermonkey/Greasemonkey. – Patrick Roberts May 10 at 17:13
  • 52
    As a (slightly) older person, I have to say Segoe is much harder to read than Arial, which has always been incredibly clear for me. I'm now going to have to go and figure out a way to reset my fonts back to ones I can read without getting a headache :-( – Rory Alsop May 10 at 17:13
  • 9
    Here's a userstyle that fixes both sans and monospace (and hardcoded code block fonts) gist.github.com/SuperStormer/60a5e5c7e9549e9ed865a579df6f11be – SuperStormer May 10 at 17:14
  • 7
  • 9
    The new Windows fonts are too small for me. I'd like to go back too. Also the focus should have been on readability , not UI. – Thorbjørn Ravn Andersen May 11 at 9:29
  • 1
    Yeah, the Windows monospace font looks bold and blurry. – Kobi May 11 at 10:46
  • 13
    @AaronShekey they look better to you on high DPI and 1x screens. How good things look, and comparative judgements are subjective. There are a lot of issues that have been overlooked, people with bad eyesight like Nick here having issues with the font, the change in base font size itself being a problem, possible issues for the dyslexic, etc. – Andrew May 12 at 2:39
  • 4
    @AaronShekey This font change introduces difficulty for me to read the text on stack websites, specifically, the monospace font used on windows for syntax highlighting looks fat and is hard to read, the segue ui font as others have commented, looks like a comic sans-inspired design. Why isn't this an option for users to decide to use? – Peter May 12 at 17:49
172

Multi-disciplinary designer chiming in here.

However, Arial doesn’t ship with Linux distros or Android devices. We’re currently only achieving consistency between macOS, iOS, and Windows, leaving 2 platforms to choose their system font.

Why are you not loading the Arial webfont?

We’d rather have the consistency be shifted to the device itself—when viewing Stack Overflow on iOS, it’ll feel that much more native in San Francisco. Same with Android, which is already being displayed in Roboto.

What is the advantage of feeling more native? Is Stack Exchange not its own brand with its own identity?

We should also note that prior to these changes, our monospace font stack varied wildly. Now you'll have better consistency between sans and monospace, since we'll do our best to choose the right pairings.

You can still select the right pairings going forward and have it be consistent across each platform.

If consistency were the absolute goal, we’d ship our own custom font. I would love to be able to truly express our brand through a typeface, but that means users would have to download custom fonts and wait for them to display.

You can achieve consistency without making your own custom font. There are plenty of websites that download off-the-shelf well-designed fonts. Text is rendered and then styled, so even if there was a delay in loading the generally small (~100kb) font file, the text would be displayed in the default browser font temporarily—making it still readable as it doesn't require any "waiting" for the text itself to display. Regardless, the font file is downloaded once on first visit.


As a designer, this move baffles me. I use a Windows computer, an Android phone, and an iPad tablet and each one will look different from each other, but look native to the device they're on? I fail to see the real reason for this move. What is the advantage of looking native to a device? Has any other company done this (purposefully) and if so, what was the outcome? Do your designers on staff agree with this decision?

I'd love to hear any and all comments or thoughts.

23
  • 5
    Not a designer, but the move might be influenced as a replacement of native (web) app on mobile (since the official SO and SE mobile apps have been "sunset"), like how Flutter decides the font for different OS. – Meta Andrew T. May 6 at 6:32
  • 27
    [Also not a designer] Personally, if it makes things more legible I'm all for it. I remember when Ask Different used to have its own, very clean font; then a few years ago everything went to the same fuzzy font that Super User had been using. I'd like 'clean' back & if that's San Fransisco, then that will suit me just fine. I honestly don't care how it looks on Windows [nor do I imagine Windows users will care how it looks on Mac] Responsive design means it's going to look different on every screen anyway. – Tetsujin May 6 at 7:28
  • 5
    Currently there is a tension between achieving a consistent look for branding purposes and making the site look good. The version of Arial which Microsoft licensed for use as a web font is from 1996. It only has about 500 characters. The typeface itself is from 1982 when we used fuzzy CRT monitors. If they used that, then type quality would go down on millions of devices and scattered bits of text would be displayed in visually incompatible fallback fonts. – David42 May 6 at 13:11
  • 80
    A fellow designer! 👋 We have opted to not load webfonts at our scale. Stack Overflow, despite being one of the top 50 visited websites, is fast and we'd like to keep it that way. Everything's a budget, right? We download CSS, JavaScript, and maybe eventually, fonts. We'd have to delete a lot of legacy CSS before we have the budget for fonts. For now, this allows us to modernize our typefaces. – Aaron Shekey May 6 at 15:57
  • 27
    Hard to address each of your questions, but lots of your questions are addressed in my original post. Our designers agree with this decision. Many websites, including what I consider our peers take this system typeface approach, GitHub being the closest audience we have. – Aaron Shekey May 6 at 15:59
  • 3
    Basically, they're following the train of others companies doing the same. On a personnal note, it's true that if each site I would visit had a distinct font, it might hurt my eyes to constantly switch from one font to another. – Walfrat May 7 at 7:13
  • 35
    Another multidisciplinary designer chipping in :) I second that performance and accessibility is more important than a unique brand. The logo, colours and URL do more than enough to carry the brand, and I wish more companies put a greater focus on creating value for the user rather than looking unique. – Damir Kotoric May 8 at 5:58
  • 115
    As a user, I couldn't give two shits about a "brand" and "identity", I just want to be able to read the code I'm copying and pasting – Hong Ooi May 9 at 1:47
  • 3
    ^That, plus I want the rendering to be imperceptibly fast. The fonts swapping suddenly 100ms after the page loads is 100ms slower than I like. – Passer By May 9 at 23:56
  • 13
    @AaronShekey "modernize our typefaces" follows the Microsoft Way™ of change for change's sake. Not at all a fan of the Segway font (misspelling intentional). Looks really ugly now, just like all the default fonts in MS Office, which I promptly change. #NotADesigner Frankly, the Arial is far more clear and readable to my eyes. – FreeMan May 10 at 16:58
  • 12
    "generally small (~100kb) font file" - That's not small, at all. And it adds another web request that's executed strictly in sequence, after the HTML has loaded and parsed, and after the CSS the HTML references has loaded and parsed. Plus, another point of failure. The web today as a whole feels as responsive as MySpace in its day. To fix that we need to convince designers to stop having an opinion on what's small or what's fast. – Tim May 11 at 8:04
  • 6
    I don't mind loading fonts, but please, please, please don't give us Arial back. I already mentioned this on the question, and Arial is one of the unnecessarily many fonts where I and l are essentially identical. For me personally, that makes certain (largely abbreviations) impossible to read, because I have no idea if the I is meant to be an I or an l. There's a lot of talk about fonts being hard to read, but I'm surprised l vs I isn't mentioned more. – Zoe the 1337 Princess May 11 at 10:41
  • 2
    In an optimal world, we'd have a universal font where these edge-cases don't exist, that also plays nicely with unicode. In the meanwhile, Arial is a step in the opposite direction, not in a useful direction. – Zoe the 1337 Princess May 11 at 10:45
  • 8
    Agreed. This is an incredibly ham-fisted and nonsensical change. Fonts have been a browser setting (and thus a user preference) for as long as the web has existed. It's actively user-hostile to take that away from people, and value the company's preferences higher than the user's in this really subjective area. Anybody who wants their browser to look like their system settings dialog could set it to do exactly that before, there's no added value in forcing it. And personally I don't care how SO looks like on the next person's Linux box, the "consistency" take is completely bogus. – Tomalak May 11 at 10:54
  • 6
    @Zoe I'm not interested in a brand font, really. I'm also completely uninterested in "consistency" although I understand that someone at SO might be. As far as I am concerned, the personal preferences of someone at SO don't apply to me, and they should not overrule my own. There is a perfectly good font preference setting in my browser's options, and optimally, I'd like that to work. – Tomalak May 11 at 11:29
151

Why Segoe UI? Why UI fonts at all?

Segoe UI is, as its name implies, a font designed for UI. As other posters have said, it is actually somewhat harder to read. The lines have a lower weight and the x-height is smaller. You need to change the font size or you'll reduce visibility and accessibility.

Though, honestly, UI fonts are not designed for reading larger amounts of text. Using font-family: ui-font makes the most sense when you are mimicking a window, so that the app looks more native, but not for large amounts of text.

This seems a move made without any concerns about accessibility. Users should have been told about the propose change well in advance and given a chance to voice possible flaws so that everything could be worked out. I do not understand why StackExchange continues to make decisions without taking advantage of one of its biggest assets: the combined knowledge and experience of so many subject-matter experts.

I suspect that this change is actually more of a fad than anything. Of course Github did it--they're owned by Microsoft. Microsoft, however, is historically not very good at design.

1
  • This is especially a problem for me since I'm dealing with the small monospace on Ubuntu that others have pointed out, and I use Chrome, which only lets you set monospace, not ui-monospace (because why would it?) in chrome://settings/fonts. – wjandrea May 11 at 18:26
117

Update

As of "Update 3" things look about like they used to for me on Linux Mint, thank you for hearing the feedback and making the adjustments. (Took a quick look on Windows. I can't say it looks good to me. Better, but not good.)

The process part of the below remains pertinent, but again, thank you for listening.


Two issues

  1. The change is not good, it makes things much harder to read

  2. The process of the change was awful

Apologies for being blunt below, but I'm cross I even have to write this. Has Stack Exchange learned nothing about community engagement and change management? And I'm in a hurry because I have actual work to do, so wordsmithing isn't a priority.

The change itself is not good

This change makes it really hard to read the site on Brave (Chrome-like) on Linux Mint 20. This isn't a moving the cheese thing. This is actually making my eyes hurt.

The text seems smaller ("gee, thanks" says the 54-year-old man), line height and letterspacing is...off... I'm not a fonts guy so I don't know the ins and outs of why, but even zooming the text to a reasonable size again it's still really hard to read (and the layout gets hinky).

Sure, I could use a userscript to fix it, and then have to update that user script every time you make another change like this instead of fixing things that actually matter (like Stack Snippets), and deal with the inevitable bug — sometimes quite subtle bugs making you miss important information — related to using a userscript that you don't test with (why would you?) before doing updates.

I should not have to do that just to help people on Stack Overflow.

See the end of this post for pictures of how it looks on my system, but here's a side-by-side between now and May 6th (I suggest downloading and viewing at 100%):

enter image description here

I'm surprised to find that the font-size values didn't change (because it seems smaller), it's "just" the font-family. But it's a big negative impact on readability, on my system anyway.

Making large blocks of text readable online is surely a solved problem? Blog after blog has perfectly readable text (much more readable than mine; I need to fix it). News sites. Etc., etc., etc.

The process of the change was awful

Reading and writing text is what using Stack Exchange is all about. Changing the text is a huge deal.

I visit Stack Overflow every day, several times a day. There was no advance warning of this change that I saw (if it was in the "The Overflow Blog" or "Featured on Meta" lists, pardon me for focussing on questions and answers — a change this big should be a banner I have to dismiss). I take it the only announcement of it was in the "Featured on Meta" list that I, like many, don't pay much attention to.

I was going nuts trying to figure out what button I'd accidentally pressed to screw up my text like this. Again, a banner was called for.

Maybe I'm not representative, though I see I'm far from alone with finding the new font harder to read.

Having used a proper process would at least reassure me that it was taken seriously and done properly even if it negatively impacts me personally. Here's an off-the-cuff of how this change could have been handled better IMHO (but I'm not a process consultant, it can probably be done even better):

1. Requirements: Is a change really needed?

Ask the users, in particular your regular power users: Do we need to change it, or is it fine as is?

2. Requirements: Why is a change needed? What needs changing? How?

Ask the users why they feel a change is needed, what needs changing, and how.

3. Implementation: Options

Do up mock pages showing:

  • Original
  • Option A
  • Option B
  • Option C
  • Option D
  • Option E

and collect feedback on the options, narrowing it to (say) two.

4. Implementation and Communication: A/B Testing

Announce the upcoming change and ask people to opt into being randomly assigned one of the test groups. Get feedback and measure engagement vs. previous levels of engagement. Be sure to get a representative sample testing (including young people, older people, people with "perfect vision," people who need corrective lenses, ...).

5. Implementation: Optional

A change this big is never going to be okay with everyone. Provide an opt out. Yes, it incurs maintenance cost (or more accurately, making the change incurs maintenance cost; leaving it alone wouldn't have cost anything). Review annually to see if you can retire the opt-out.

Or here's an idea: Have options. There is no one-size-fits-all. Offer a two or three presentations.

6. Implementation: Finalize

Finish the identified change without hundreds of !important CSS rules, not least so userscripts or similar can reasonably handle undoing it.

7. Communication: Advance warning

Banner-level warning of the upcoming change with a preview link so everyone can see what it will look like to them.

8. Communication: Notification

Banner-level notification the change has been put in place.


Here's what it looks like

(please click to see the full size versions)

Question list - unzoomed:

enter image description here

Question - unzoomed:

enter image description here

Question list - zoomed 110%:

enter image description here

Question - zoomed 110%:

enter image description here

Question list - zoomed 125%:

enter image description here

Question - zoomed 125%:

enter image description here

Posting an answer - unzoomed:

enter image description here

Posting an answer - zoomed 110%:

enter image description here

Posting an answer - zoomed 125%:

enter image description here

Comments - unzoomed:

enter image description here

Comments - zoomed 110%:

enter image description here

Comments - zoomed 125%:

enter image description here

11
  • 28
    +3108 hurts most for me ;) – Luuklag May 11 at 8:49
  • 4
    @Luuklag - LOL I haven't clicked it in a while, so it adds up... :-D – T.J. Crowder May 11 at 9:03
  • 19
    I'm a relatively young person and I am squinting at the screen to be able to read what that says. – 10 Rep May 11 at 15:58
  • 19
    @T.J.Crowder I'm 58 years old. During the past few years, I've spent quite a few hours each day on various SE sites, especially Math SE. This was usually never a problem before for my eyes, but with this change I've had eye strain trying to read the text, especially on certain sites like the Math one (it's worse on this site too, but not as bad). The text is somewhat smaller and thinner, which makes it harder for me to read. I'll likely get used to this, or make some adjustments to make it easier for me, but I agree with your various points, especially about providing options to users. – John Omielan May 11 at 18:29
  • 4
    This is beautifully thorough. – psdpainter May 13 at 2:21
  • 1
    Some of the screen shots are not in focus! – user59748 May 13 at 18:23
  • 3
    @user59748 - LOL! – T.J. Crowder May 14 at 6:21
  • 1
    While I personally like the Mac system font ( Mac user here) — actually, I don't dislike Segoe UI either — and therefore disagree with your first premise, nevertheless I voted you up since a) I can say that what you guys get on Linux is not a good choice (too distracting, to say the least), b) I quite appreciated your thorough analysis, and c) like you, I completely missed the change announcement as well... – Gwyneth Llewelyn May 15 at 21:32
  • 5
    I'm 30 and I agree. I'm no longer able to keep a decent layout using two windows per monitor. Plus, Ubuntu fonts look hip and trendy. They feel out of place here and are just too distracting. – Ramon Melo May 16 at 23:39
  • 3
    As a Windows user I find this change atrocious. – Robert Andrzejuk May 19 at 13:34
  • 4
    @RobertAndrzejuk - Yeah. I took a look at it on a VM (I mostly use Windows on VMs) and it was okay -- not good, just okay, readable enough. Just looked at it on a real machine and it seemed even a bit worse. :-| – T.J. Crowder May 19 at 14:37
75

As you consider the font stack, please do consider revisiting this very popular request: "Can we at least select our fonts?". Yes, it is marked , but the "New plan is the old plan, mostly" and these fonts are still inappropriate for a significant number of sites.

10
  • 51
    Thanks for posting this. As someone who is legally blind, but has some vision, Segoe UI has been the bane of my life since upgrading to Windows 10. I've sunk hours into doing whatever I can to get away from it because of how dreadful a font it is. I agree with @Davbog's answer. I don't care about whether something will "feel that much more native", I want to be able to read the content without straining my eyes doing so. – John H May 6 at 12:57
  • 24
    @JohnH I recently, to my delight, discovered Atkinson Hyperlegible. So far, it and Plex Sans are the only sans-serif fonts (that I've found) featuring both slab-serif uppercase Ɪ and lowercase ɭ with a tail, allowing immediate stand-alone recognition without requiring the other character adjacent to be sure what | means. – Adám May 6 at 18:21
  • 5
    Adam, that's really thoughtful of you to link those fonts - I appreciate that. I'll give them both a try and see how I get on. – John H May 6 at 18:42
  • 6
    Note that what they status-completed seems to be: allow each site to customize its fonts. What you seem to want if I'm reading the request correctly is to allow each user to customize the fonts. It might be worth editing that into this suggestion so that it is more obvious if Stack employees read it. Or if I'm misunderstanding, perhaps more explanation would help (it doesn't matter if I understand, but you don't want Stack employees to misunderstand). – mdfst13 May 7 at 10:09
  • @mdfst13 I think it is quite clear that the post speaks about sites wanting specific fonts. E.g. it says "Sites that use Unicode characters extensively, like Japanese.SE, will want" and "sites that need an alternate font". – Adám May 7 at 10:24
  • 3
    Then I think that is why they are saying that it is completed. They can set site-specific fonts. If you want a font change for a specific site, you might be better off posting in that site's meta. Because first you want to get community consensus on the site and then ask for a change to that specific site from Stack. Getting community consensus on the common Meta doesn't ensure that the font will be correct for the specific site. So customizations on a per-site basis should be discussed in each site's meta. – mdfst13 May 7 at 10:46
  • 4
    @mdfst13 Except such requests will be refused: "Themes can specify what elements use serif, sans-serif, or monospace fonts." i.e. not which fonts at all. – Adám May 7 at 12:01
  • 1
    @JohnH … and I've now found a 3rd option: Go fonts (Download) – Adám May 12 at 10:54
  • @Adám It's really good of you to link those to me. I'm still experimenting with the others, but this is very kind of you - thank you. I think I prefer the Go fonts already! – John H May 12 at 13:48
  • 4
    As a humble collector of fonts, my thanks to @Adám for Atkinson Hyperlegible and Plex Sans; both were promptly added to my collection. Thanks so much! Regarding the issue under discussion, I wonder why SO didn't simply go with defining the default sans-serif font as, well, sans-serif. This will be replaced by whatever OS/browser font is set by default, and can freely be changed by the user (without tweaks, scripts, or any other 'tricks'). That's, AFAIK, what Wikipedia does. – Gwyneth Llewelyn May 15 at 23:38
67

Arial was first created in 1982, and has served the web well for decades. But technology moves on. Modern system typefaces look better on both new high DPI screens, and old screens alike. Apple’s San Francisco and Microsoft’s Segoe both look great on retina displays, have more expressive weights, and improve readability across all contexts.

To me, Segoe UI looks like a cartoon comic font. It's really bad, and unreadable. And I am not alone in thinking this.

Also, IMO Arial was perfectly readable on my HP 24mh monitor, with my Nvidia GeForce GTX 1050 Ti video card (this is new tech on the market). Yet the font is unreadable on this new technology. And I don't see any data that proves system typefaces look better than Arial on new devices.

Is there any paper which uses data collected from people that states that system fonts are more readable than Arial? Really, one of the only reasons this change was made was because GitHub did it.... :\

If you want to switch the font, please make it something other than Segoe UI for Windows.

Finally, italics are a pain to read in the new font.

10
  • 3
    Agreed that italics are worse as well. I focused on the smaller comment text, but the italics are even lighter. Small fonts + italics is even worse. I at least disable RGB rendering in Chrome, which makes things a bit better. – trlkly May 11 at 1:02
  • I guess I don't particularly mind it on Ubuntu (not terrible, not great) but I do have to agree that the reasoning behind it is bizarre. Not to get too deep into speculation, but it sounds like a designer at Github decided to make a token "modernization" gesture to change... something for the sake of "fashion" and SO just decided to copy it. Personally I'm all for websites honoring system fonts, but they didn't even do that properly, it doesn't honor my system's font, it uses the font SO thinks my system should be using, without really asking. – jrh May 11 at 14:41
  • 14
    Also on an unrelated note, I would really personally prefer it if Github were not be treated as the world leader in where the rest of the internet would go. Ever since the Microsoft acquisition they've been making a bunch of changes (ranging from UI cheese moving to things that make life slightly better for enterprises sometimes but make it very annoying for smaller orgs). IMO, generally poorly thought out token gestures, always proclaimed with an air of "if it works for us, it works for everyone". If you're copying them, I'm not sure they know what they're doing, either. – jrh May 11 at 15:13
  • 2
    @jrh yeah... I'm not an expert, but just because someone named Mark Otto wrote a blog post doesn't mean SE should change their font... – 10 Rep May 11 at 15:50
  • 2
    +1 for looking like a comic font. And this is on Debian, where apparently system-ui is Cantarell. – Jonathon Reinhart May 11 at 22:13
  • @JonathonReinhart IIRC you can change system fonts in debian (part of linux) I might be wrong, but give it a try. – 10 Rep May 12 at 0:10
  • 3
    @10Rep Why should a user want to change their system's fonts? If they can, and have, changed the system's fonts, it is because they like the systems UI when that font is used. Nobody should have to change their system to accommodate a website, or even a fiefdom of web sites. There are, of course, many other options to work around the issue depending on the user's technical skill with their OS, and their preference for something different, even if it's the "not different" that used to be here. The fact that there are already so many workarounds posted suggests that it's an unpopular change. – Chindraba May 12 at 5:53
  • 2
    This font change introduces difficulty for me to read the text on stack websites, specifically, the monospace font used on windows for syntax highlighting looks fat and is hard to read, the segue ui font as others have commented, looks like a comic sans-inspired design. Why isn't this an option for users to decide to use? – Peter May 12 at 17:47
  • 1
    @Peter I've asked the same thing, and I was told by another user that I was acting entitled :( – 10 Rep May 12 at 18:10
  • Getting Cantarell here also (Fedora). No idea why; AFAICT neither my system nor browser specifies that font anywhere. It's... a rather strange looking font, compared to Liberation Sans which I was getting before. – Matthew May 12 at 18:14
47

Rapid observations

Interesting change. Confusing title. Strange timing.


Interesting change

This looks to be a network-wide change, except when it isn't. Any site not already customized will switch to the new version, while customized sites get to keep what they have (or don't get the latest and greatest change). So long as the results are still readable, or no less readable than the current settings, it's fine. Telling the difference between uppercase /ˈaɪ/, lowercase /ˈɛl/ and Arabic numeral one can be difficult at a glance. Similar difficulties exists between uppercase /ˈoʊ/ and Arabic numeral zero. With luck the font served will resolve the issue.

Confusing title

The term "system fonts" made me hopeful, at first. Thinking to myself that now whatever fonts I've set my system to use for serif, sans-serif and mono space would be used in my browser as well. Well, the title was promising in that regard. Rather, if the change works as intended, the site will use a font which my OS supposedly ships as the default "system" font. Well, for the "top five" anyway: Android, ChromeOS, Windows, MacOS, and iOS.

Strange timing

Of all the things needing developer and designer attention on the network, this seems the least often mention, or requested, change. I've no idea how many sites have been out of Beta, or for how long, waiting on a customised theme, even a tiny bit to make them "unique" within the network. As mentioned in a comment, dark mode was introduced to SO over a year ago. Applying dark mode to the majority of the sites would seem to be less work than selecting and testing a new font stack system wide.


What I think

(All in random order)

The "Why" section references a GitHub blog as covering the reasons for switching. The same blog entry explains why they dropped the Ubuntu font, yet it appears to be included in the font stack here. If GitHub had issues with that font using their modest, by comparison, site styling, what problems can be expected within this network?

The table of font to OS association contributed to my initial thought that the "system font" would be applied to the site. Using a custom font stack, which is supposed to have the site's fonts match the device's system font to create a seamless user experience only works until the user has selected a different font for their device. Worse, if the user has selected a different font they may be upset that SE refuses to acknowledge that choice.

Even if it's not a custom font for SE, though that was stated as a possibility in the future, using a downloadable font, with decent fallback options in the font stack seems like a better option for creating a "brand" feel rather than trying to create an "app" feel which is so demonstrably fragile. The wait for it to download, even on a mobile device should be minimal, and is likely cached by the device for future page loads as well.

Also interesting is the desire to modernize the style, but only for the sans-serif and mono space fonts. If the "old is bad and new is good" is to be part of the rationale, why leave the old serif fonts untouched? Times and Times New Roman (1931) are older than Arial (1982), and Georgia (1993) is not much newer.

As mentioned earlier, the differences between uppercase /ˈaɪ/, lowercase /ˈɛl/ and Arabic numeral one can be difficult at a glance, as can the difference uppercase /ˈoʊ/ and Arabic numeral zero. Finding a set of fonts, especially in the mono space group, would probably do more for the users than aiming to update the fonts just because the current set is "old".

I frequently see references to the design system (Stacks), and how much easier it makes design change implementations. In this case because the font stacks can be stored as CSS variables. Somehow, whenever other, user desired, design changes are mentioned, the typical reply is akin to the idea that it's too hard, or take too much time, or involved too many resources. I've yet to decide if the Stacks took is helpful or not, in actual application by the team.


I'm not opposed to a fresh new look. It's even a good thing to keep a fresh feel to the site. I also do not personally care which fonts are used, or even if serif or sans-serif is the norm. The timing, while short, isn't a problem, nor would it be if there had been no notice at all. Odds are that less than half the users will even notice the change. I am a bit surprised that this change was not significant in requests or complaints on meta yet seems to have been fully developed without feedback from users.

It's my hope that the reading won't be any more difficult than it is.

15
  • 33
    "seems to have been fully developed without feedback from users" - unfortunately, that's how things are done these days. I'm saying this considering the last design changes (this and this, just to mention 2 examples) - and regardless of all the negative feedback and requests to revert them (here and here), SE kept those changes, ignoring the community. That's their current modus operandi, unfortunately our opinion doesn't make any difference to them. – hkotsubo May 6 at 12:08
  • 6
    The font used will actually be system-ui. This should be whatever you set as your system font, if the OS allows that. So exactly what you wanted, if I understood you correctly. The new CSS does not hard-code font names. – Konrad Rudolph May 6 at 13:08
  • 6
    Oh I wish it were easier to address things via comments. There exists the concept of quick wins on decades-old software, and this is one of them. Making themes and ensuring they're all dark-mode aware is not a quick win. It'd take me about 10 months to do, exclusively, and that assumes those changes have the largest impact. – Aaron Shekey May 6 at 16:27
  • 2
    @KonradRudolph If the design does use system-ui the results will be nearly identical to what they don't want, Helvetica and Arial defaults. My current desktop uses Noto Sans and my browser is set for Source Sans Pro. The page you directly linked to explaing system-ui still selects Arial. i.stack.imgur.com/GElc0.png – Chindraba May 6 at 17:24
  • 3
    @Chindraba No, you’re misunderstanding computed style in the screenshot. The arial value is being overridden by the cascading style value system-ui. And the selected text in your screenshot is very clearly not using Arial. – Konrad Rudolph May 6 at 21:17
  • 29
    @AaronShekey "Modern" is not automatically a win, quick or otherwise. The only thing I see here even approaching an actual reason is some vague mention of high resolution devices and ill-defined notions of "readability." I don't see any specification of what problem you're actually solving, just common, vague platitudes that tend to create more trouble instead of solving problems. But your comment is a cop out, anyway. You have a whole question post to explain the issues you only reference here and chose not to. – jpmc26 May 6 at 23:18
  • 1
    @KonradRudolph I stand corrected, it is picking up on my browser's setting and using that. The "system" is set to Noto Sans, and the browser is Source Sans Pro, which is the final font used to display that segment. The on-device consistency is still lost, and the user is given more control. +1 for the user wishes, -1 for designer wishes. – Chindraba May 7 at 1:04
  • 20
    Moving forward without feedback from users seems to be part of the Stack DNA. – Mark Ransom May 7 at 1:16
  • 1
    @AaronShekey Please confirm whether the claim font-family: system-ui will be used is correct. If not, then addons exist that will allow users to change any custom font, which might help alleviated concerns about the changes. Personally, I don't like that Segoe-UI has a smaller x-height, which will necessitate zooming in further on the site to be able to read the comments.) – trlkly May 9 at 21:52
  • 1
    @trlkly The update to the post, beginning with "Here’s the exact font stack we’ve specified that’ll go live on the 10th." was made by AaronShekey. With the time left before it goes live, I'd have to take that as confirmation of what the font stack is. Aaron might reply here, but until then I'd take it as official anyway. – Chindraba May 10 at 1:09
  • @Chindraba It didn't seem to follow my browser settings on Firefox, I had to uncheck "Allow pages to choose their own fonts, instead of your selections above" to change the fonts. I'm glad I found that checkbox though, this is nice. – jrh May 10 at 20:12
  • @jrh I started to do some testing to see which settings caused what results. Using Chrome, FF and FF-Dev on openSUSE Linux. Decided it wasn't important enough to see exactly what results were possible. Without the force-fonts active it seems that on FF and FF-Dev system-ui uses the browser's selected sans font while Chrome uses the font specified in system settings. ui-monospace in FF, FF-Dev and Chrome use the browser's setting. Serif fonts have been ignored since it's using a defined stack rather than a generic name anyway. – Chindraba May 10 at 21:48
  • @Chindraba personally I was hoping to use a serif font for everything, I don't really like sans serif fonts for anything because 0/O I/l/| look very similar. You could say that in the context that it matters, people should be using backticks (I/l/|, O/0) but it doesn't always happen and even in the editor I'd prefer to just have a more distinct font. I was hoping that SO would pick up on the fact I set all of my system fonts in my OS (Ubuntu Mate) to something different, but it didn't. – jrh May 11 at 14:31
  • @jrh Try setting the browser's font selections. Haven't tried it but FF has 4 settings in the "Advanced..." dialog: Proportional, Serif, Sans-serif, and Monospace. Not sure when the Proportional setting is used, but the others don't have to be set to matching fonts. You can set a serif font in the sans-serif selection. – Chindraba May 11 at 15:37
  • 9
    @AaronShekey - "There exists the concept of quick wins on decades-old software" Yes. This isn't one of those. This is a quick loss. It's unfortunate that SE didn't consult users before doing it, but please listen to the feedback you're now getting. UI fonts are for user interface elements, not blocks of text. – T.J. Crowder May 12 at 6:25
47

I don’t like this at all. Here is a UserStyle to revert:

/* ==userstyle==
@name Stack Exchange
@namespace Steven Penny
@version 1.0.0
==/userstyle== */
@-moz-document
domain("stackexchange.com"),
domain("stackoverflow.com"),
domain("superuser.com") {
   body {
      --ff-mono: Consolas;
      --ff-sans: Arial;
   }
   .topbar-dialog .modal-content .message-text h4,
   .topbar-dialog,
   header {
      font-family: var(--ff-sans) !important;
   }
   .full-diff .content,
   .wmd-input,
   code {
      font-family: var(--ff-mono) !important;
   }
}

https://github.com/openstyles/stylus

6
  • Can this be put right into Firefox userContent.css or does require some extension? – raj May 10 at 19:33
  • 2
    @raj Install Stylus - create a new style, paste code above, give it name, save. – J... May 10 at 22:34
  • 3
    Sorry, technie ignoramus here. The new font is killing my eyes on History SE. Can someone explain how I can use this UserStyle posted here so I can revert? I have chrome, Windows 10. – Lars Bosteen May 11 at 4:26
  • 1
    @LarsBosteen same here - what you have to do is install stylus in the link J... gave. Then open that extension and copy this stylesheet into the extension. A userscript manager wouldn't work unfortunately. – 10 Rep May 11 at 15:50
  • To make this work on Linux, change --ff-mono: Consolas, "Ubuntu Mono"; – rustyx May 25 at 9:06
  • Chrome extension to revert fonts (and other changes): chrome.google.com/webstore/detail/revert-stackexchange-form/… – Prid Jul 12 at 18:01
47

Update: If you encounter this error in Chrome, turning on the "Use hardware acceleration when available" setting should solve this issue.

Code blocks in deleted posts are practically unreadable on Windows 10 (Chrome, 200% DPI).

enter image description here

13
  • 23
    That is really worse. – Luuklag May 11 at 12:22
  • 3
    Well this most definitely is not supposed to happen. What in the world is going on here? Can you tell me what font that's rendering in? Browser? Looks like Windows of course but something has gone off the rails here. – Aaron Shekey May 12 at 16:53
  • 1
    @AaronShekey The font seems to be Cascadia Mono. Windows 10.0.19042.928, Chrome 90.0.4430.212 – Jonathan Potter May 12 at 21:06
  • 1
    What are your clear type settings? Do you have Windows Terminal installed, or did you install Cascadia Mono directly? – Aaron Shekey May 13 at 17:52
  • @AaronShekey Yes I have the Windows Terminal Preview installed. I don't remember installing Cascadia Mono separately. ClearType is turned on. – Jonathan Potter May 13 at 19:17
  • 2
    I'm really struggling to reproduce this issue. Anyone else got any repro steps here? – Aaron Shekey May 13 at 21:07
  • 1
    @AaronShekey It doesn't do it in Edge so it seems like something specific to Chrome. I have verified that it does it in an Incognito window as well which suggests it's not related to any extensions I have installed. It's probably some particular Chrome setting, but how to tell which one? – Jonathan Potter May 14 at 0:37
  • 1
    @JonathanPotter Have you tried toggling the "Use hardware acceleration when available" setting? – Chris O May 16 at 1:44
  • 2
    @ChrisO Bingo! This was turned off; turning it on fixes the problem. I guess this makes it a Chrome bug rather than an issue with SO's font usage. – Jonathan Potter May 17 at 3:22
  • 3
    @JonathanPotter Glad to see the problem fixed. Turning HW acceleration ON or OFF sometimes fixes (or causes) strange errors with the various browsers, at least on Windows, which is my main experience these days. Could definitely be a Chrome bug, or Chrome is just doing something unusual that exposes a bug/quirk in DirectX or the display driver. Sometimes updating Windows or the display driver can fix these issues (or cause others ;- ) not that I'm jaded). <== That's a lie, I'm totally jaded, why the Bleep does MS think HW acceleration is beneficial for rendering fonts? </rant> – Chris O May 17 at 17:05
  • 1
    Oh I am so glad y'all figured this one out. This one had me absolutely stumped. – Aaron Shekey May 17 at 19:59
  • 1
    Ahhah, that looks like Turbo Pascal under MS-DOS we've used at school!... =D Sorry for laughing at your problem, but this made my day... – EvgenKo423 May 18 at 10:41
  • Turning off "Use hardware acceleration when available" is not a good solution... HW acceleration speeds up rendering considerably by offloading tasks like scrolling, scaling, blending, as well as all SVG and canvas rendering, to the GPU. The issue is that Segoe UI is a crappy font to begin with. Before the change SO used Arial on Windows, and that one obviously worked perfectly, also with HW acceleration on. – rustyx May 18 at 16:43
45

I currently use SE on multiple devices, with multiple OS' (Windows, Mac OS, Android). Personally I would prefer a uniform site on all these devices, also as not to break my muscle memory (seeing that text will change in length buttons will inadvertently shift in the layout).

I know that you decided different, which is a great option for users using a single device. But at the same time SE also has the history of being highly customizable using one's profile. It would be great to have such a setting for the font as well. That way we can override the system font with a font of our picking. This would also be a great feature for those that have less then perfect eyesight and want to use a more accesible font.

5
  • 1
    Whilst certainlyna solution fornthe more tech-savvy users I think a profile option would be far more user friendly. But this is indeed very much a "nice-to-have". @ColleenV – Luuklag May 7 at 15:56
  • 4
    @ColleenV The problem with using the browser's settings to override the fonts is that it is universal. Without getting into user scripts and other super-tech tricks, either the users accepts ugly fonts on some some sites so they can see beautiful sites when they visit them, or they pick a fixed set of fonts for everything and never see the beauty the Web has to offer. Why shouldn't SE strive to be part of the "beauty" rather than encourage users to override your choices? – Chindraba May 8 at 5:30
  • "But at the same time SE also has the history of being highly customizable using one's profile." i mean.... has it though? all we can do there is hide a few ads. Adblock is far more effective. – Kevin B May 10 at 18:16
  • @user400654 See meta.stackexchange.com/users/preferences/me – Luuklag May 10 at 22:11
  • Oh, right, they let us disable a few of their other mistakes – Kevin B May 10 at 22:15
37

I see a lot of people are upset about the change, particularly Windows folks. Who would've thought Microsoft's Segoe is not a great typeface... :)

My question to the team is: Why not simply this?

@ff-sans: sans-serif;
@ff-serif: serif;
@ff-mono: monospace;

Browsers allow everyone to easily set their preferred default, serif, sans-serif, and monospace fonts directly in the settings. It allows them to render text in every supported language using the most appropriate and readable font. Users with dyslexia can pick fonts that help them read, without having to install extensions.

On Windows, people may be used to Arial because, at least in Firefox, Arial is in fact the default sans-serif font.

If you truly want everyone to have a fast, coherent user experience appropriate for their device and needs, I think it makes more sense to use the standard font family specifiers. I'm not saying that Arial is better (IMO it's about as bad as Segoe), nor that every system has a great preset of default fonts (Windows sure doesn't), but if an experience consistent with the user's environment is what you're after, this is one sure way to get there.

2
  • 8
    I'm really glad that someone posted exactly the reply I was typing! I was just going to add the following points: - Most modern browsers will allow users to change their browser fonts independently of the system fonts, so, if you happen to hate your OS font, you can select your favourites instead; and - Wikipedia apparently uses this approach; since most discussions have revolved around GitHub vs. SO/SE, why not take a look at what Wikipedia did — a site which, in spite of everything, is still ranked at #13 (according to Wikipedia and Alexa), well above SO's #48... – Gwyneth Llewelyn May 16 at 0:22
  • This is going to be devastating on several Linux distros with at least some browsers (e.g. Firefox) where the default Sans(/Serif) font is DejaVu Sans(/Serif), which is about 20% larger than normal. There are specific reason on why system font stacks are used on most "big" (and small) websites, a few are already discussed by OP. – Andrea Lazzarotto May 27 at 16:08
33

Could you pretty-please not hardcode any of the following CSS selectors with the new font-family and actually use the --ff-* CSS variables without !important everywhere like you promised? Thanks.

Compiled from https://cdn.sstatic.net/Sites/stackoverflow/primary.css:

  • code
  • pre
  • textarea.wmd-input,textarea#wmd-input
  • .topbar-dialog
  • .topbar-dialog .header h3
  • .topbar-dialog .header h3 a
  • .topbar-dialog .modal-content .message-text h4
  • .topbar-dialog .pinned-site-editor-container .remove-pinned-site-link a
  • .top-bar
  • #user-menu
  • .full-diff .content

hardcoded font-family in .topbar-dialog CSS class

10
  • Now my userstyle is just as bloated as SE's hardcoded selectors :( – iBug says Reinstate Monica May 10 at 18:09
  • There's even more than just the ones that I listed, but they target close icons so I didn't feel as strongly about including them. – Patrick Roberts May 10 at 18:11
  • 2
    As you can imagine, we have a lot of legacy CSS that is way over-specified. More and more of our app will rely on the --ff variable as we continually refactor. – Aaron Shekey May 10 at 21:33
  • 35
    @AaronShekey maybe refactor first, instead of pushing out a half finished product? – Steven Penny May 10 at 22:41
  • 5
    @StevenPenny lol working on it! – Aaron Shekey May 10 at 22:44
  • 16
    I'm shocked. I just did a simple search on the two main CSS files and found 3,260 uses of !important. All included in only 5,638 rules; better than one !important for two rules. To me that seems like a major code smell. Refactoring might be too late. Perhaps it'd be faster to rebuild from scratch with a solid design concept at the root. – Chindraba May 11 at 5:58
  • 7
    @AaronShekey I came here to express my frustration at how hard it is to use Unix & Linux on my Arch system since the font change. But having seen the completely professional way you've dealt with some, ehm, less than politely phrased criticism here, even cheerfully responding to Steven's needlessly snarky comment, all I want to say is "wow, thanks for being such a good sport!" (OK, and others have made my whiny points for me already, so I can stay on my high horse and enjoy the view). – terdon May 12 at 16:32
  • 2
    @Chindraba I know that feel, trust me. – Aaron Shekey May 12 at 16:55
  • @AaronShekey The "main" site stackexchange.com is still not using CSS var() for fonts. There's an extra font-family on html, body that bypasses the variables. – iBug says Reinstate Monica May 13 at 18:14
  • 1
    @iBugsaysReinstateMonica stackexchange.com isn't fully powered by our front-end library Stacks, if you can believe it. Hardcoded for now. It'll take some doing to point it to our single source of truth. 😞 – Aaron Shekey May 13 at 18:20
29

The highlight surrounding OP's username in a comment overlays parts of the comment's text.

Example in dark-mode

Example in light mode

Windows, Chrome 64-bit

4
  • 4
    Yeah... in the second scenario it could've been "aqqresive"... you really can't see it. – Tech Expert Wizard May 10 at 22:39
  • I'm seeing this effect with code (due to the grey highlighting) in comments as well (Firefox on Ubuntu with Cascadia font) – Zanna May 11 at 7:07
  • Line height is just extremely improper for this kind of stuff. Not to mention reading longer texts.. – Andrey Popov May 13 at 15:35
  • 2
    This should be improved now. – Aaron Shekey May 13 at 17:52
28

I guess someone must really hate me.

Bad kerning Roboto font

This is Firefox ESR 78 on Debian picking Roboto. A font badly hinted and even worse kerned, at this DPI at least. And I think I liked the look of Arimo more anyway… (My actual UI font is Noto Sans Display SemiCondensed, which looks better, but I still wouldn’t want it here. I never bothered installing Ubuntu fonts.)

6
24

Could you increase the default font size of Ubuntu Mono?

This font is known to display about 2 points smaller than most other monospace fonts (as commented on here, and discussed further here). It would be great is SE accounted for this and increased the size with 2 points instead of the current setting which makes monospace text on the Linux version of SE is harder to read because it is so small.

Yes, it is possible to change all font sizes in your browser settings, but the issue here is specific to Ubuntu Mono and there is no way to control that from your browser settings (and the default SE UI should be made accessible on all platforms).

Here is an example of how small the font is when writing this post (compare to the rendered version):

enter image description here

On SO it appears even smaller and it is quite difficult to read without squinting which makes for a less than ideal user experience.

enter image description here

6
  • 3
    The font-size for normal text is okayish (imho a little bit too big), but the font-size for code is too small. Direct comparison of the new vs the old font: imgur.com/a/0mzGzyq – Andreas May 10 at 17:58
  • 2
    Also in Zanna's answer. – P.Mort. - forgot Clay Shirky_q May 10 at 20:40
  • 3
    This would help, but Ubuntu mono isn't just too small imho, it's really too narrow. Characters like / look really uncomfortable – Zanna May 11 at 2:33
  • 1
    Updated the original post to consider dropping Ubuntu as a font entirely. It's being considered in this Stacks pull request. – Aaron Shekey May 12 at 17:19
  • Thanks for listening to our feedback @AaronShekey, really appreciate it! Personally I only have a problem with the size and I really like Ubuntu Mono when it is bumped up two sizes (this is what I run on my local terminals), but I understand that there might be other issues raised here and I am happy with any solution that makes the code chunks easier to read, thanks again! – joelostblom May 13 at 0:31
  • 3
    Ok, we're off of Ubuntu Mono. It was a worthy endeavor, but for now, we've spec'd Liberation Sans and Liberation Mono. If you don't have those (Chrome installs them), you'll get whatever your browser chooses for sans-serif and monospace. Most likely DejaVu ✌️ – Aaron Shekey May 17 at 20:03
23

I don't understand why you used the system-ui font for the default, instead of sans-serif. That font is not adjustable, and you are stuck with whatever horror the underlying OS chooses.

On Windows I also have some options to adjust rendering of the standard UI (ClearType), to make it more readable, but browsers use their own settings.

I don't know about other browsers, but Chrome allows customizing fonts that will be used for sans-serif, serif...

An additional issue is font size. On older Windows, the default font size was 8 points, but with introduction of Segoe UI that size changed to 9 points, because Segoe UI is harder to read on smaller sizes.

I don't have an issue with larger fonts that also use darker color, but small fonts with low contrast are impossible to read.

If you don't want to switch to sans-serif then at least increase the size and contrast of the smallest fonts - like in tags and also increase their contrast.


Using user scripts is simply not an option for the vast majority of users.

1
22

Custom Fonts User Script: Revert or Improve the Font Updates

(Stack Apps)

For those of you who prefered the old appearance, or would like a different font to appear in code blocks or across the site as a whole, Custom Fonts is a user script I wrote this morning to allow just that.

Features

Custom Fonts allows rules to be set for different sites, which can specify a sans serif, serif, and monospace font. A default can also be specified, allowing you to choose between sans serif and serif for any site.

Custom Fonts initially doesn't change anything (unless you download one with a preset), but on lines 26 and 27 are rules that revert all of Stack Exchange to its original fonts (once un-commented). Custom rules can be written, and there is a short reference in the comments under the Rules object.

Download

Custom Fonts is a user script, meaning that it requires Greasemonkey (Firefox or browsers that support Firefox extensions) or Tampermonkey (Chrome or browsers that support Chrome extensions) to be installed.

Custom Fonts 1.2.4

Custom Fonts 1.2.4, with original fonts

Custom Fonts 1.2.4, with Roboto + Roboto Mono

7
  • The script isn't working for stackexchange.com. – DavidPostill May 14 at 20:51
  • @DavidPostill Interestingly, it seems the script is running, but the site just doesn't use the --ff-sans variable there. That means the problem will exist for any of the scripts and userstyles currently available I think :/ – Redwolf Programs May 14 at 21:49
  • It's very annoying :) Everything else looks amazing. Great script! – DavidPostill May 14 at 22:03
  • @DavidPostill Now that I noticed that it's annoying and I needed to clean up some minor bugs anyway, so I fixed it :p – Redwolf Programs May 14 at 22:31
  • Thank you so much! – DavidPostill May 14 at 22:34
  • 1
    I think the 'main' stack exchange site... ironically... might not be on stacks yet. – Journeyman Geek May 15 at 5:44
  • Chrome extension to revert fonts (and other changes): chrome.google.com/webstore/detail/revert-stackexchange-form/… – Prid Jul 12 at 18:03
22

Can you consider adding "Segoe UI Variable Text" before "Segoe UI" in the font stack for Windows?

Microsoft will gradually update Windows UI with this new font in the future: Announcing Windows 10 Insider Preview Build 21376 | Windows Insider Blog

We are introducing Segoe UI Variable which includes an optical axis so that font outlines can scale seamlessly from small to larger display sizes. Segoe UI Variable is a refreshed take on the classic Segoe, now with improved legibility at small sizes, and much improved outlines at display sizes.

Historically, fonts for printing small text were designed differently than fonts designed for large display text. Segoe UI was originally designed to work at 9pt, which makes it a great font for that size, but limits expression at large sizes and lacks legibility at even smaller sizes. Segoe UI Variable solves this by using a new version of Segoe that uses variable font technology to dynamically offer great legibility at very small sizes, and style at large sizes.

Segoe UI:

Segoe UI Variable:

7
  • Addressing your edit: AFAICT, the font name is just "Segoe UI Variable". It contains neither the word "Text" nor "Display". – 41686d6564 May 7 at 12:36
  • 1
    @41686d6564 there are multiple fonts in "Segoe UI Variable" family that's why I wrote the full name, but, yeah, maybe it's not relevant. – Swisstone May 7 at 12:42
  • Ah, I see...... – 41686d6564 May 7 at 12:44
  • 5
    I'll look into this, thanks for bringing it up @Swisstone. – Aaron Shekey May 7 at 14:19
  • @Swisstone What's the CSS name for Segoe UI Variable, is it just "Segoe UI Variable"? I'll have to opt into early releases to test this properly. – Aaron Shekey May 10 at 21:34
  • @Aaron Shekey: It's "Segoe UI Variable". It is a separate family from Segoe UI. – BoltClock's a Unicorn May 11 at 10:55
  • @AaronShekey well, the "Font Family" in Windows is "Segoe UI Variable", but, with CSS this is not recognized. I had to append one of the font's styles ("Display", "Small" or "Text") I chose "Segoe UI Variable Text" in my example but I can't tell if this is how it's supposed to work. – Swisstone May 11 at 21:03
17

We shouldn't assume that system-ui corresponds to Segoe UI font on Windows.

For example, if your system language is set to Simplified Chinese, the default font would be Microsoft YaHei UI; if the language is set to Japanese, the default font would be Meiryo UI. And both of these fonts look unbalanced when displaying Latin characters.

The worst part is that the system default font cannot be changed without completely messing up all the localized texts in the system.

Here's a comparison between old Arial font (right) and new system-ui (left) which is Microsoft YaHei UI on my PC:comparison between fonts

So I suggest to place "Segoe UI" before system-ui or really anything that can ensure that it never falls back to system-ui on Windows.

10
  • 6
    Got it! I was using Firefox for testing, mostly, and it seems there's a discrepancy between it and Chrome. I switched my Windows machine's language to Simplified Chinese and everything's rendering in Segoe UI with or without system-ui in Firefox. Chrome shows Microsoft YaHei UI, which doesn't seem to be the worst thing, given we're trying to show system fonts. I'll bail on system-ui in the meantime. Also, very small sidenote: you can give this feedback without assuming I'm quite ignorant. 🤗 – Aaron Shekey May 10 at 20:58
  • 4
    Now... how do I get back to English lololol 😛 – Aaron Shekey May 10 at 21:35
  • cough windows sandbox cough – Journeyman Geek May 10 at 23:08
  • @JourneymanGeek cough Would you mind sharing how to make Windows Sandbox run in another language? – convex May 11 at 0:41
  • Ah snap. I figured you could set the system-ui font for testing but I guess not. My bad. I'll take some cough drops now ._. – Journeyman Geek May 11 at 1:23
  • 6
    Please stop coughing, there's a pandemic! – Aaron Shekey May 11 at 17:14
  • The proposed change to drop system-ui is in this Stacks pull request that'll likely merge. I've updated my main post to include your feedback here. Any additional thoughts? – Aaron Shekey May 12 at 17:10
  • I believe Microsoft YaHei UI is backed by Segoe UI for Latin (and other western) scripts. MS YH UI is an Asian font family that does nothing special to Latin etc. – iBug says Reinstate Monica May 13 at 18:03
  • @iBugsaysReinstateMonica comparison between the two fonts on webfont-test.com – convex May 13 at 18:45
  • 1
    We've dropped system-ui as of update 3, so I think this should be addressed. – Aaron Shekey May 17 at 20:05
16

Ubuntu 20.04 / Chrome / Stack Overflow - The new font and font-size makes it harder to read both plain text and code.

Why is the text in the new code blocks so tiny?

Before

(with a user-script to get the old darker background in code blocks and spacing between lines)

Enter image description here

After:

(with all user-scripts disabled)

Enter image description here

14
  • 3
    Even disregarding size, longer text is quite difficult to read in the new font. – Emil Jeřábek May 11 at 6:10
  • 4
    FWIW a review of the font on designbombs.com/best-google-fonts-how-to-use-them: "Ubuntu is the default font used in the popular Linux-based operating system of the same name. This font is a great choice for titles and headings, especially for blogs and magazine. But it’s not a good choice for body text." (emphasis mine). – Marijn May 12 at 8:50
  • 2
    @Marijn Thanks! What I feel is really odd is that SE made a special effort for Ubuntu and yet, using nothing but the default settings, it looks terrible. The combination of using Ubuntu 20.04 and Chrome on Stack Overflow surely can't be that unusual. I described my poor eyesight in my Request for a possibility to adjust the spacing between lines and this is a second blow in a very short time. I now get tired in my eyes really fast compared to just a few days ago... :-( – Ted Lyngmo May 12 at 15:30
  • 2
    It looks even worse on my Arch. Code is almost illegible. I don't understand why they wanted to break something that has been working perfectly well for years. – terdon May 12 at 16:16
  • 1
    Considering dropping Ubuntu as a font entirely in this Stacks PR. What'cha think? – Aaron Shekey May 12 at 17:08
  • @AaronShekey That sounds promising. I'm not sure how to use the deploy preview tool though. Can I use it to put a before and after rendering of the pages next to each other? – Ted Lyngmo May 12 at 17:18
  • 1
    @TedLyngmo Load up a page like this from prod (before), and this one from staging (after) – Aaron Shekey May 12 at 17:26
  • @AaronShekey Thanks! I will try it at work where I have the unfortunate combo mentioned in the post. Can the same tool be used to actually use SO with my preferred settings (which is what my first post about spacing between lines was about)? – Ted Lyngmo May 12 at 17:40
  • 1
    @AaronShekey thanks for taking the feedback into account. I would be in favor of dropping the Ubuntu font. It is rather wide so the question list has a lot more line breaks now. And code is tiny. I guess it is more a UI font than a text font. – Marijn May 12 at 18:21
  • @AaronShekey I've now had a look and to me, the staging version is absolutely much better for code blocks. – Ted Lyngmo May 17 at 6:27
  • 2
    Ok, we're back to Liberation Sans and Liberation Mono on most Linux distros. But Linux is Linux, and who knows what font pack you installed (and forgot about) sometime in 2018. 😛 – Aaron Shekey May 17 at 20:06
  • 1
    @AaronShekey Great! Can't wait to see how this looks in Ubuntu / Chrome. I just noticed that the font became very large in code blocks when using Windows / Chrome @ Stack Overflow. It should suit my bad eyes - but now very few characters fit horizontally. /Ted - Never happy :-) – Ted Lyngmo May 17 at 20:07
  • 2
    Example: Code in old posts, carefully crafted to not go outside of the visual area of the code blocks, now does. Having to scroll horizontally when reading code isn't nice. – Ted Lyngmo May 17 at 20:15
  • @AaronShekey It looks better in Ubuntu / Chrome again (I have a rather fresh installation with no extra font packs installed) - but not as good as it did before the extra spacing between lines was introduced. – Ted Lyngmo May 18 at 6:13
15

Please bring back the old line-height 1.3 setting

I find new fonts (I'm on Windows, so Segoe UI) look even worse with the current settings. It's more comfortable to read with thinner fonts at more compact line heights.

Screenshot for current (1.5):

LH 1.5

Screenshot for line-height: 1.3

LH 1.3

8
  • 25
    Just to offer an opposing point of view, I find your 1.5x line-height screenshot more readable. 1.3x looks cramped. And to put this statement into context: I am hawkish about not wasting vertical space for code readability, and I consciously broke my University’s rule when submitting my PhD thesis because I refused to adhere to their overly large line spacing requirements. So I’m certainly not biased towards large line spacing. – Konrad Rudolph May 7 at 8:40
  • 1
    (And if we’re bikeshedding, I’d prefer a slightly tighter spacing than 1.5 with the specific typeface and line length in the screenshots. But I’d also prefer properly typeset, justified paragraphs and no modern browser can do this properly so it’s not happening.) – Konrad Rudolph May 7 at 8:53
  • 3
    I agree with you, but unfortunately I believe this won't happen. SE simply ignored the request you linked (despite all the upvotes) and did whatever they wanted to do, regardless of what the community said. A middle term was also suggested (put that in preferences and let everybody chooses whatever line height they want), but even that was completely ignored. All the recent design changes was unilaterally made, ignoring any community's feedback. Therefore, the only alternative that's left to us are userscripts (mine is called "fix crap layout", BTW) – hkotsubo May 7 at 20:02
  • 5
    I personally prefer the larger line heights. Also reduces line height unevenness when there is tag-markup in post text, as that requires more vertical space. – Sonic the Anonymous Hedgehog May 9 at 3:39
  • 7
    @hkotsubo Saying that SO ignored the request is flat out false. In fact, the new design used a 1.6x spacing and in response to the request SE changed the spacing to 1.5x (and changed it further for monospaced fonts to make box art work). Maybe you’re still not happy with that but it’s unfair and unnecessary to lie about SO responding to the request. – Konrad Rudolph May 10 at 8:31
  • 1
    @KonradRudolph Let's see: they changed to 1.6, people complained and asked to revert back to 1.3, they changed to not-so-terrible-but-still-bad 1.5 - perhaps they didn't "ignore", but didn't listen anyway, doing something they thought it could be a solution (but it's not what was requested). So let's just say they partially ignored (just pretended to listen the community, but in the end kept their decision to increase line height). But that's just for line height, because in the case of blockquotes, they completely ignored the request to revert the change. – hkotsubo May 10 at 12:28
  • 2
    @KonradRudolph Fair enough, but what about all the people who upvoted the request to revert back to 1.3? Or the suggestions to put this in user preferences (which would make everyone happy)? Anyway, it's pointless to continue discussing it, as SE probably won't change this, and keep doing whatever they want (I wonder if community feedback still matters, because based on the last changes, it seems that it doesn't). Anyway, I'll just keep using my userscripts (not the ideal solution, but still better than relying on SE's design decisions) – hkotsubo May 10 at 12:43
  • 2
    @hkotsubo those were meta users, the only users opinions' who matter are those who get "randomly" picked in the surveys on SO main. – Kevin B May 12 at 19:22
14

OMG, MY EYES !!!


The new MacOS fonts are very "slim" and they are very hard to read when the color is not black (eg: blueish or grayish).

Please, consider reverting this change until more research is being done and more issues are fixed.


Updating to system font would have been totally normal move, IF:

  • those fonts would have been readable.

The font (as of Thu, May 13th) is abysmal on MacOS (usually the OS that designers use), and there is no reason to expect them being any better on other platforms.

Especially painful:

  • linked posts on the right sidebar: enter image description here

  • comments: enter image description here

  • homepage: enter image description here

3
  • 1
    This is related to macOS 11.3's treatment of font smoothing, or the lack thereof. Prior to 11.3, you could change this at the OS-level, but now you can't. I've made the choice in our library to remove the super thick font-smoothing, but can revisit this choice. Half of y'all will hate it. Half will love it. Super tricky now that the user can't choose at the OS-level. – Aaron Shekey May 13 at 19:15
  • 1
    how are your eyes doing now after this third update? – Aaron Shekey May 17 at 20:07
  • much better, thanks ! – c69 May 19 at 15:52
13

A bit of a crosspost -

A recent change in the 'design' of Cascadia Code mono has rendered italic fonts to look cursive. When composing a post - the text area is in monospace. Specifically - when composing a post in the teams or "alpha" editor - using italics will result in text looking like this:

Enter image description here

The font used for monospace italics on Teams (when composing a post in Markdown mode) are a little hard to read. It might be my dyslexia but, the r, f,l and s are... indistinct and significantly harder to read than the fonts used elsewhere. I'm *reasonably* certain, as someone who abuses italics for effect that this change happened *after* an update on the *OS* end - which might be an issue with using a font that seems to be in development, and I suspect an unintended, and unexpected change.

Regular Monospace looks fine:

Enter image description here

Interestingly, the 'regular' editor doesn't have this issue since it doesn't show styles inline. It also apparently affects italic monospace in comments.

I'm on Windows 10 (build 19043) and am running Vivaldi 3.8 (while unsupported, it's another Blink/Chrome-based browser). I suspect, but I am unsure if the May "Feature update to Windows 10, version 21H1" might have triggered this change.

12

Have you considered harmonizing fonts used for MathJax and prose?

SE sites dedicated to natural science such as Chemistry.SE, Physics.SE and 40 other sites heavily rely on MathJax for written communication. There always has been a font family mismatch between the typeface used for mathematics and plain text. For example, on Chemistry.SE we deal with two fonts (MathJax TeX and Georgia) that simply look awful used together, not to mention Georgia is overall a poor choice of font for technical writing. We even had a brief discussion on this matter: Should chem.SE use Georgia font?

None of the aforementioned system fonts would look balanced together with MathJax at this point, and the sans fonts will be alienated from the default MathJax TeX font to the point the posts will look terrible typographically.

I realize it's a long-standing issue that cannot be immediately solved, and MathJax is a Ding an sich which doesn't help much. However, please consider the proposition of keeping both font families harmonized, or at least looking remotely similar.

One suggestion (albeit quite a bold one) would be to switch MathJax 2.7's default font to STIX General for the sites using MathJax, and list STIX as the primary font in ff-serif field. STIX is an open-source serif font beloved by many scientists for its canonical appearance and wide variety of glyphs for special characters readily available.

12

Here's a userstyle I threw together that should fix both sans-serif and monospace. It also fixes hardcoded fonts within textareas and codeblocks that don't use the font variables for some reason. This should work in both Stylus (tested) and Stylish (untested).

@-moz-document domain("stackoverflow.com"), domain("stackexchange.com"), domain("askubuntu.com"), domain("superuser.com"), domain("serverfault.com"), domain("stackapps.com"),
domain("mathoverflow.net") {
body {
    --ff-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --ff-mono: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}

code, .s-prose code, pre.s-code-block, textarea.wmd-input, textarea#wmd-input, .full-diff .content {
    font-family: var(--ff-mono);
}

.top-bar, .topbar-dialog, #user-menu, .topbar-dialog .header h3 a, .topbar-dialog .pinned-site-editor-container .remove-pinned-site-link a, .topbar-dialog .modal-content .message-text h4 {
    font-family: var(--ff-sans) !important;
}
}

https://gist.github.com/SuperStormer/60a5e5c7e9549e9ed865a579df6f11be

5
  • Can it be put right into Firefox userContent.css, without any extension? – raj May 10 at 19:37
  • It should work, though I haven't tested it. – SuperStormer May 10 at 19:38
  • 2
    I needed to add !important at the end of each style declaration to make it work in userContent.css. Thanks! – raj May 10 at 19:44
  • I also changed the font in the top bar of the site back to sans-serif by adding: .top-bar, .topbar-dialog { font-family: var(--ff-sans) !important; } – raj May 10 at 20:07
  • Great, works in stylebot too :) You saved my day :) – Arvo May 11 at 11:11
10

Ubuntu font is great for titles and fine for body text; on the whole it's a really nice improvement. BUT the code blocks are harder to read and don't look good. Ubuntu mono is too narrow.

code block in Ubuntu mono, so narrow it looks like Ubuntu font


A nice workaround for this was suggested to me by Eliah Kagan - one can install the free-as-in-freedom Cascadia font which is higher in the stack.

I did sudo apt install fonts-cascadia-code on Lubuntu 20.04 - see the repo if your distribution/version hasn't packaged it.

Cascadia is much more readable to me than Ubuntu mono and looks a lot better than the monospace fonts from the old stack as well imho.

Cascadia

10
  • 4
    Another solution is to increase the size of Ubuntu Mono on SE. I posted another answer around the same time with that suggestion and a couple of links talking about how Ubuntu Mono is known to be ~2 points smaller than many other fonts meta.stackexchange.com/a/364275/338301 – joelostblom May 10 at 17:43
  • @joelostblom yeah that would be slightly better, +1 – Zanna May 10 at 17:44
  • Is Cascadia not available on 18.04? That package name doesn't exist for Bionic. – wjandrea May 10 at 21:19
  • 3
    @wjandrea Oh sorry... I think the font was only released in 2019, so that's not a big surprise. I'm on 20.04. Should be easy enough to get it from GitHub. – Zanna May 11 at 2:28
  • 1
    @Zanna I didn't want the hassle of installing the font, so I ended up installing this userscript to use monospace instead of ui-monospace etc. Thanks! – wjandrea May 11 at 19:49
  • 2
    Considering dropping Ubuntu as a font entirely in this Stacks pull request. There isn't a clean way of getting around Ubuntu Mono being so small 😞 – Aaron Shekey May 12 at 17:12
  • 1
    @AaronShekey Just wanna say I have massive respect for the patience you have shown on this entire page. I love the initiative to update the fonts. You are doing an awesome job. – Zanna May 12 at 17:28
  • 3
    Thank you, @Zanna, I really appreciate it. It's really tough balancing what I think is the right path forward for our front-end and the opinions of users who care deeply about the site. – Aaron Shekey May 12 at 17:30
  • 1
    @AaronShekey Am I correct that dropping the Ubuntu font and dropping Ubuntu Mono are separate solutions, intended to fix separate problems? They're different fonts, after all, and personally I like the Ubuntu font as it appears on Ask Ubuntu (but I dislike Ubuntu Mono there, for the reasons Zanna described). I'm not objecting to dropping the Ubuntu font if it's causing problems for a lot of people, but dropping both fonts, if it's due to a problem specific to Ubuntu Mono, wouldn't make much sense to me. – Eliah Kagan May 12 at 18:08
  • 1
    Yeah the site looks wonderful in Ubuntu font to me 👌 Users of other Linuxes seem to be getting old clunky fonts - maybe put something in the stack for them after Ubuntu font? – Zanna May 12 at 18:18
10

The new fonts are grim on Mac Safari + Chrome - really terrible.

Sorry - but the system UI font is just that: for my UI. Not for reading lots of text at speed. I can genuinely feel myself reading slower with the system UI font as compared to Arial.

Yes, I realise they're both sans serif, but the UI is more difficult to read than Arial, end of. Maybe it's the small inconsistencies in Arial that means it's easier for the eye to "grasp" the text; much like ragged-right and that weird dyslexic-friendly font are both easier than pretty much any other layout or font.

Basically - the more rounded / consistent the font is, the more difficult it is to read at speed. That's why serif is consistently quicker to read.

I'm not coming here to look at pretty text. I'm coming here to quickly get answers to stuff, and the speed at which I'm able to read the text is therefore very important.

(I am unable to comment on any of these as I don't have reputation on meta.)

9

The "Inbox" text at the top left of the inbox looks like a "Nbox" with a bold N on Windows/Chrome:

enter image description here

6
  • You should probably mention the platform. Here (Windows, Chrome), it looks "okay". – 41686d6564 May 10 at 16:52
  • @41686d6564 Corrected, thanks. – Ollie May 10 at 16:52
  • 1
    That's weird. It doesn't look like that for me. Perhaps it has to do with ClearType Text settings – 41686d6564 May 10 at 16:58
  • @41686d6564 Can you throw me a screenshot? – Ollie May 10 at 16:58
  • There. – 41686d6564 May 10 at 16:59
  • Maybe something to do with your screen/monitor? Because I'm using chrome and windows and it's fine for me. – 10 Rep May 10 at 17:01
8

Is this change fully verified if it applies to sites that use non-English languages?

Our site (So.ja) took seven years until the design bug due to font specification was fixed.

1
  • 7
    We were discussing this internally, and it looks like, yes, these font stacks work well in Japanese. If the community disagrees and we need to bail, we can always specify the existing Arial on a per-community basis. In theory, moving to system fonts should give us more international characters, not less. – Aaron Shekey May 6 at 15:49
7

I'm not 100% sure, but I think the update caused the blue badges on the profile page tabs not to be centered vertically anymore:

enter image description here

(Firefox, macOS)

Here is an example how it looked like:

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .