Hyper: Non-retina text rendering is bad

[zpao]

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.

[rauchg]

@zpao +1000. I've been seeing some screenshots from non-retina that have wanted to make me cry.

[johanbrook]

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

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:

[zpao]

@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]

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;
      }
    `,

[ali]

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

[leo]

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

[tuxracer]

Even on a retina display this default looks awful on macOS

[kompot]

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

Any suggestions?

[albinekb]

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.

[bgw]

@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.

[kompot]

Unfortunately doesn't seem to change much on macOS.

Here are three windows. Top is hyper, terminal.app in the middle, vs code on the bottom 3rd.
Hyper's font rendering produces thin and unpleasant lines ;( * i know some people prefer that, yes, but could not find a way to get rendering like in terminal.app or iTerm2 *

[hofm]

Same problem here, too. Looks fine on the built-in retina display of the MacBook; unusable with an external non-retina monitor. Any suggestions? (Top window: iTerm2 with use thin stokes for ani-aliased text set to Always, bottom window: Hyper)

[jq-87]

https://github.com/bgw/dotfiles/commit/25bb078f5154cbdf6e13333399d0da0591c9e665

This fix does not work for me. I am on version 2 on OSX 10.12.6

Anyone know of a fix?

[albinekb]

Can you try setting fontWeight to 100 or lighter, it should accept any valid css-font-weight value 👍

[samishchandra]

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

[TinyChief-zz]

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

Here is the actual problem explained: https://ahmadawais.com/fix-macos-mojave-font-rendering-issue/

Now fonts look smoother, but another problem appears after rebooting - gaps between glyphs:

[rmnbrd]

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