Add typography presets #110

carolinan · 2024-08-23T08:08:27Z

Description
This PR adds the typography presets.
Partial for #22

Screenshots

Testing Instructions
Apply the PR.
Go to Appearance > Editor > Styles
Test every typography preset in the editor, save, and view the preset on the front.
Confirm if the typography matches the design.

typography-preset-1 Beiruti & Literata Figma
typography-preset-2 Volkorn & Fira Code Figma
typography-preset-3 Platypi & Ysabeau Office Figma
typography-preset-4 Roboto Slab & Manrope Figma
typography-preset-5 Literata & Ysabeau Office Figma
typography-preset-6 Platypi & Literata Figma
typography-preset-7 Literata & Fira Sans Figma

typo-presets.mp4

…and letter spacing.

github-actions · 2024-08-25T06:53:54Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: kafleg <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

carolinan · 2024-08-26T01:37:41Z

@juanfra @beafialho This is ready for review.

There is more than one way to do this. In this PR; I have kept all the current slugs. Another way would be to introduce generic slugs, like body and heading in Twenty Twenty-Four.

juanfra

Thank you for working on this, Carolina. I left some comments of things I found.

There are some comments that are related to sizing. If the intention was to work on the sizing later on, please disregard them.

styles/typography/typography-preset-1.json

styles/typography/typography-preset-2.json

styles/typography/typography-preset-3.json

styles/typography/typography-preset-4.json

styles/typography/typography-preset-5.json

styles/typography/typography-preset-6.json

styles/typography/typography-preset-7.json

beafialho · 2024-08-27T16:57:24Z

Thank you for your work on this and apologies for the delay in reviewing.

Each style variation has particularities which are set up globally with the intent to make each variation unique. It goes a little further than just changing the font. I tested them and have a few comments:

Preset 1

Post tags should be Regular

Preset 2

Buttons aren't using the right font settings and shape specified on Figma
Site title should use the Large preset

Preset 3

Site title should use Ysabeau office bold/uppercased in 18px
Buttons aren't using the right font settings and shape specified on Figma

Preset 4

Site title, navigation, post categories and tags should be uppercase
Headings, Post Titles, Archive Titles, Search Results Titles should be Light
Buttons aren't using the right font settings and shape specified on Figma

Preset 5

Headings, Post Titles, Archive Titles, Search Results Titles don't have the right weight, it should be Black
Site title should be uppercase and letterspacing as specified on Figma
Buttons aren't using the right font settings and shape specified on Figma

Preset 6

Headings, Post Titles, Archive Titles, Search Results Titles don't have the right weight, it should be Extra Bold
Buttons aren't using the right font settings and shape specified on Figma

Preset 7

Headings don't have the right weight, should be Extra Light
Site title should be uppercase and use the Large preset
Buttons aren't using the right font settings and shape specified on Figma
Post categories should be uppercase

carolinan · 2024-08-27T17:00:20Z

@beafialho Setting the shape is not possible in a typography preset, it must only change the typography, anything else needs to be separated.

beafialho · 2024-08-27T17:02:03Z

Setting the shape is not possible in a typography preset, it must only change the typography, anything else needs to be separated.

I wasn't aware. I thought of them as style variations. If it's not possible then, ignore that feedback in this context.

cc: @richtabor

carolinan · 2024-08-27T17:02:57Z

What about the navigation block styles that @juanfra mentioned in the comments?

beafialho · 2024-08-27T17:20:42Z

Please refer to the comments I made regarding each preset in this comment:

Thank you for your work on this and apologies for the delay in reviewing.

Each style variation has particularities which are set up globally with the intent to make each variation unique. It goes a little further than just changing the font. I tested them and have a few comments:

Preset 1

Post tags should be Regular

Preset 2

Buttons aren't using the right font settings and shape specified on Figma

Site title should use the Large preset

Preset 3

Site title should use Ysabeau office bold/uppercased in 18px

Buttons aren't using the right font settings and shape specified on Figma

Preset 4

Site title, navigation, post categories and tags should be uppercase

Headings, Post Titles, Archive Titles, Search Results Titles should be Light

Buttons aren't using the right font settings and shape specified on Figma

Preset 5

Headings, Post Titles, Archive Titles, Search Results Titles don't have the right weight, it should be Black

Site title should be uppercase and letterspacing as specified on Figma

Buttons aren't using the right font settings and shape specified on Figma

Preset 6

Headings, Post Titles, Archive Titles, Search Results Titles don't have the right weight, it should be Extra Bold

Buttons aren't using the right font settings and shape specified on Figma

Preset 7

Headings don't have the right weight, should be Extra Light

Site title should be uppercase and use the Large preset

Buttons aren't using the right font settings and shape specified on Figma

Post categories should be uppercase

Site title: Changed font family and text transform. Post title: Changed font size to 58px.

carolinan · 2024-08-28T01:06:25Z

styles/typography/typography-preset-1.json

