chore: compare fonts in /examples/fonts page

[julien-deramond]

Description

This PR compares the rendering of Helvetica, Helvetica Neue, Helvetica Neue Orange, Roboto, and Arial.

The default font family has been changed for the whole documentation to get rid of Helvetica Neue Orange to check the rendering on several devices.

Live previews

• https://deploy-preview-2215--boosted.netlify.app/docs/5.3/examples/fonts/ (comparison page)
• https://deploy-preview-2215--boosted.netlify.app (whole doc with the new font family rule)

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	52a33f7
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6512eda037166300085fff63
😎 Deploy Preview	https://deploy-preview-2215--boosted.netlify.app/docs/5.3/examples/fonts
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[julien-deramond]

Comments from @Franco-Riccitelli:

• Can you remove the dark red background and just have the fonts on black. We should see how the fonts look on background they will be used on the most.

For this one, let's add a toggle button to show/hide it since it can be useful to see the place taken by the font (surface).

• Could you also have a version of the fonts on white?

Maybe play with the color mode selector to have both.

• Could you include the font sizes and the letter spacing size next to the text that is being shown?
• I like the display of paragraphs of text in the different fonts and sizes (the text start "Typography is the art ..."), this is much more helpful to get an idea if the letter spacing is working rather that just one line of text. Would it be possible to have this text shown in the following font sizes: 20, 18, 16, 14.
• For the larger sizes, would it be possible to use a smaller sample of the text, for example, instead of the full paragraph, just use the following text: "Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed." This text should be displayed in the following sizes: 50, 40, 34 30, 24.
• Would it be possible to order the text samples on the page from the largest to the smallest.

[MewenLeHo]

More comments from @Franco-Riccitelli:

• What would be helpful is if you could change the display of the font sizes 50, 40, 34, 30, 24 to Bold. Fonts at these sizes would only be used in Bold.
• For the remaining sizes, 20, 18, 16, 14, keep these sizes in the Regular weight, but can you also show these sizes in Bold.

[julien-deramond]

@MewenLeHo Quick feedback, can't we use tooltips, popovers, or anything else to display "40px letter-spacing -1px", because it's more difficult to compare the renderings as it messes up the layouts and wrapping?

[MewenLeHo]

@MewenLeHo Quick feedback, can't we use tooltips, popovers, or anything else to display "40px letter-spacing -1px", because it's more difficult to compare the renderings as it messes up the layouts and wrapping?

Or maybe just display it in normal size rather than using same font size than the related example?