Introduce web typography presets

[jamesmockett]

What are you changing?

• Adds web typography presets and deprecates existing typography API.

Why?

• The design team have been using the typography presets in Figma for some time so this brings the code into alignment, and simplifies the process of translating between the two.
• This has also been an opportunity to clean up our existing typography code which is fairly complex and difficult to update.

Additional details

Each preset encapsulates a complete typographic style and is exported as a variable. Unlike the current API the presets have no options as there should be no need to override their styles. Values for individual properties such as weight and line height are also no longer provided for the same reason.

textSans.medium() → textSans17
textSans.medium({ fontWeight: 'bold' }) → textSansBold17
textSans.medium({ fontStyle: 'italic' }) → textSansItalic17
headline.xlarge({ fontWeight: 'light', fontStyle: 'italic' }) → headlineLightItalic50

Each preset is available as a CSS string and an object literal.

const h1 = css`
  ${headlineMedium50};
`;

const p = {
  ...textSans17Object,
};

export const headlineMedium50 = `
  font-family: "GH Guardian Headline", "Guardian Egyptian Web", Georgia, serif;
  font-size: 3.125rem;
  line-height: 1.15;
  font-weight: 500;
  font-style: normal;
  --source-text-decoration-thickness: 6px;
`;

export const textSans17Object = {
  fontFamily: 'GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
  fontSize: '1.0625rem',
  lineHeight: 1.3,
  fontWeight: 400,
  fontStyle: 'normal',
} as const;

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240409104240

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240409134123

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240410091047

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240410105416

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240410154643

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/source-foundations@0.0.0-canary-20240416115657

🐥