A Text panel is ideal for when you want to add a single piece of text to your page, such as a headline or quote, and can grab the attention of your reader and help get your core message across.
Where to find the Text panel
Navigate to a Document.
Select ‘Design’ for the Version of the Document that you want to work on.
The Version will then open in Design mode and the Panel palette (one of the most important features of TigerDesigner!) can be found to the right of your page design.
How to add a Text panel
Select the ‘Text’ panel type from the Panel palette.
Click and drag out an area on the page.
Select the ‘T’ icon from the flyout menu to open the text editor.
Enter your text and save.
Text panel Settings
When a panel is selected, the Settings palette will become active ready for you to begin choosing any settings, such as font type, size and colour. There are four main sections in this area, Name, Body, Accessibility and Panel.
Fully Editable gives you full control of every setting of a Text panel, so it's strongly recommended that you read the below section and become familiar with the settings available.
1. Name
Name
The 'Name' field is set default, but it's important to update it to something unique that reflects the content - for example, 'Pull Quote'. Descriptive names make it easier to identify the panels in your design, which is particularly helpful if you're using lots of the same panel type.
2. Body
The 'Body' section allows you to change the appearance of the text within a Text panel - this is important, as it can help you create more visually appealing content that's easy for your visitors to read.
Font
To change the font of your text, simply select an option from the 'Font' drop-down list. You can choose from a variety of public fonts or even upload your own fonts.
Font files should be .TTF and you must be sure that you have the rights to use them.
Size
You can find the font size field just to the right of the 'Font' drop-down list. Enter a numerical value to set a specific size - in general, this should be no smaller than 16pt.
Style
You can also change the style of your text using the 'Style' field. Font styles help to promote legibility, as well as communicate the message or tone of your content - for example, bold text can help to draw attention to and emphasise your point. Font styles can also add to the aesthetic of your document.
Uppercase
USING ALL CAPS CAN CERTAINLY HAVE ITS PLACE, but it can also appear look like you're shouting. If you wish to transform your text to uppercase, simply select the 'TT' icon. Once applied the icon will change to orange.
Text Colour
The 'Text Colour' field allows you to set the colour of your text - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.
Opacity
You can find the opacity field just to the right of the 'Text Colour' drop-down list. Enter a numerical value Enter a numerical value between 0 - 100 to set the opacity - the higher the value, the more opaque the text will be.
Size Mode
Use the 'Size Mode' settings to control how the text is sized. The most common option is 'Fixed', which will set the font to the size specified in the Font Size field. A further two options are also available, which are more responsive/automatic.
Fixed - the text will be set to the size specified in the Font Size field.
Fit to panel - the text will automatically resize to fill the panel.
Fit to width - the text will scale to fit the entire width of the panel (unless the height is too small).
Orientation
This field sets the orientation of the text in the panel. Choose from Horizontal, Flipped Horizontal, Up Vertical and Down Vertical.
Alignment
The alignment of text can add to the aesthetic of your document and make the content easier to read. Choose from:
Left-aligned - text is aligned with a left edge.
Right-aligned - text is aligned with a right edge.
Centered text - text is centered between two edges.
Justified - text is aligned along both the left and right margins, creating straight edges on both sides.
Text spacing
💡 Select the small cog icon to the right of the 'Alignment' field to access this option.
The spacing of text is just as important as font type, size and style, as it helps to enhance the readability and legibility.
Char - the amount of space between each individual letter or character in the panel.
Word - the amount of space between each word in the panel.
Line - the amount of vertical space between each line of text in the panel.
Para - the amount space between each paragraph of text in the panel.
Bold Fonts Style
💡 Select the small cog icon to the right of the 'Alignment' field to access this option.
The font style selected in the 'Bold Font Style' field will be applied to any text set as Bold in the Text panel.
💡 This setting is easy to miss, but very important! For example, choosing an italic font style, will set any bold font to use italic text.
3. Accessibility
Visible to Screen Reader
A simple checkbox option is available here for 'Visible to Screen Reader'. It will be ticked by default, but if you don't want the Text panel to be visible in Accessible Mode it can be unselected.
4. Panel
This section is used to customise the appearance of the panel itself - for example, choose a border thickness and colour, margin sizes or add a rounded corner.
Vertical Alignment
Choose how the text will alignment is the panel - for example, the top, bottom or middle of the panel.
Keyline Colour
A keyline adds a border/boundary line around your panel. Use the 'Keyline Colour' field to specify the colour that you wish to set for the border around the edge of the panel.
Keyline Width
Use the 'Keyline Width' to specify the width of the border around the edge of the panel. Enter a numerical value to set the keyline width- the higher the value, the thicker the keyline.
💡 Did you know you can choose a different thickness for each side of a panel? Simply enter four comma-separated values to apply. For example, 0, 0, 5, 0 (top keyline, right keyline, bottom keyline and left keyline) will display a keyline along the bottom of the panel only.
Back Colour
The 'Back Colour' field allows you to set the background colour of the panel - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.
Opacity
You can find the opacity field to the right of the 'Back Colour' field. Enter a numerical value between 0 - 100 to set the opacity - the higher the value, the more opaque the background will be.
Corner Radius
Use the 'Corner Radius' to specify the roundness of the corners of the panel. Enter a numerical value to set the corner radius - the higher the value, the rounder the corner.
💡 Did you know you can choose a different radius for each corner of a panel? Simply enter four comma-separated values to apply. For example, 10, 10, 0, 0 (top left corner, top right corner, bottom right corner and bottom left corner) will display a corner radius along the top of the panel only.
Position X & Y
Adjust the position of the panel using X and Y coordinates. 'X' sets the position of the left edge and 'Y' sets the top edge of the panel.
Width & Height
Adjust the width and height of the panel. The size is measured in pts.
Margins
Margins create breathing space by adding a clear separation between the content of a Text panel and the keyline (if used). A margin goes around all four sides of the panel and it's possible to target and change the margin for each side by selecting the link/unlink icon.
💡 Think about the size of margin you wish to use and how it can help establish visual balance and composition in your document and prevent the content from feeling cramped or crowded, which can make it harder to read.
