Start a new topic

Font top spacing

Working on a Dashboard and like to compact stuff to push as much info as possible on the screen.

No I'm stuck on the "spax" or "top spacing" of the text/number font.

Here I pointed out some white spaces which I can't get rid of...

Hope somebody has some tips/tricks on how to get rid of those "expensive" unusable pixels :)


On all object the "spax" and "spay" parameter is set to 0.

You mean the space that fonts use for accents?

no the space above the accents(, capitals, etc);


n6 is 75p high and the "white space" is about 20p.

t6 is 30p high and the  "white space" is about 9p.

So there's about 30% white space above the accents.

and yet characters such as ŽŠÊÅÑÕ indeed use this upper space.  The ASCII characters utilize about 67% with 33% white space designed into the lettering for readability.  Note that even as you type into the forum this space above and below is indeed spaced for readability.  Nature of fonts.

Now, that is not to say that you can not skew it and make it less readable removing the space and utilizing the space above, but indeed not without a great deal of effort.  Just edit or build your font using one of the editors.

I would also debate

- when wanting to push as much "info" onto the screen

  one would use smaller pictures and smaller fonts.

The larger the font/picture, the more time to render

30 pixel and 75 pixel high is not a valid font size.

ZI font sizes are listed in with the font

 - height is always a multiple of 8

 - width is 1/2 of the height.

You have a few more observations to make about the fonts.

30 and 75 are the height you have given to the Component

to render the font within, and not the font height


If I understand the problem correctly, this would be easy to fix by measuring the size and location of the text fields.



Hi Ben,

Some can be achieved by setting Component height to Font height.

Some can be achieved by setting .xcen and .ycen

But what he is really complaining about is the font generation.

When we look at t6, we note that the bottom is truncated,

not allowing the lower tails of letters such as pqgy or an underscore

This means the font was rendered as high as possible

 - and it is this extra space at the top in t6

This is the nature of lettering for upper tails, Capitals and Accented Capitals

It is this space he is wishing to remove - which he can use a font editor for


The size of numbers/text and icons are set by there importance.

Thanks for you vision on my design!

I see that the accents use that space, but I'm not planning to use that space.

When I choose to set the dimensions of the number/text smaller then the font, then the bottom of the font are lost while the non use top pixel stay empty.

It would be very (font) Awesome when its possible to set spax/spay to negative so it will be possible to "move" the text to the top of the number/text box.

About the "impossibility" of the pixels I wrote;

I did a quick "measure" by placing a text box on the empty space. Maybe some bottom/border pixels were lost in my "measurement". 

Sorry for that.

Font editor spacing?

How does that work and/or where can I find a howto on that?

Back on topic (not debating my design or the pixel/box sizes);

Is it possible to move the text to the top of the box? The same is its possible to push text to the bottom with the "spay" parameter of an text box.


Font Height and Width is listed with the Font
Component space and options for rendering is in Attributes


Mismatching, or not using the correct attributes 

will indeed have their expected individual behaviours.

Can the font be pushed top or bottom using spay?

No.  .spay attribute adds additional spacing vertical spacing between rows

Even though this can push the letter below the component bottom

   and font bottoms of the font not rendered (but still take cycles to render)

The extra space on top will be even bigger than without .spay addition.

The component will still erase all of its component space when rendering

and when move up higher on the canvas will end up erasing the horizontal

lines in your design during rendering.

xstr helps ...

There is no Font Editor Spacing ... 

There are ZI Font Editors - so you can build your own font.

pixel by pixel by pixel - as I said not without much effort.

Sergio's handles the newer font format v2

Nextion Gallery > Tools, Tips, Tricks and HowTOs

 - Sergio's ZI Font Editor.

(Mine has fallen behind and doesn't handle v2, just v1)

(Kovacs handled version 0 fonts)

Login or Signup to post a comment