+			},
+			"core/post-title": {
+				"typography": {
+					"fontSize": "var:preset|font-size|xx-large",


In Figma, the post title on the single post is set to 58px.
However, in the archive template markup, the post title is set to large, 32px. In the single post template markup, the post title is set to x-large, 48px.
Meaning that setting the size to 58px here won't have any affect on these two titles.

- Set the site title to the large font size - Set the font family, size, weight, and letters pacing on elements > button.

- Set site title to use the ysabeau-office font family, font size small, uppercase, and letter spacing 1.44px - Set elements > button to use the ysabeau-office font family, font size small, font weight 500, letter spacing 1.44px, and uppercase.

Site title: Remove the font family, to fallback on manrope, and apply uppercase. Post title: Change font weight to 300, light. Post terms: Apply uppercase. Navigation: Apply uppercase. Query title: Change font weight to 300, light. Elements > heading: Change font weight to 300, light.

Set elements > button font weight to 500, letter spacing to -0.36px, and apply uppercase.

- Site title: Remove font family. Set letter spacing to 1.6px, apply uppercase. - Elements > Heading: Set font weight to black, 900. - Query title: Set font weight to black, 900. - Elements > Button: set font family to literata, set font weight to 900.

- Query title: Apply font weight 800, extra bold. - Elements > heading: apply font weight 800, extra bold. - Elements > button: apply font wright 800, extra bold, set font family to platypi.

- Site title: Change font size to large. Apply uppercase. - Post title: Change font weight from 250 to 200. - Post terms: Apply uppercase. - Elements > Heading: Set font weight to 200 - Elements > Button: Add literata font family, font size medium, font weight 600, letter spacing -0.96px, and make it uppercase.

beafialho · 2024-08-28T08:05:02Z

I feel like we're rushing implementing this work which has many small details to consider and the discussion is becoming a rabbit hole. I find it hard to review thoroughly in sectioned comments, so I suggest we merge this as is and test again later.

carolinan · 2024-08-28T08:11:46Z

The changes that were requested are implemented except for
Preset 1 Post tags should be Regular
Because I did not understand what this referred to: font size? weight? the spacing preset called "regular"?

beafialho · 2024-08-28T08:17:00Z

Thank you for addressing the changes.

Post tags should be Regular font weight:

carolinan added 3 commits August 23, 2024 10:01

WIP: Add typography presets

ca7ef3b

Create typography-preset-1.json

69044a0

WIP

642b88a

carolinan added the [Component] theme.json label Aug 23, 2024

carolinan added 2 commits August 23, 2024 10:31

Add preset 4 and 5

9880971

Add presets 6 and 7

3a8ec12

carolinan added the [Type] Enhancement A suggestion for improvement. label Aug 23, 2024

carolinan added 4 commits August 23, 2024 11:50

Fic typos in preset titles

b3e753d

Remove duplicate font family from post titles, fine tune font weight …

372a308

…and letter spacing.

Merge branch 'trunk' into try/typography-presets

5a63770

Merge branch 'trunk' into try/typography-presets

0229e7c

carolinan changed the title ~~WIP: Add typography presets~~ Add typography presets Aug 25, 2024

carolinan marked this pull request as ready for review August 25, 2024 06:53

This comment was marked as outdated.

Sign in to view

carolinan added 2 commits August 26, 2024 13:13

Fix typo in preset 3

910144f

Merge branch 'trunk' into try/typography-presets

d98860d

This comment was marked as outdated.

Sign in to view

Adjust letter spacing and fix spacing of the code.

04d016c

carolinan added the [Component] Style Variations label Aug 26, 2024

juanfra added the [Priority] High Used to indicate top priority items that need quick attention label Aug 27, 2024

juanfra reviewed Aug 27, 2024

View reviewed changes

This comment was marked as outdated.

Sign in to view

Preset 1 changes

fa51c99

Site title: Changed font family and text transform. Post title: Changed font size to 58px.

carolinan commented Aug 28, 2024

View reviewed changes

carolinan added 9 commits August 28, 2024 03:07

Preset 1: Fix the typo in the font name

292e2a2

Update Preset 2

d722b6a

- Set the site title to the large font size - Set the font family, size, weight, and letters pacing on elements > button.

Update preset 3

b0ab932

- Set site title to use the ysabeau-office font family, font size small, uppercase, and letter spacing 1.44px - Set elements > button to use the ysabeau-office font family, font size small, font weight 500, letter spacing 1.44px, and uppercase.

Preset 3: adjust button font weight to 600.

c1a449c

Add preset 4 button styles

aafa2d7

Set elements > button font weight to 500, letter spacing to -0.36px, and apply uppercase.

Update preset 5

ef328fd

- Site title: Remove font family. Set letter spacing to 1.6px, apply uppercase. - Elements > Heading: Set font weight to black, 900. - Query title: Set font weight to black, 900. - Elements > Button: set font family to literata, set font weight to 900.

Update preset 6

4b2501a

- Query title: Apply font weight 800, extra bold. - Elements > heading: apply font weight 800, extra bold. - Elements > button: apply font wright 800, extra bold, set font family to platypi.

Preset 1: Add font weight 400 to post terms.

16e6cc3

carolinan merged commit 6b9bec1 into trunk Aug 29, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add typography presets #110

Add typography presets #110

carolinan commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 25, 2024 •

edited

Loading

carolinan commented Aug 26, 2024

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

juanfra left a comment

This comment was marked as outdated.

This comment was marked as outdated.

beafialho commented Aug 27, 2024

carolinan commented Aug 27, 2024

beafialho commented Aug 27, 2024

carolinan commented Aug 27, 2024

beafialho commented Aug 27, 2024

carolinan Aug 28, 2024 •

edited

Loading

beafialho commented Aug 28, 2024

carolinan commented Aug 28, 2024

beafialho commented Aug 28, 2024

Add typography presets #110

Add typography presets #110

Conversation

carolinan commented Aug 23, 2024 • edited Loading

github-actions bot commented Aug 25, 2024 • edited Loading

carolinan commented Aug 26, 2024

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

juanfra left a comment

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as outdated.

beafialho commented Aug 27, 2024

carolinan commented Aug 27, 2024

beafialho commented Aug 27, 2024

carolinan commented Aug 27, 2024

beafialho commented Aug 27, 2024

carolinan Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

beafialho commented Aug 28, 2024

carolinan commented Aug 28, 2024

beafialho commented Aug 28, 2024

carolinan commented Aug 23, 2024 •

edited

Loading

github-actions bot commented Aug 25, 2024 •

edited

Loading

carolinan Aug 28, 2024 •

edited

Loading