3 ms·

> 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 fon

by sings 7y ago

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

jimbo1qaz 7y ago
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.
- jfk13 7y ago
  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.
  - Gankro 7y ago
    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.
floatboth 7y ago
> 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/ https://rsms.me/inter/ has a variable version
- sings 7y ago
  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.
ComputerGuru 7y ago
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.

by sings 7y ago

jimbo1qaz 7y ago

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.

jfk13 7y ago
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.
- Gankro 7y ago
  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.

floatboth 7y ago

> 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/ https://rsms.me/inter/ has a variable version

sings 7y ago
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.

ComputerGuru 7y ago

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.