Add typography heading and body font size scale setting #688

KaichenWang · 2021-09-24T21:17:21Z

Why are these changes introduced?

Fixes #634

What approach did you take?

1. `body_scale` - Add theme typography setting for scaling body text size

The setting value is used as a multiplier in CSS to a scale up <html> base font-size
Since theme CSS uses rem units, all elements will be "scaled up" when this multiplier is applied - including all body text, icons, padding, margin, height, width, etc.

`body_scale` value (%)	Multiplier (`body_scale` / 100%)	`0.1rem` equivalent
`100`	`1.00`	`1px`
`130`	`1.30`	`1.3px`

2. `heading_scale` - Add theme typography setting for scaling heading text size

This allows for headings (all text that uses heading font) to scale independently from all other elements
Since body_scale affects all CSS elements including headings, this must be negated for headings (divide by body_scale)
The heading multiplier is therefore heading_scale / body_scale
Some icons also scale with heading_scale

`heading_scale` value (%)	Multiplier (`heading_scale` / `body_scale`) if `body_scale = 100%`	`0.1rem` equivalent if `body_scale = 100%`
`100`	`1.00`	`1px`
`150`	`1.50`	`1.5px`

3. Adjust site header (and password page header) grid to accommodate larger font-sizes

Other considerations

n/a

Demo links

Store
Editor

Checklist

…raphy-size-setting-3

sofiamatulis

This is an exciting update! Added a few comments :)

sofiamatulis · 2021-09-28T14:04:34Z

assets/base.css

@@ -354,73 +354,73 @@ h5,
  font-family: var(--font-heading-family);


When we have the font size range to 150% the text gets cut off in the collage https://screenshot.click/28-03-89dbl-7ohm8.png

This happens when the scales are different: https://screenshot.click/28-13-47dfl-m832n.png

Would prefer to address this in a separate PR. The reason being that this would require some refactoring and re-testing of the collage section. To be clear, this issue already exists with collage since longer product/collection titles could always cause overflow, but you are correct that this issue is made worse by the option to increase font size scale

Issue created - #699

Since the issue already exists, we can do that. Thanks for creating the issue :)

assets/base.css

sofiamatulis · 2021-09-28T14:21:05Z

assets/base.css

  }
 }

 h3,
 .h3 {
-  font-size: 1.7rem;
+  font-size: calc(var(--font-heading-scale) * 1.7rem);
 }



Not sure if it's related to this PR, but is it expected that we have a lot of space between the text and icon? I dont seem to see this with the other items: https://screenshot.click/28-20-7e0f0-z06r0.png

Not related to this PR. For <select>, AFAIK, there's no way to ensure its width fits the currently selected option

assets/base.css

sofiamatulis · 2021-09-28T14:22:46Z

assets/base.css

+h3.caption-large {
+  font-size: calc(var(--font-heading-scale) * 1.3rem);
+}
+
 .color-foreground {
  color: rgb(var(--color-foreground));


The price p in the gift card doesnt seem to be updating either: https://screenshot.click/28-22-zd38z-zdtqd.png

This would be considered "body text" and should be scaling with body_scale setting

Looks good 👍 but I am seeing this on the gift card page on your PR 🤔 https://screenshot.click/01-51-1spoi-a6twd.png

assets/base.css

sofiamatulis · 2021-09-28T14:40:36Z

templates/gift_card.liquid

@@ -49,6 +49,9 @@
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

+        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
+        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};


I am curious as why you are keeping the decimal instead of using divided_by: 100 and times: 1

Dividing and multiplying integers using Liquid filter would produce an integer result, but for scale, we need decimal values

sofiamatulis · 2021-09-28T14:41:22Z

snippets/facets.liquid

@@ -71,13 +71,13 @@
                              {% if value.count == 0 and value.active == false %}disabled{% endif %}
                            >

-                            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                            <svg width="1.6rem" height="1.6rem" viewBox="0 0 16 16" aria-hidden="true" focusable="false">


Wondering if we'll need to do this to all of the other svgs?

While I'm not sure if it should apply to all svgs, it should probably apply consistently to icons that are accompanied by text.

For instance, on the product page, the pickup availability one follows the text size, but the collapsible tabs and share button do not.

Most icons which have width/height defined in CSS already use rem units and automatically scale with body_scale setting. Some exceptions (seen in screenshot above) have definitely been missed on my end:

