Add support for font-size-adjust into the font stack #271
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
font-size-adjust allows you to amend the perceived x-height of fallback fonts to match your original font. A specific use case for us would be getting foreign characters that are not in NTA to show up with matching metrics. For NTA the original x-heights are 0.5 for regular text and 0.525 for bold (this can be tested by adding a font-size-adjust to gov.uk and adjusting the property until no difference is seen when it’s toggled). Applying these values makes the fallback of Arial match NTA’s metrics. Current support is Firefox (and Chrome behind a flag).
|
Looks good to me 👍. Do you have equivalent screenshots for the bold variant? |
|
Oh yeah, knew I’d forgotten something. There’s actually no difference either way with the bold weight, but we need to include it in case the bold text is down the cascade from a NTA with Arial with Arial without |
|
👍 |
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-buyer-frontend
that referenced
this pull request
Jun 10, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-buyer-frontend
that referenced
this pull request
Jun 10, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-supplier-frontend
that referenced
this pull request
Jun 13, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-admin-frontend
that referenced
this pull request
Jun 13, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-supplier-frontend
that referenced
this pull request
Jun 15, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
tombye
added a commit
to Crown-Commercial-Service/digitalmarketplace-supplier-frontend
that referenced
this pull request
Jun 16, 2016
Chrome seems to be increasing the font slightly when `font-size-adjust` is set (which we have been doing since this change to the govuk frontend toollkit: alphagov/govuk_frontend_toolkit#271 The grid used for `.footer-meta` sets its columns to `display: inline-block' (to have more control over the vertical spacing) which can mean their horizontal spacing is effected by changes to how lines of content are rendered. It seems having `font-size-adjust` set is increasing the horizontal spacing of the line on which they sit, meaning they can no longer git on it.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
font-size-adjustallows you to amend the aspect value of fallback fonts to match your original font: https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop. A specific use case for us would be getting foreign characters that are not in NTA to show up with matching metrics.For NTA the original aspect ratios are 0.5 for regular text and 0.525 for bold (this can be tested by adding a
font-size-adjustto gov.uk and adjusting the property until no difference is seen when it’s toggled). Applying these values makes the fallback of Arial match NTA’s metrics.Current support is Firefox (and Chrome behind a flag). Testing shows minor changes, but it could be useful in certain situations, for example:
NTA (with or without
font-size-adjust):Arial with
font-size-adjust:Arial without
font-size-adjust: