Home / Managing Global Styles

Typography

Tech Writers Team @ Ucraft

Last updated on Nov 08, 2024

Typography is a global styling approach that refers to the consistent use and styling of fonts and typographic elements of the widget. It involves establishing a set of typographic rules and guidelines to ensure consistency and visual harmony on your website.

Typography includes the following:

  • Heading: Allows you to choose the heading of your text to structure the content and indicate the hierarchy of different sections within your webpage.
  • Font: Allows you to choose a set of fonts or typefaces to be used throughout the design. You can add a new font and manage the fonts, to do so, click + New Font. Make the necessary configuration and click Save.
  • Style: Allows you to choose the style of the text, define the font size, determine the spacing between lines of text, and specify the spacing between lines of text. 
    Note: You can enter negative values for letter spacing for the Title and Paragraph widgets.
  • Color: Allows you to establish a consistent color scheme for text elements of the widget.
  • Alignment: Allows you to determine the position of the text inside the widget.
  • Formatting: Allows you to choose whether your text is capitalized, underlined, or strikethrough.
  • Text Shadows: Allows you to apply a shadow effect to the text content of an element. You can create a visual shadow behind the text, enhancing its visibility and providing a stylistic effect.
  • Text Overflow: Allows you to manage how your text is displayed when it exceeds its container, ensuring a cleaner and more controlled layout.
  • Text Wrap: Allows you to control how text fits within its container by wrapping it onto multiple lines if there’s not enough horizontal space. It ensures the text flows or breaks onto the next line to prevent overflow.

Tip:

You can use the Dotted Menu to reset or override styles for the Title and Paragraph widgets. To do so:

  1. Click the Dotted Menu in the right corner of Typography.
  2. Select Reset Styles to discard the changes made to the widget and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, color, alignment, etc.) and the elements derived from the base one.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.