Share icon doesn't have rem width/height defined in CSS - I will fix

Collapsible tab heading icons should scale with heading_scale - I will fix also

If you notice any other icons not scaling with the text they accompany, please me know. Thanks!

Updated 2ff7cac:

Share icon now scales with body_scale setting

Collapsible tab heading icons now scale with heading_scale setting

LucasLacerdaUX

Looks good to me!

Just tested the new changes and all the comments I had were addressed :D

melissaperreault

Thank you a lot Kai! This is massive! Very excited about this upcoming update and what it will open in flexibility for Dawn!

Did a first pass - I need to do another one, here are my first observations:

Cart notification product information should use body_scale to match the cart
- Related to that, something I am wondering is if we should always treat the product title as a heading. I see some different approach on various template, I'd like to have your opinion and perhaps have a wider UX conversation about it.
Not sure if I saw this covered on another comment but the down-facing caret aren't scaling with the right scaling value for the Collection filters and the nested navigation.
I don't think this is related but noting in case, filter options aren't centered vertically
I noticed a <p> tag under the Pickup availability drawer over here
Inside the search combo box, the table heading scales with the heading_scale value, we are not scaling it by that value in Customer account table and Cart.
- This made me realize that styles in Cart, Customer account and Search combo box for the table title aren't the same, I would like to understand the difference when pairing.

KaichenWang · 2021-09-29T15:18:43Z

@melissaperreault

I've addressed the feedback. We can discuss further to address some global typography inconsistencies if necessary. Here are some more details on what's been fixed:

Cart notification product information should use body_scale to match the cart
Related to that, something I am wondering is if we should always treat the product title as a heading. I see some different approach on various template, I'd like to have your opinion and perhaps have a wider UX conversation about it.

Cart notification:

product options now share styles with the cart (scales with body_scale)
for the product name, I've kept the heading font (scales with heading_scale). It may be more consistent to change the cart page product name to use the heading font - product title on collection, predictive search, and product page all use heading font for product name. This has been updated 663f12e

Not sure if I saw this covered on another comment but the down-facing caret aren't scaling with the right scaling value for the Collection filters and the nested navigation.

This is now fixed. The caret should now only scale with body_scale

I noticed a <p> tag under the Pickup availability drawer over here

This was more related to how the option name was entered in the admin, but is now fixed

Inside the search combo box, the table heading scales with the heading_scale value, we are not scaling it by that value in Customer account table and Cart.
This made me realize that styles in Cart, Customer account and Search combo box for the table title aren't the same, I would like to understand the difference when pairing.

I've updated the table heading in predictive search to match the ones on cart page (scales with body_scale)

…raphy-size-setting-3

sofiamatulis

Retested everything and it looks good 🚢

thanks for the changes 👍 . Just noticed an internal liquid error on the gift card page (left a comment)

KaichenWang · 2021-10-01T16:06:43Z

@melissaperreault

Body text line-height (initially 1.8) now adjusts based on body_scale according to the formula
line-height = 1 + 0.8 / scale

`body_scale` value (%)	Multiplier (`body_scale` / 100%)	Computed `line-height`
`100`	`1.00`	`1.8`
`130`	`1.30`	`1.62`

Before/After

melissaperreault · 2021-10-01T20:56:42Z

Awesome Kai, super update! Thanks!
After testing it out and testing headings, I wish we can include that for when scaling Headings as well to harmonize spacing and balance white space line height. 🙏 (edit: I would recommend to do the adjustments for Headings also for large screens though.)

Coming later to put my final observations for margins like we discussed IRL. Thank you!

melissaperreault

Thank you Kai! 🎉

Scaling looks amazing among the changes for line height for body and what is upcoming for headings. I believe checking for headings later once you apply the same logic won't affect my review much.

My review focuses on areas some sections margins don't benefit the scaling flexibility + checking the full set of sections in action.

…raphy-size-setting-3

…dy font

KaichenWang · 2021-10-05T16:29:43Z

@melissaperreault I've addressed the feedback and updated the PR. The following has not been addressed, here are some details:

Collage section: I would tend to suggest to scale this section blocks default headings with the body_scale instead of the headings one to not create false expectations for merchants that their text wold be so large. Rationale is to improve the outcome on smaller screens, there is little to no place for content because of the inner padding/margins applied to the different blocks. But that might also need a little UI/UX revision to improve the Collage mobile layout setting.

