hyper: Non-retina text rendering is bad

There’s a rule, presumably down in Electron, that is setting -webkit-font-smoothing: antialiased for x-screen. Perhaps I’m extra sensitive to this, but this looks absolutely terrible on non-retina screens. When I toggle that rule in the inspector everything looks great. Personally I think that also looks better on a retina screen. It might be worth considering enforcing subpixel-antialiasing (IMO always, but could be on a media query for < 2 pixel density), or eventually some setting even.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 16
Comments: 17 (6 by maintainers)

Commits related to this issue

Minor fix on string #51 — committed to kant/hyper by kant 5 years ago
Minor fix on string #51 (#3490) — committed to vercel/hyper by kant 5 years ago

Most upvoted comments

In case anybody else comes across this and it’s not “fixed” the way you want, you can use ~/.hyperterm.js to override.

    termCSS: `
      x-screen {
        -webkit-font-smoothing: subpixel-antialiased !important;
      }
    `,

+76

zpao on Jul 15, 2016

To edit the font smoothing setting at application-level and not system-wide, here’s the trick:

defaults write co.zeit.hyper CGFontRenderingFontSmoothingDisabled 0
defaults write co.zeit.hyper.helper CGFontRenderingFontSmoothingDisabled 0
defaults write co.zeit.hyper.helper.EH CGFontRenderingFontSmoothingDisabled 0
defaults write co.zeit.hyper.helper.NP CGFontRenderingFontSmoothingDisabled 0

+28

rmnbrd on Jul 2, 2019

Hey all. I noticed this same issue at work today after customizing the fonts in my hyperterm config. My fonts looked great on my laptop’s retina display, but looked kinda 💩 on my external monitor. I played around in the devtools and can confirm the above fix worked out for me.

Anyway, here’s a theme I made that adds subpixel-antialiased font smoothing: https://github.com/ali/hyper-font-smoothing

Edit (10/23) renamed package to hyper-font-smoothing from ~~hyperterm-subpixel-antialiased~~

ali on Oct 23, 2016

People without retina displays will have to use this package: https://github.com/ali/hyperterm-subpixel-antialiased

leo on Sep 15, 2016

@kompot

-webkit-font-smoothing: subpixel-antialiased !important; hack does not seem to work on Hyper 2.

Setting body { -webkit-backface-visibility: unset; } seems to do the trick for me.

The backface-visibility change was added in #1602 to work around some cases where Blink would enable/disable subpixel antialiasing due to animations (#1490). Unfortunately, it does this is by breaking subpixel antialiasing.

bgw on Dec 4, 2017

Hyper 2 uses https://github.com/xtermjs/xterm.js instead of hterm like we did previously. @kompot I’d recommend you to go over there and search through the issues 👍

🚨warning in the upcoming 3.0 release of xterm, they’re changing from DOM-based representation to rendering with webgl/canvas, don’t know how font smoothing is handled in there. Hyper will adopt it in the future when it’s released. I think VS Code is already testing this code so if you want to try how it will be in the future you could test it there.

albinekb on Nov 29, 2017

-webkit-font-smoothing: subpixel-antialiased !important; hack does not seem to work on Hyper 2.

Any suggestions?

kompot on Nov 29, 2017

None of the above things worked for me. Type this in the command line and reboot. This setting also stays between reboots.

defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

samishchandra on Nov 30, 2018

@johanbrook I agree. I’ve lost the “just use subpixel-antialiasing all the time” argument too many times though so I hedged my bets 😛

zpao on Jul 6, 2016

I actually think antialiasing looks bad on Retina too. Compare screens below.

skarmavbild 2016-07-06 kl 01 57 00

skarmavbild 2016-07-06 kl 01 57 07

The non antialiased one has clearer colours and more legible typography imo (might only be me). The antialiased text looks a bit weak: the black from the background sort of bleeds into the glyphs. Compare with iTerm:

johanbrook on Jul 6, 2016