Cap heights for the theme typeface in USWDS #1157
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| ), | ||
| "merriweather": ( | ||
| display-name: "Merriweather Web", | ||
| cap-height: 364px, |
There was a problem hiding this comment.
I couldn't find a way to only set the cap-height without adding the rest of the values for the typeface, copied from the uswds config defaults.
| 900: false, | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| $theme-type-scale-md: 8, | ||
| $theme-utility-breakpoints: ( | ||
| "mobile-lg": false, | ||
| "desktop": false | ||
| ), | ||
| $theme-font-type-sans: baseFontFamily, |
There was a problem hiding this comment.
@faustoperez I mapped sans to the base font family (e.g "Inter" in GHG Center's case). Could be adjusted as we need it.
dzole0311
requested review from
hanbyul-here,
faustoperez and
sandrahoang686
|
Thanks a lot for working on it 🙇 It is quite amount of setups just to disable the normalization of the font - I end up having this question if we need to get rid of this normalization at all (I know, I am sorry 😓 ) I think we started this work because we don't need this normalization - but it might be ok to have the normalization of the font? @faustoperez - What do you think? |
|
@hanbyul-here sounds good! I think we should pause the USWDS detailed decisions work (ie should we normalize the font sizes) until we have more clarity on the vision/template instance design (quite likely at the end of this week) |
|
@faustoperez @hanbyul-here thanks for the feedback. I'll close this PR and the related issue now, since now we have a working implementation and reference if we decide to remove the normalization again. |
Related Ticket: #1144
Description of Changes
USWDS normalizes font sizes across different typefaces to ensure optical consistency, but this feature isn't necessary for our current needs. Here we're trying to streamline the font sizes across all typefaces to ensure they have uniform sizing without normalization.
I found the function where USWDS normalizes the typefaces, which is based on the cap-height of each typeface. Since each typeface has a slightly different cap-height setting, I bypassed this by configuring the custom tokens that we need to use a fixed default cap-height of 364px.
To verify the changes, I tested with the following examples:
These previously would have been normalized differently, but now output the same
remvalue.Notes & Questions About Changes
{Add additonal notes and outstanding questions here related to changes in this pull request}
Validation / Testing
The example from the description can be used for testing