Info - How Text Works
Understanding how text works in SleekPixel is crucial for creating designs that work reliably with dynamic content. The text system is designed to handle varying content lengths while maintaining your design's integrity.
Text Box Controls
The text element in SleekPixel provides intuitive controls for sizing and scaling:
- Corner Handles: Scale both the font size and the text box proportionally
- Side Handles: Adjust the width of the text box while maintaining font size
Dynamic Text Behavior
When using dynamic text sources (such as post titles or excerpts) instead of static text, SleekPixel automatically manages the text sizing to ensure your design remains intact. The text will automatically scale down if the content is too long to fit within the designated text box. This automatic scaling is essential for maintaining design integrity when working with unpredictable content lengths.
Dynamic text will automatically scale down to fit within the text box, ensuring that even extremely long titles or content won't break your design.
Vertical Alignment
SleekPixel offers vertical alignment options (top, middle, or bottom) for text elements. It's important to note that while this setting affects the final rendered image, it may not be visible in the editor. This is because the text box in the editor always wraps tightly around the text for easier editing.
The vertical alignment becomes particularly useful when working with dynamic content that might be shorter than your test text, ensuring consistent placement regardless of content length.
Best Practices for Text Design
To achieve the best results with text elements in SleekPixel:
-
Set Ideal Size First Choose a sample text that represents the maximum number of lines you want to allow at your desired font size. This establishes your baseline text box size.
-
Configure Vertical Alignment Select the appropriate vertical alignment (top, middle, or bottom) based on your design needs. This will ensure consistent text placement across different content lengths.
-
Test with Various Lengths Preview your design with both shorter and longer text than your sample to ensure the automatic scaling and alignment work as expected.
This approach ensures that your design will:
- Automatically scale down text that's too long to fit
- Properly align shorter text according to your preferences
- Maintain visual consistency across different content lengths