# Perspective dynamic font sizing

**URL:** <https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 17, 2021, 1:54am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866 "2021-06-17T01:54:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [June 17, 2021, 1:54am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/1 "2021-06-17T01:54:08Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/705926b97d7a733f5d8b6ae697f61253ef7ebbe9.png)

4K width:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/2/d2b37c0cac30c33f0aaecbbfab415797059ba8d9.png)

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 17, 2021, 7:26am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/2 "2021-06-17T07:26:21Z")

</div>

Try playing with calc

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![matthew.ayre](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.ayre/32/19499_2.png) [@matthew.ayre](https://forum.inductiveautomation.com/u/matthew.ayre)\
**Post date:** [June 17, 2021, 7:34am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/3 "2021-06-17T07:34:59Z")

</div>

I'm no expert on this, but...

> [@nminchin](#):
>
> `vw` units appear to be the way to go

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.

> [@nminchin](#):
>
> not sure about for mobile…

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 😆

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 17, 2021, 7:38am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/4 "2021-06-17T07:38:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 17, 2021, 2:19pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/5 "2021-06-17T14:19:57Z")

</div>

> [@victordcq](#):
>
> `there is also min max, tho this doesnt work on IE`

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

---

<div class="post-metadata">

**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\
**Post date:** [July 27, 2022, 3:17pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/6 "2022-07-27T15:17:08Z")

</div>

- 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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 28, 2022, 6:15am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/7 "2022-07-28T06:15:45Z")

</div>

> [@j.israelsen](#):
>
> calc( (100vmax / 100vmin) \* 1.5vmin )

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

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [July 28, 2022, 8:23am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/8 "2022-07-28T08:23:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\
**Post date:** [July 28, 2022, 2:50pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/9 "2022-07-28T14:50:19Z")

</div>

@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:

[https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/](https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/)

---

<div class="post-metadata">

**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\
**Post date:** [July 29, 2022, 2:05pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/10 "2022-07-29T14:05:13Z")

</div>

I submitted a feature request that something be developed to simplify this:

[https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/scalable-font](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/scalable-font)

(_Updated Name of posted idea to clarify feature is for Perspective_)  
[https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/perspective-scalable-font](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/perspective-scalable-font)

Please feel free to vote and or provide comments/suggestions to the item.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [August 6, 2022, 5:56pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/11 "2022-08-06T17:56:57Z")

</div>

@j.israelsen , thanks for sharing your tests!

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.

**_calc(0.5_(1.0vmin + 1.0vmax))**

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 8, 2022, 6:43am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/12 "2022-08-08T06:43:41Z")

</div>

calc is css so you can put it directly as the `font-size:calc(0.5(1.0vmin + 1.0vmax))`

---

<div class="post-metadata">

**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\
**Post date:** [August 8, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/13 "2022-08-08T14:30:50Z")

</div>

@Aiasa21 see @victordcq response.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 10, 2022, 6:13am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/14 "2022-08-10T06:13:02Z")

</div>

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…

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/f/0f209db550ca858fbc99e06df84d5151a6ab31ca.png)

---

<div class="post-metadata">

**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\
**Post date:** [August 10, 2022, 7:08am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/15 "2022-08-10T07:08:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\
**Post date:** [August 10, 2022, 2:02pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/16 "2022-08-10T14:02:02Z")

</div>

@nminchin, would using the vmin/vmax along with the clamp function help you out? For example:

**clamp(6px, 0.5 \* (1.0vmin + 1.0vmax), 20px)**

At least that way you can limit the maximum text size.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 10, 2022, 3:34pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/17 "2022-08-10T15:34:15Z")

</div>

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! 😁

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 11, 2022, 7:30am UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/18 "2022-08-11T07:30:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jcaudle](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@jcaudle](https://forum.inductiveautomation.com/u/jcaudle)\
**Post date:** [December 13, 2022, 6:07pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/20 "2022-12-13T18:07:56Z")

</div>

Are there properties that can calculate off of a dashboard widget's size?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 3, 2023, 4:38pm UTC](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866/21 "2023-01-03T16:38:34Z")

</div>

I've been trying to mess with the coefficients in the calc equation, like so:  
`calc(0.5(1.0vmin + 1.0vmax))`  
`calc(3.0(1.0vmin + 1.0vmax))`

But I don't see any difference.

Where can I find more information on calc, vmin, and vmax?

[Next page](https://forum.inductiveautomation.com/t/perspective-dynamic-font-sizing/47866.md?page=2)