Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.49k stars 3.35k forks source link

Currency and language selectors in announcement bar use heading font-size and are large #2877

Open KaichenWang opened 1 year ago

KaichenWang commented 1 year ago

Depending on typography choice and scaling, the currency/language selectors in the announcement bar can be large because it's inheriting heading font-size

Image

kimberlyoleiro commented 1 year ago

Given this is off by default, I'll move it to the backlog

kimberlyoleiro commented 1 year ago

@danielvan what's the expected behaviour for the language/currency picker sizing across

  1. Announcement bar
  2. Header
  3. Footer

We tried to match the text size of the announcement bar but now there seem to be some inconsistencies, and or it's too big in some cases

Oliviammarcello commented 1 year ago

@kimberlyoleiro @danielvan I suggest we use the body font (instead of heading) and the text size used in the header for that currency and language selector. This way the selector size will feel consistent with the menu links in the header and shouldn't scale as intensely if the merchant wants to increase their heading font size. The footer selectors should remain the same.

Screenshot 2023-07-26 at 12 37 24 PM
kimberlyoleiro commented 1 year ago

Amazing! Thank you @Oliviammarcello

danielvan commented 1 year ago

Just to double check: we are using the body font across all elements in the announcement bar (currency, country, announcements) and we are following the body font scaling.

If this is it, I'm onboard. The visual change is minimal for merchants that upgrade, and the consistency is worth it.

Oliviammarcello commented 1 year ago

@danielvan Right now we use the heading font across all text in the announcement bar. I was suggesting just updating the currency and country selectors to the body font and keeping the actual announcements in the heading font, since that would be a more minimal visual change for merchants.

However, I am in favour of changing the announcements to body as well since it would reduce the overall height of the bar and be more readable when a more expressive header typeface is used with a small type size. Example