Responsive Typography Option

[anteksiler]

Is there anyway we can create a responsive typography option? I would like to create it myself, but have not found a user-friendly way of doing it yet.

[valendesigns]

Need more info on what exactly a responsive typography type would save.

[anteksiler]

Most users would like to use different sizes for mobile, tablet and desktop.

So user should be able to set different typography options based on sizes set by the theme like mobile = <640px; tablet = >640px, <1024px; desktop = >1024px; @media screen and (min-width: 40.0625em) { typography output here. }

[valendesigns]

Wouldn't you just need to add additional typography options for those screens and setup the dynamic CSS using @media?

[anteksiler]

Not if you need tons of typography options for demanding customers :)

[valendesigns]

So what field do you need to add? Like additional font-size fields?

[valendesigns]

Creating a new option type that supports that is fairly easily.

[anteksiler]

So let's say, there is a field for Body Typography, a user should be able to enter 3 settings for each screen size. I guess Font-size would be enough, but they might need to adjust line-height for mobile, etc.

I couldn't think of a way to build it using existing options.

[valendesigns]

So you're saying just repeat all the fields x number of times in the same option?

[anteksiler]

Yeap, X being a media query size, min-width/max-width

[valendesigns]

Well x would be how ever many times you tell it to repeat, because everyone would have different needs and the media query wouldn't be baked into the option type.

[anteksiler]

Exactly, maybe an array passed onto the typography field:

array(
'min-width:640px',
'min-width:640px, max-width: 1024px'
)

etc

[valendesigns]

I don't understand why you would need to pass in the min-width or max-width. The setting is not aware that it is used in any front-end context. That part is handled by the theme.

[anteksiler]

You are correct, no need for that, but user should see which X is for which size.

If the option title is "Body Typography", it will be repeated 3 times. Also, there is no need to repeat it 3 times, if the user does not need it.

I was thinking of using list-type option with a typography option inside.

[valendesigns]

Maybe. Some thought would need to go into it for sure.