Changing Typography Settings

  • Resolved chappers1972

    (@chappers1972)


    2 years, 11 months ago

    Hi Tom,

    Still loving the plugin and your support!

    Here’s the situation: the default options for the typography settings, for example, H1 and H2, vary the font size depending on the device, ie, it’s larger on desktop and smaller on mobile. This is excellent.

    However, for desktop, H1 is too big (96) and H2 is too small (48). If I set the typography setting to a custom size (80), the text shows as this size on both desktop (which is good) and mobile (which is too big).

    It would be great if I could have an option to put in 80 for desktop and the H1 size for tablet and mobile.

    So here’s my thought: can I adjust the Gigantic option so that it sets the font to 80 on the desktop and then the smaller size fonts on the tablet and mobile devices?

    Or, is there a better way of achieving the same outcome?

    (I found an article here:

    https://wpdevelopment.courses/articles/gutenberg-typography-settings/#h-how-to-define-default-font-sizes

    which has a section “How to define default font sizes”. I’m happy to try going down this road but wondered if you had a better idea).

    Thanks,
    Richard.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Twentig

    (@twentig)

    2 years, 10 months ago

    Hi,

    Twentig adds an option to change the H1 font size (Customizer > Twentig Options
    Fonts > Page Title Font Size).

    To change the H2 size, you can add some custom CSS:

    :root {
    --heading--font-size-h2: 2.25rem;
}

@media only screen and (min-width: 652px) {
	:root {
        --heading--font-size-h2: 3rem;
	}
}

    2.25rem is the size on mobile. Change the 2.25rem and 3 rem values as you like. You can also change the 652px breakpoint value if you need.

    Hope that helps,
    Tom

    Thread Starter chappers1972

    (@chappers1972)

    2 years, 10 months ago

    Thanks Tom.

    I’ll give it a go over the next couple of days and let you know.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing Typography Settings’ is closed to new replies.