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:
4K width:
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
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);
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
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
p.s. I honestly think that >90% of my time is spent fiddling with font sizes to get them right
In my experience something like 1.5vmin seems to handle most of my scenarios (also see @victordcq comments). Of course you can change the 1.5 factor to other values for different sizes. This assumes everything is set to percent mode.
Notes:
I have wanted to play around with a dynamic scale factor based on the aspect ratio, for example: calc( (100vmax / 100vmin) * 1.5vmin ) But I can’t seem to get it to work, not sure if a calc like this on font size is even possible or if I have the syntax wrong.
You could also couple this and some of the other listed ideas with Style Media-Queries to dynamically change your size or calculations based on the width of the screen. This will result in stepped changes.
You can not divide or multiply two units.
Also if you use vmin i advice you also set a minimum size with calc(max(1.5vmin , 12px)) incase someone on a small phone wants to read something xd
I’m also interested about manage the fontsize, mostly with the app. I’ve red this and other topics but it looks like everyone has its own method and there isn’t a “must” method.
Actually I’m using vmin but not always it works properly, should be possible to point some method that actually works?
@Aiasa21, yes it appears there isn’t really a standard method. Which makes it pretty difficult to know what to do. I’ve been trying to figure all of this out as well but everyone seems keen on their own methods (understandably) and they don’t seem to apply to what I’m trying to achieve.
I’ve been playing with things the last couple of days and the latest iteration has been something like the following:
calc(0.5 * (1.0vmin + 1.0vmax))
Where the 0.5 value is a factor for modifying your base text size.
Notes:
This method modifies the value based on both vmin and vmax which helps with different aspect ratios. However, I’m sure it’s not perfect
If you need to clamp to a minimum or maximum value use the min, max, or clamp functions like @victordcq has mentioned. These can be used in addition to the base function for something like this:
clamp(6px, 0.5 * (1.0vmin + 1.0vmax), 20px)
If it is useful I have found the following link to have some very interesting ideas on font scaling, but the methods are all based solely on width. Perhaps it is worth a read:
Now I’m working with vmin unit and it looks working good for what I need, but I’m curious about your calcolation, I cannot understand where you apply it.
The only trouble with using vmin/max is they’re a PITA deving with them in the Designer since the viewport is the full width of the View panel. Most of the time my view panel is much larger than the width of the View I have open meaning the font size is massive…
In my short experience, vmin is the one to use to keep an aspect ratio relative to the SVGs that are resizing. When I’m not using coordinate container I’m able to use pixels directly.
I also can’t test them in the designer, all text in my P&ID looks weird in the designer, I have to test it in chrome using F12.
Hmm, yep that actually might work well, Ill give it a go. I guess the art will be setting the values right so they don’t clamp too early for legitimate client sizes!
There really isnt much standard out there for font sizes… Just make your screen dynamic, the user can always zoom in, that increases font size and if dynamic enough doesntn change much else.
