Variant Question

[Andre7]

Hi everyone and specially Acorn. Need to pick your brains again!!
In a previous thread, you recommended size 1440 for main and 720 for variant and fit to page width 1600. You also recommend text size for variant 50% bigger than the main. Following this , i use say 16 text size for main then use 24 for variant. My problem is 24 still look too small on mobile. If I go bigger than 24 it looks too big on tablet.
If I resize the browser window manually it looks perfect. But when I view on a mobile in real time it looks too small. I've spent many hours trying to get my head around variants and text sizes but i am failing miserably. What I am doing wrong?
Once again, thank you very much in advance

[Acorn]

Andre, just to check you are using paragraph Styles correctly.

Are you setting Normal to be 24px in the Variant by including some Normal text, changing to 24px when highlighted and then selecting the Normal drop-down and picking Update 'Normal' in this variant? Normal can be any Style you are using but Normal usually drives the Heading Styles as well.

Any tablet width up to 1080px will be shown as 24px but scaled to fit, making it look large.
As you can see it is a juggling act and you might want to sacrifice narrow phones by setting the Variant to 960px wide.
Smaller mobiles would then have to manually zoom.

I would avoid creating a third Variant. Too much effort and bloats the HTML.

Acorn

Screen	480	640	720	1080	1081	1440	1600
Scaling	0.67 of 24px (16px eq)	0.88 of 24px (21.3px eq)	24px	1.5 of 24px (36px eq)	0.75 of 16px (12px eq)	16px	1.11 of 16px (17.77px eq)

Screen	480	640	960	1200	1201	1440	1600
Scaling	0.5	0.66	24px	1.25	0.83	16px	1.11

[Andre7]

Thank you Acorn. Very helpful as always. I am on it. The tables with screen and scaling are helpful too. I will keep experiment until I get it right.