How Text Works

A text element is a box. Its text wraps at the box’s width, and the box’s height is the space the text may fill. That matters most with dynamic data, where a title may be three words on one post and thirty on the next.

Sizing the box

A selected text element has two kinds of handle:

• Corner handles scale the box and its font size together.
• Side handles change the box’s width and keep the font size.

Long text shrinks

When the text does not fit the box at its font size, Pixel reduces the font size one step at a time until it fits, down to a minimum of 8 pixels. A long title therefore renders smaller instead of spilling out of the design. Text never grows beyond the font size you set.

Vertical alignment

Vertical alignment places the text at the top, middle (the default) or bottom of the box. In the editor the box wraps tightly around the sample text, so the setting shows its effect in the rendered image, when the text is shorter than the box.

Designing for varying lengths

1. Type a sample text as long as the longest you want to show at full size, and size the box around it at the font size you want.
2. Choose the vertical alignment that suits shorter text.
3. Check the result with Preview image for posts with short and long titles; see Images.