[Support request] Any plans on increasing media queries for typography?

[drew]

I love that the ability to apply different font sizes across two major media queries is a feature right out of the box, thanks so much for including that.

Currently, is seems the “mobile” styles include smartphone portrait and landscape plus tablet portrait and “desktop” covers everything from tablet landscape on up.

Are there plans to expand that to:

1. desktop
2. tablet landscape
3. tablet portrait
4. smartphone landscape
5. smartphone portrait

I love having the controls baked right into the customizer but I’m finding that I still end up spending time creating styles for @media screen and (min-width: 768px) and (max-width: 840px) becasue one setting for smartphone doesn’t really scale across three media queries without some awkwardness.

Lastly, it would be great to have the media query settings for all typography items.

Many thanks,
Drew

[David]

It would be nice to have this granularity but may make the UI fairly overwhelming in the current customiser layout.
I have been experimenting with dynamically sized text which may be of interest. Simple piece of code:

p { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }

It simply sets a size range between 16px and 24px spanning across 400px and 800px screen resolutions.

Maybe a dynamic option whereupon you set the base font min / max sizes across the device types and then apply scaling for in between(?)

[Tom]

Yea, while I love the idea, I think the UI would be a mess. The logic in the backend would also get messy pretty quickly, as GP would have to write all of those media queries for you.

Interesting idea, David! I’ll have to research that a bit 🙂

[David]

Here’s some bed time Reading

[drew]

I’m not too sure the UI would be difficult to figure out, even using the same containers for the existing icons, adding three more wouldn’t be overload.

The dynamic sizing is interesting too but I don’t have any experience working with it.

[David]

Hi Drew, i think when you consider the number of media queries (5) and the number of text styles to consider there would be at least 30 fields that would require populating. It would definitely be a nightmare with the current customiser layout and probably a little overwhelming for most users.

Try adding the CSS i provided above to some test content, the results are pretty cool.

[Maria]

Hi David,

I’ve been researching fluid typography for the past couple of days trying to see how to implement it on GPP based on the Smashing Magazine article you referenced above. I couldn’t quite get it to work so I came to the forum to see if there was any info on it and I see you’ve already been experimenting with it. I’d love to hear how you achieved it.

My headings wouldn’t scale up or down and my paragraph fonts scaled past the min and max font size.

[Leo]

Hi Maria,

Can you provide a link to your site?

[Maria]

Here it is: https://presser.demo.site/

[David]

Hi Maria, couple of things. The Rule will require !important to override the main styles. Secondly the first set of brackets shouldn’t contain a unit just the values. I had some pretty funky results using REMs and EMs with this model that i haven’t yet ironed out. Might be best to work with good old pixels for now.

[Maria]

Thanks for the tips, David. Still not working out for me. Will stick with px for now like you said and keep it movin’.

[Author]

Posts