Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tweak typography and update webfonts #1955

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Conversation

nkuehn
Copy link
Collaborator

@nkuehn nkuehn commented Mar 24, 2024

Rainy weekend hobby fiddling: typography finetuning

Best way to compare is having current docs kit documentation side by side with the preview of this PR on a large monitor. Some screenshots below.

Topics that are rather fixes than changes:

  • updates inter font to v4 (fixes the weird letter spacing that occurred in some text situations)
  • updates roboto mono to variable font (allows arbitrary weights)
  • fix spacing and line heights in chat output

Changes that are visual differences (happy to tweak according to feedback, some is stylistic, some legibiliy oriented)

  • implements dynamic line height CSS that adjusts to font size matching the actual font (more consistent vs. previously overriding some elements that were too far off). Body text line height very slightly higher as a result.
  • reduces weight on the code font slightly to match the visual weight better to the body font
  • applies "balance" text wrapping to page title (aims at same length lines if the title wraps)
  • applies "pretty" text wrapping to any content (avoids single words in last line of a paragraph (chrome only)

Screenshot examples (left new, right existing)

general typography and lighter code font weight:

image

- updates inter font to v4 (fixes the weird letter spacing)
- updates roboto mono to variable font
(allows arbitrary weights)
- implements dynamic line height CSS that adjusts to font
size matching the actual font
(more consistent vs. previously overriding some
elements that were too far off).
Body text line height very slightly higher as a result.
- reduces weight on the code font slightly to match the
visual weight better to the body font
- applies "balance" text wrapping to page title
(aims at same length lines if the title wraps)
- applies "pretty" text wrapping to any content
(avoids single words in last line of a paragraph)
(chrome only)
- fix spacing and line heights in chat output
Copy link

changeset-bot bot commented Mar 24, 2024

⚠️ No Changeset found

Latest commit: be5cb85

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

github-actions bot commented Mar 24, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant