Adjustments in the Japanese version
Closed this issue · 10 comments
If the Japanese translation is included with the English design, it may look strange and the font size and designations may need to be adjusted.
Points to be adjusted in the Japanese version
New TOP
- Specify font for h1,h2.has-heading-3-font-size (Noto serif jp : Regular)
- If possible, change the design of the Get started section, but if it is impossible to change the design, change the font-size to 70px.
I want to Japanese below English, and change the font size between English and Japanese. I think it's important for this place to serve as a CTA, so I want the design to look cool, but the font is too big and a bit odd in Japanese.
About
- Specify the font for h1 (Noto serif jp : semi-bold)
- Specify font for h3 (Noto serif jp : regular)
- Specify font for body text (Noto serif jp : regular)
News-Single
- Specify font for h1 (Noto serif jp), font size 60px
Download
- Specify font for h1 and h2 (Noto serif JP)
- Specify font for is-style-features section (Noto sans jp : light)
Design samples in Figma are available here:
https://www.figma.com/file/8gSnRdDBGPmpuuwOfoWM3y/Localization%3A-Japanese?type=design&node-id=1%3A2193&mode=design&t=ah3UI8Cuuav8Fyk2-1
Related Issues:
Update rosetta homepages to new homepage version #266
How to Implement Web fonts for a specific language for a specific locale #427
Could someone please make the above adjustment?
I think it is necessary to continue discussing whether web fonts can be added in #427, so I would like to first submit a PR regarding points other than fonts (font family, font weight).
If possible, change the design of the Get started section, but if it is impossible to change the design, change the font-size to 70px.
I want to Japanese below English, and change the font size between English and Japanese. I think it's important for this place to serve as a CTA, so I want the design to look cool, but the font is too big and a bit odd in Japanese.
What do you all think about this? We will probably need to prepare two "Get started" strings with different translation contexts, and only one will be localized. And if you don't need this subtext in languages other than CJK, we may need to hide it with CSS or pattern PHP files.
I will suggest overriding CSS variables such as font family, font size, etc.
This will keep the design of the site consistent and ensure that future pages created will reflect the changes.
Thank you @t-hamano !
What do you all think about this? We will probably need to prepare two "Get started" strings with different translation contexts, and only one will be localized. And if you don't need this subtext in languages other than CJK, we may need to hide it with CSS or pattern PHP files.
The proposal was only a "hopefully". After thinking it over, I think my proposal was not a good one, because it used English as a decoration (sub-context).
So here I thought it would be better to just change it to 70px.
If possible, change the design of the Get started section, but if it is impossible to change the design, change the font-size to 70px.
I considered how a change in font size could be applied and what the impact would be if this change were made.
The title of the "Getting started" section has a font size slug of heading-cta. This is defined in theme.json. This size is 120px, but was changed to 96px by the following PR:
WordPress/wporg-parent-2021#120
So, changing the title of the "Getting started" section to 70px means reducing the value of the heading-cta font-size slug from 96px to 70px.
This font size slug is used in a variety of places.
With that in mind, would it make sense to change 96px to 70px? Below are pages that use a heading-cta slug, comparing how it looks when changed from 96px to 70px. These are the ones I have looked at, they may be on other pages too.
Top page
https://ja.wordpress.org/?new-theme=1
| 96px | 70px |
|---|---|
 |
 |
WordPress 6.5
https://ja.wordpress.org/download/releases/6-5/?new-theme=1
| 96px | 70px |
|---|---|
 |
 |
WordPress 6.4
https://ja.wordpress.org/download/releases/6-4/?new-theme=1
| 96px | 70px |
|---|---|
 |
 |
WordPress 6.3
https://ja.wordpress.org/download/releases/6-3/?new-theme=1
| 96px | 70px |
|---|---|
 |
 |
 |
 |
Thanks for sharing your insights.
I may not have seen everything, but looking at the designs you presented (especially the same class in WordPress 6.5 and WordPress 6.4), the change from 96px to 70px seemed like a good one.
So to summarize, the requested changes for ja.w.org are:
- Update CTA size from 96px to 70px
- Update headings to Noto Serif JP
For the Noto Serif replacement, would updating the --wp--custom--heading--typography--font-family variable work? That should apply to all h1, h2, etc, unless they've been customized.
Does that sound right? Have I missed anything?
For the Noto Serif replacement, would updating the
--wp--custom--heading--typography--font-familyvariable work? That should apply to allh1,h2, etc, unless they've been customized.
The Noto Serif JP font is not a font installed by default on the user's local machine, so a web font must be used.
I think the only problem is that the font published on Google Fonts is too huge in size.
This problem is explained in detail in the following issue:
Yes, I know — I'm also working on #427, I'll have an update there soon.
Can you confirm that no other style changes are requested, though?
I've deployed the update to the CTA font size, and created a few PRs for updating the font — WordPress/wporg-mu-plugins#630 for adding the file, and #455 for using it.