Hacker News Reader

Comment by sings | Hacker News Reader

> Synthetic bold: paint every glyph multiple times with a slight offset in your text-direction.

Designers forgetting to include a bold version of their web fonts is one of my biggest bug bears. It always stands out, especially on Safari on iOS as you zoom in and out.

View on HN

I think Chrome (PC/Android) implements synthetic bold by expanding the glyph outline, then drawing it with subpixel off. It's prettier than Firefox's "horizontal-only extrusion", but sometimes leads to funny artifacts at sharp corners.

How Firefox implements synthetic-bold varies across different platforms, actually, depending on the features of the (platform-specific) font rendering backend it's using. It uses the paint-multiple-times-with-a-small-offset approach when the font backend doesn't seem to offer a "better" synthetic-bold option.

Yeah the smearing approach is the only one that merits a callout from my position in the pipeline, because the other approaches are handled by your shaper or rasterizer, which are usually 3rd party libs that can be mostly regarded as black boxes.

> forgetting

Or rather deliberately not including to decrease download size.

Though OpenType variable fonts are a thing now. e.g. Inter https://rsms.me/inter/ has a variable version

Maybe deliberate, but I don’t think it’s a good idea. This is an optimisation where the user actually sees the artefact/degradation. And that font would otherwise be used over the whole session.

Excluding bold copy on the page or using system fonts in the design seem like better alternatives for saving bandwidth. Or appropriate use of the font-display property. Otherwise I see this as choosing custom fonts and only half implementing them for a design.

And variable fonts still need two sets of outlines to interpolate between glyph weights, so they may not completely answer the problem.

That’s not the worst for sure. Now not packing a proper italicized version leaving the text renderer to draw each glyph at an angle to make oblique text (which is the difference between oblique and italic) for a truly hideous result.

Reply on news.ycombinator.com