Font Styling
Styling fonts in web projects is essential for showcasing your business and brand in the best light. Take complete control of your online presence with Titan’s wide variety of style settings for fonts that can help customize all your text to exhibit your business how you want.
Admins can customize fonts seamlessly with absolutely no code within Titan. Try out the following styles for your fonts: font families, font style, size, color, and so much more!
| # | Option | Function |
|---|---|---|
| 1 | Font Family | This option allows you to select a custom font from 90+ Font Family choices with the drop-down menu. |
| 2 | Font Style | Use the Font Style drop-down menu to emphasize fonts. Titan provides the following styling options for fonts: Lighter, Normal, Bold, Bolder, 300, and 500. |
| 3 | Size | The Size option allows you to select a size for your font with the drop-down menu. |
| 4 | Color | Click on the Color Selector button to set a color for the font. The colors can be set by selection from a color palette or by specifying a HEX color code. |
| 5 | Alignment | This option allows you to set the font’s vertical (top/middle/bottom) or horizontal position (left/center/right) in relation to its parent container (which can be a container/column/strip). It also allows you to set the position of a few elements in relation to each other. |
| 6 | Italics & Underline | Click on the Italics icon to skew font or choose the Underline icon to accentuate the font in your web project. |
| 7 | Line Height, Line Break, and Character | Use the drop-down menu to select a Line Height that will add space to the top and bottom of your font. This setting controls the distance between lines of text. Line breaks are essential for defining the rules for wrapping text on new lines. This feature becomes crucial when working with symbols and punctuations in Chinese, Japanese, or Korean (CJK) writing systems. You may choose between auto, loose, normal, strict, or anywhere in Line Break settings. The Character setting lets you increase the pixel space between the characters in your font. |
| 8 | Word Wrap | When this option is activated, the text will automatically be carried over to a new line when it reaches a set endpoint, such as the margins. |
Real-Life Examples of How to Style Fonts
Join us as we look at two of the many ways you can style fonts. We have chosen the button and text elements as examples, but be sure to contact us today if you have a specific business use case in mind. If you need any assistance, please feel free to contact Titan Support.
- Click the Styling icon and take note of the default text styling options already configured for the button.
- Use the drop-down list(s) to make changes to the font.
- Click the U icon to underline the word. You can also add spacing between each character.
Remember that, with Titan, you can style your buttons in three states: Default, Hover, and Clicked.
To read up on how to style your buttons, please review our Button Styling article.
Style a Text Element
- Click the Styling icon and take note of the default text styling options.
- Use the drop-down list(s) to make changes to the font.
