# Why is my font size limit 7?

**URL:** <https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824>\
**Category:** Dashboard\
**Created:** [21 December 2020 04:24 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824 "2020-12-21T04:24:20Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [21 December 2020 04:24 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/1 "2020-12-21T04:24:20Z")

</div>

Goodday,

I have a small display so I want to blow the text up.  
However, it seems that \< font size=7\> {{msg.payload}} is the max?

I'm using a pi zero w with a 800x640 display and node red V1.2.6

```auto
[{"id":"e0718196.8a6b","type":"ui_text","z":"96135b2b.aa4598","group":"800524ec.9ddd98","order":1,"width":"20","height":"6","name":"Klok","label":"","format":"<font size={{msg.font}}>{{msg.klok}}","layout":"row-center","x":610,"y":440,"wires":[]},{"id":"800524ec.9ddd98","type":"ui_group","name":"Klok Digitaal","tab":"f5d1aa9c.a4fc68","order":1,"disp":false,"width":"20","collapse":false},{"id":"f5d1aa9c.a4fc68","type":"ui_tab","name":"Scherm1","icon":"Wekker","disabled":false,"hidden":true}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2020 08:01 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/2 "2020-12-21T08:01:23Z")

</div>

Hi @Nice_to_have

Few things...

1. Users cannot import your code as you have not wrapped it with backticks  
`````  
`code should be wrapped like this to maintain readability and importability`  
`````
2. You have entered ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/a/3ab56b914a21a76bdab7d2b805d23eddaa0f8c25.png).  
When `<font size={{msg.font}}>{{msg.klok}}` is sent values will end up like this `<font size=7>hello` \<\< that is an incomplete HTML TAG and the size must be surrounded with quotes. Have a look at the example [here](https://www.techonthenet.com/html/elements/font_tag.php)
3. `font` is depreciated - you would be better off using a `span` tag with `style` set (e.g. "font-size:7px") See [examples](https://html-shark.com/HTML/TextSizeType.htm)

---

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [21 December 2020 08:44 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/3 "2020-12-21T08:44:34Z")

</div>

Hi @Steve-Mcl,

Thanks for your reply, I will try your suggestion of span.

But I am trying to figure out why I can't go bigger then 7.  
I first tried it by setting the value my self, like ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/641d42d001e7d7f56527964443d1f6f9ceaaf23a.png)  
And I can manually change it from 5 to 6 to 7 and that works, but from 8 and up it doesn't increase in size.  
7 seems to be the maximum size limit.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2020 08:55 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/4 "2020-12-21T08:55:57Z")

</div>

Re-read my reply.

- Font is deprecated
- You didn't close the tag
- You didn't surround the size value with quotes.

What was unclear about that?

Try the span, if it doesn't work, use browser Dev tools to inspect the item. You may need an `!important` specifier added to the font-size attribute.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [21 December 2020 09:06 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/5 "2020-12-21T09:06:56Z")

</div>

Besides from being deprecated, the font tag only supports size values from 1 to 7. See here: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)

I'd go with Steve's solution using the style attribute, that's far more flexible.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 December 2020 09:18 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/6 "2020-12-21T09:18:20Z")

</div>

You both forget that angular strips off the style attribute of elements and the font tag is quick and easy way to workaround that.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2020 09:19 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/7 "2020-12-21T09:19:37Z")

</div>

Forgot? I didn't know haha. What's the better solution then Nick - CSS class?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [21 December 2020 09:21 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/8 "2020-12-21T09:21:58Z")

</div>

> [@Steve-Mcl](#):
>
> Forgot? I didn't know haha

Yes, forgot. Here's where I last told you about it: [Simple show awesome icon on screen - #5 by knolleary](https://discourse.nodered.org/t/simple-show-awesome-icon-on-screen/16847/5)

😉

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2020 09:23 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/9 "2020-12-21T09:23:27Z")

</div>

Ah that's not fair, over 1 year ago and never I've used it 😇. I'm going with never knew it 😉

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 December 2020 09:24 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/10 "2020-12-21T09:24:32Z")

</div>

"Ignorantia juris non excusat" 😉

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 December 2020 09:25 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/11 "2020-12-21T09:25:34Z")

</div>

> [@dceejay](#):
>
> Ignorantia juris non excusat

paenitet, ego non intellego?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 December 2020 09:51 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/12 "2020-12-21T09:51:10Z")

</div>

It is probably simpler to just use a ui\_template - then you would have more control of the internal parts - eg set a ui\_template to

`<font style="font-size:{{msg.font}}em">{{msg.payload}}</font>`

---

<div class="post-metadata">

**Author:** ![Nice\_to\_have](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@Nice\_to\_have](https://discourse.nodered.org/u/Nice_to_have)\
**Post date:** [21 December 2020 10:11 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/13 "2020-12-21T10:11:24Z")

</div>

This is an easy solution, thank you

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 January 2021 10:11 UTC](https://discourse.nodered.org/t/why-is-my-font-size-limit-7/37824/14 "2021-01-04T10:11:29Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.