Perspective dynamic font sizing

I’ve been playing around with dynamic font sizing, and vw units appear to be the way to go for PC client displays (not sure about for mobile…)
vw means that, at least for coordinate containers set to percent mode, screens displayed on different resolutions will dynamically scale their font sizes accordingly. Designing the screens however on a high res monitor (4K) is a bit interesting though as the viewport is super wide meaning that the font size is super large.

Normal:
image

4K width:
image

I’m interested in what others use for displaying text on different resolutions, for P&ID mimics as well as for other form-based views

Try playing with calc

font-size: calc(1vw + 1vh + 1vmin + 1em);

or
font-size:  calc(16px + 6 * ((100vw - 320px) / 680));



there is also min max, tho this doesnt work on IE
font-size:  min(max(16px, 4vw), 22px)
(same as)
font-size:  clamp(16px, 4vw, 22px);

3 Likes

I’m no expert on this, but…

I like to use this in one of the top level components in the view (e.g. root) and the use em units to inherit from that. Not suitable for all use cases, but it helps reduce engineering time for the trial-and-error stages of trying to get font sizing right for different scenarios.

To handle portrait/landscape variation I normally create a custom prop that acts as a vw scale factor dependant on orientation. Although, @victordcq’s solution is a lot more elegant IMO :sweat_smile:

Another factor to bear in mind is the niche of ultra-widescreen displays. Sometimes vh is more appropriate.

I find trying to create a view that handles both desktop and mobile, whilst not impossible, takes a lot of trial-and-error to handle all the different scenarios. Sometimes it’s just easier to create 2 seperate views, but that’s probably more a factor of my inexperience :man_shrugging:

p.s. I honestly think that >90% of my time is spent fiddling with font sizes to get them right :laughing:

you can use vmin or vmax to get the min/max of vw/vh

Probably not worth worrying about IE - Perspective doesn’t support it anyway. Chrome, Firefox, Safari, Edge are the only browsers we test against.

1 Like