Font sizes

  • Resolved dsb01

    (@dsb01)


    2 years, 7 months ago

    I’ve noticed that font sizes don’t resize very well for smaller screens (400px or less). Using chrome devtools, I see that some longer words don’t stay on one line.

    I’m interested to note that on examining the theme.json file there are four sizes defined under “fontsizes” – which are the four available in the editor. However the only one that uses clamp() is the x-large.

    Further, there are three defined under “custom”: {“typography”} – huge, gigantic and colossal – and these do use clamp() but I can’t see where they are available in the editor.

    I’m guessing that my best bet would be to do some research on how clamp values are defined for different screen sizes, then customize my “fontsizes” in the json.theme file?

    Would appreciate any advice, cheers ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @dsb01 – according to @greenshady, the best option for now is to overwrite Twenty-Twenty Two’s font-sizes via a child theme’s theme.json or stylesheet. If you go the former route, “for the settings.typography.fontSizes value in the child theme.json, you could overrule the individual size values with clamp():”

    "fontSizes": [
	{
		"size": "1rem",
		"slug": "small"
	},
	{
		"size": "1.125rem",
		"slug": "medium"
	},
	{
		"size": "1.75rem",
		"slug": "large"
	},
	{
		"size": "clamp(1.75rem, 3vw, 2.25rem)",
		"slug": "x-large"
	}
]

    (Don’t edit the theme files directly, or you’ll lose your changes every time the theme is updated. For creating a child theme of a block theme like Twenty Twenty-Two, you might want to give Create Block Theme a spin.)

    Down the road, there are some enhancements for fluid typography that will hopefully improve things:

    https://github.com/WordPress/gutenberg/issues/24480
    https://github.com/WordPress/gutenberg/pull/42489
    https://github.com/WordPress/gutenberg/issues/42694

    Thread Starter dsb01

    (@dsb01)

    Brilliant – thanks for the info.

    Pretty good approach to fluid text here: https://richtabor.com/fluid-type-scale-theme-json/ – I have yet to try it out fully…

    regarding the values in “custom–typography”, I’ve managed to figure out that the “gigantic” size is set for post-title, which is where I will concentrate my attention since that’s where I have a problem – post titles tend to split words over two lines if they are long in anything less than 400px. Mind you, SEO tends to frown upon any words longer than 3 syllables so should probably avoid “long” words in titles anyway!

    Thanks also for the child-theme plugin link – I usually try to avoid plugins wherever possible but in this case looks like a handy tool for getting the job done without fuss!

    Moderator Kathryn Presner

    (@zoonini)

    So glad this was helpful!

    I usually try to avoid plugins wherever possible but in this case looks like a handy tool for getting the job done without fuss!

    In this case, you’d only need the plugin to generate the child theme zip. Once that’s done, you can go ahead and deactivate the plugin. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Font sizes’ is closed to new replies.