Default headings for Collection list too would be inconsistent to express the official outcome once merchants select a real collection. The harmony between the section title and the block's text size once a collection is linked is much better. We can discuss of what would be a better alternative.

Agreed, I think the collage section in general would benefit from a slight refactor, especially to accommodate larger text. We can track all fixes in this new issue #699

Customer account template: Taking a note but will open another issue about it as I believe this is tied to a global change what we will need to update. Table heading from the cart compared to customer account is different in size and inconsistent in letter-spacing. Although we might not want to have those labels too small, they could get some love to improve the template hierarchy.

Aligned on opening an issue to tackle headings globally in the theme for more consistency

sofiamatulis

Looks good 👍 Left a few small comments and then I can do a final pass

sofiamatulis · 2021-10-05T19:10:07Z

assets/template-giftcard.css

@@ -22,7 +22,7 @@ h6:empty {
 }

 html {


When I adjust the font size in the gift card page I get a Liquid internal error:

https://screenshot.click/05-09-ciwss-eoc1q.mp4

Created an issue for this #740
Changing any theme setting will actually cause the Liquid error

sofiamatulis · 2021-10-05T19:11:37Z

config/settings_schema.json

-    "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes/os20/themes-by-shopify/dawn",
-    "theme_support_url": "https://support.shopify.com/"
+    "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/online-store\/themes\/os20\/themes-by-shopify\/dawn",
+    "theme_support_url": "https:\/\/support.shopify.com\/"


Is this change intended?

Good catch. Reverted

sofiamatulis · 2021-10-05T19:18:04Z

snippets/product-card-placeholder.liquid

+    <div class="card__inner">
+      <div class="card__content"><h2 class="card__text h3">{{ 'onboarding.product_title' | t }}</h2></div>
+    </div>
+  </div>  
 </div>


Small nitpick but on the product page, when scaling the body size, the spacing between some elements feel a bit tight: https://screenshot.click/05-17-vobf4-raq5b.mp4

cc @melissaperreault

@KaichenWang Is it possible that in this particular block space that the spacing is not scaled?

@sofiamatulis adjusted spacing for product badges 75a6004. Currently testing a few different pricing scenarios to make sure there's no unwanted impact

@melissaperreault I added some margin around the badges to increase the spacing slightly. But keep in mind that there was only a 5px margin between the price and the badge. 5px * 1.3 is still only 6.5px, so smaller margins can appear to not have scaled by much at all.

Looks good to me! The only thing is that the badge seems to have different alignment on desktop vs mobile: https://screenshot.click/06-30-ceaww-xf5l2.mp4

@melissaperreault not sure if it's intended, if so we can create a separate issue

not sure if it's intended, if so we can create a separate issue

Not intended, we could open another issue if we want to wrap this PR sooner.

sofiamatulis · 2021-10-05T19:21:03Z

assets/component-cart-notification.css

@@ -58,8 +58,8 @@

 .cart-notification__heading .icon-checkmark {


Not related to this PR but I am seeing this and not on main 🤔
Are you seeing this as well?

https://screenshot.click/05-20-zzfrg-7d2il.mp4

Created an issue for this #742
Yes I can reproduce it, but also on main (pretty much for any non-live instance of the theme)

Thank you! 👍

sofiamatulis · 2021-10-05T19:24:33Z

assets/component-cart-items.css

@@ -156,7 +156,7 @@ cart-remove-button .icon-remove {
  }
 }


In the filter, when the body is set to the highest size it's cutting the text in some languages (screenshot in French):

https://screenshot.click/05-22-khmva-ekybx.png

Also the focus is cutting of the text next to it: https://screenshot.click/05-23-0npqv-8vhyv.mp4

Adjusted the spacing and focus ring offset 5e239ef

sofiamatulis

Looks great 🎉 thanks for all the changes and the issues created

LucasLacerdaUX

Looks good to me! Tested every page and it seems to be working consistently across different templates.

Amazing work, Kai!

My only comment about the accordion title is almost an edge case and can be fixed in a follow-up PR if you prefer.

LucasLacerdaUX · 2021-10-06T19:29:01Z

assets/component-accordion.css

@@ -32,9 +36,10 @@

 .accordion .icon-accordion {


Minor bug and a bit of an edge case

Now that accordion icons are based on the size of font heading scale, we'd need to limit the width of .accordion__title based on that, or it would look like that with long titles:

Expected:

Solution:

.accordion__title { display: inline-block; max-width: calc(100% - 6rem);

could be replaced with:

.accordion__title { display: inline-block; max-width: calc(100% - (var(--font-heading-scale) * 4rem));

Issue created - #750

LucasLacerdaUX · 2021-10-06T19:44:19Z

assets/base.css

@@ -447,7 +456,7 @@ blockquote {
 .caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
-  line-height: 1.7;
+  line-height: calc(1 + 0.7 / var(--font-body-scale));


Side note, not related to this PR: I find this element's font size literally impossible to read on mobile. And my phone has a huuuge almost table-sized screen, so I can't even imagine how hard it is on smaller devices (1rem = 10px)

Is this intentional?

We need to take another look at global styles to make sure the 100% still meets legibility and accessibility norms. Caption is mostly used to support content, but could benefit for being slightly increased. Would be great to have a screenshot and post on that new issue #741 if you have the time 🙏

melissaperreault

Thank you all for the detailed reviews and care team! I've also checked around many hidden corners but I suspect this kind of update will uncover edge cases in time that we can fix on a future PR. 🚢 🎉

* Add typography size setting * Adjust setting values * Update font-sizes * Update from Shopify for theme dawn/add-typography-size-setting * Add separate size setting for headings * Use range setting instead of select for typography size * Enable heading font-size scaling * Adjust elements to support scaling * Update arrow icon scaling * Fix typo * Update variable names. Add translations strings for setting labels * Update 16 translation files * Update 3 translation files * Address PR comments. Fix icon size for share and accordion * Address design feedback * Update locales/fi.schema.json * Set cart item font to h4 style * Reduce body line-height as font size scale increases * Adjust global line-height to scale with font-size setting * Address design feedback. Ensure some UI elements do not scale with body font * Revert URL change in settings * Adjust focus and margin of filter select * Adjust product price badge spacing Co-authored-by: shopify-online-store[bot] <79544226+shopify-online-store[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: translation-platform[bot] <35075727+translation-platform@users.noreply.github.com>

KaichenWang and others added 12 commits September 21, 2021 14:28

Add typography size setting

1be6d35

Adjust setting values

72405f6

Update font-sizes

386b17a

Update from Shopify for theme dawn/add-typography-size-setting

454093c

Add separate size setting for headings

b5b2ff1

Use range setting instead of select for typography size

c1b6642

Merge branch 'main' of https://github.com/Shopify/dawn into add-typog…

b4210a6

…raphy-size-setting-3

Enable heading font-size scaling

5791c27

Adjust elements to support scaling

494bffa

Update arrow icon scaling

db27823

Fix typo

bfb2609

Update variable names. Add translations strings for setting labels

74f9d06

KaichenWang requested a review from melissaperreault September 24, 2021 21:17

Update 16 translation files

819cbbf

ghost added the cla-needed label Sep 27, 2021

LucasLacerdaUX self-requested a review September 28, 2021 14:37

sofiamatulis reviewed Sep 28, 2021

View reviewed changes

sofiamatulis self-assigned this Sep 28, 2021

translation-platform bot and others added 2 commits September 28, 2021 15:03

Update 3 translation files

44f18a5

Address PR comments. Fix icon size for share and accordion

2ff7cac

LucasLacerdaUX previously approved these changes Sep 28, 2021

View reviewed changes

KaichenWang requested a review from sofiamatulis September 28, 2021 20:08

KaichenWang mentioned this pull request Sep 28, 2021

Collage section product/collection title text overflows and is clipped by container #699

Closed

melissaperreault reviewed Sep 29, 2021

View reviewed changes

Address design feedback

726eef7

KaichenWang dismissed LucasLacerdaUX’s stale review via 726eef7 September 29, 2021 15:09

LucasLacerdaUX self-requested a review September 29, 2021 15:29

translation-platform and others added 2 commits September 29, 2021 16:57

Update locales/fi.schema.json

c4fe58f

Merge branch 'main' of https://github.com/Shopify/dawn into add-typog…

30b739e

…raphy-size-setting-3

KaichenWang requested a review from melissaperreault September 30, 2021 14:16

sofiamatulis previously approved these changes Oct 1, 2021

View reviewed changes

Reduce body line-height as font size scale increases

26b4edf

KaichenWang dismissed sofiamatulis’s stale review via 26b4edf October 1, 2021 16:02

melissaperreault reviewed Oct 4, 2021

View reviewed changes

KaichenWang added 3 commits October 4, 2021 11:56

Adjust global line-height to scale with font-size setting

9c3f8b4

Merge branch 'main' of https://github.com/Shopify/dawn into add-typog…

830122f

…raphy-size-setting-3

Address design feedback. Ensure some UI elements do not scale with bo…

5482265

…dy font

KaichenWang requested review from melissaperreault and sofiamatulis October 5, 2021 17:15

sofiamatulis reviewed Oct 5, 2021

View reviewed changes

KaichenWang mentioned this pull request Oct 6, 2021

Adjusting theme settings in editor while on Gift card page renders Liquid error #740

Closed

Revert URL change in settings

0e6c97a

melissaperreault mentioned this pull request Oct 6, 2021

Adjust headings globally in the theme for more consistency #741

Closed

KaichenWang mentioned this pull request Oct 6, 2021

Editing cart quantity in Editor (for non-live theme) causes JS error #742

Closed

KaichenWang added 2 commits October 6, 2021 10:21

Adjust focus and margin of filter select

5e239ef

Adjust product price badge spacing

75a6004

KaichenWang requested a review from sofiamatulis October 6, 2021 15:05

sofiamatulis approved these changes Oct 6, 2021

View reviewed changes

LucasLacerdaUX approved these changes Oct 6, 2021

View reviewed changes

melissaperreault approved these changes Oct 7, 2021

View reviewed changes

KaichenWang merged commit fe3de56 into main Oct 7, 2021

KaichenWang deleted the add-typography-size-setting-3 branch October 7, 2021 14:09

KaichenWang mentioned this pull request Oct 7, 2021

Collapsible tab heading may overflow allotted space #750

Closed

melissaperreault mentioned this pull request Dec 17, 2021

[Global setting] Slider blur radius enhancement #1040

Closed

2 tasks

melissaperreault mentioned this pull request Jun 23, 2022

Add option to adjust announcement bar font size #1778

Open

7 tasks

		@@ -354,73 +354,73 @@ h5,
		font-family: var(--font-heading-family);

		@@ -58,8 +58,8 @@

		.cart-notification__heading .icon-checkmark {

Add typography heading and body font size scale setting #688

Add typography heading and body font size scale setting #688

Conversation

KaichenWang commented Sep 24, 2021 • edited Loading

1. body_scale - Add theme typography setting for scaling body text size

2. heading_scale - Add theme typography setting for scaling heading text size

3. Adjust site header (and password page header) grid to accommodate larger font-sizes

sofiamatulis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaichenWang Sep 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis Oct 1, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaichenWang Sep 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LucasLacerdaUX Sep 28, 2021 • edited Loading

Choose a reason for hiding this comment

KaichenWang Sep 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

melissaperreault left a comment • edited by KaichenWang Loading

Choose a reason for hiding this comment

KaichenWang commented Sep 29, 2021 • edited Loading

sofiamatulis left a comment

Choose a reason for hiding this comment

KaichenWang commented Oct 1, 2021 • edited Loading

Before/After

melissaperreault commented Oct 1, 2021 • edited Loading

melissaperreault left a comment • edited by KaichenWang Loading

Choose a reason for hiding this comment

KaichenWang commented Oct 5, 2021

sofiamatulis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

LucasLacerdaUX Oct 6, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

melissaperreault left a comment

Choose a reason for hiding this comment

KaichenWang commented Sep 24, 2021 •

edited

Loading

1. `body_scale` - Add theme typography setting for scaling body text size

2. `heading_scale` - Add theme typography setting for scaling heading text size

KaichenWang Sep 28, 2021 •

edited

Loading

sofiamatulis Oct 1, 2021 •

edited

Loading

KaichenWang Sep 28, 2021 •

edited

Loading

LucasLacerdaUX Sep 28, 2021 •

edited

Loading

KaichenWang Sep 28, 2021 •

edited

Loading

melissaperreault left a comment •

edited by KaichenWang

Loading

KaichenWang commented Sep 29, 2021 •

edited

Loading

KaichenWang commented Oct 1, 2021 •

edited

Loading

melissaperreault commented Oct 1, 2021 •

edited

Loading

melissaperreault left a comment •

edited by KaichenWang

Loading

LucasLacerdaUX Oct 6, 2021 •

edited

Loading