The Typography Control stands as a central feature in ABC, offering extensive text customization capabilities, designed to give you complete control over your text’s appearance in Gutenberg blocks. It allows you to harmonize typography with the overall design of your site, offering an extensive range of settings from the fundamental to the more intricate.

Here’s how each feature within the Typography Control contributes to your design:

• Font Family: With a diverse selection of over 100 Google fonts, this feature empowers you to set the tone and voice of your site’s text to match your brand’s character perfectly.
• Font Size: Adjust the size of your text to ensure that it stands out appropriately or blends in smoothly with other design elements.
• Line Height: Control the vertical spacing between lines of text, which is crucial for readability and text flow on your site.
• Font Variant: Choose from a variety of font weights and styles, giving you the flexibility to highlight important content or create a subtle text hierarchy.
• Alignment: This option allows for the standard alignment of text within a block, offering left, center, right, or justified to suit the layout of your content.
• Color: Define the color of your text to align with your site’s palette, enhancing visual harmony or creating contrast for emphasis.
• Hover Color: Specify a color change when the cursor hovers over text, adding an interactive element to engage your users.
• Links Color & Links Hover Color: Customize the appearance of hyperlinks within your text, both in their idle and hover states, guiding users’ attention effectively.

Moving to the finer settings that allow for even more detailed customization, which you can find on Advanced Typography dropdown:

• Letter Spacing: This option lets you tweak the space between characters, improving readability or achieving a specific visual effect.
• Word Break: Determine how words should wrap or break at the end of a line, ensuring your text maintains a polished look in every block.
• White Space: Manage the space around text elements, which can be especially important for creating clean, uncluttered designs.
• Text Decoration: Apply or remove decorations like underlines, overlines, or strikethroughs to draw attention or signify special states of text.
• Decoration Color & Thickness: These settings provide further control over text decoration, allowing you to customize the visual weight and color to match your design aesthetic.
• Text Transform: Transform your text to uppercase, lowercase, or capitalize, tailoring the presentation to fit the context and design.
• Stroke: Define a stroke (outline) around your text to make it pop or to create a distinctive style.
• Stroke Color: Pick a color for your text stroke, complementing or contrasting with your text color as your design dictates.
• Stroke Hover: Set a stroke width and color that will be applied when a user hovers over the text, adding a dynamic layer to your text’s interaction.
• Text Orientation: Choose how your text is oriented, which can be a powerful option in creating visually engaging and unique layouts.
• Cursor: Decide the type of cursor displayed when hovering over text, enhancing the interactive experience.

Text shadow #

The Text Shadow feature in ABC allows you to add depth and visual interest to your text, making it stand out or creating a subtle aesthetic effect. This control provides six preset shadow styles for quick application, and you can fine-tune or layer up to three custom shadows for each text element.

Presets and Customization:

• Preset Shadows: Choose from six carefully designed presets for immediate shadow effects that cater to various design needs, from a soft outline to a pronounced depth.
• Custom Shadows: For more detailed customization, add up to three individual shadow layers to a text element, each with adjustable X (horizontal) and Y (vertical) offsets, blur radius, and color.

By applying a text shadow, you can enhance the legibility of text over complex backgrounds or simply add a flair that complements your overall design theme.

• Text Shadow: Found within the advanced typography dropdown, this setting adds dimension and depth to your text, creating a shadow with customizable X and Y offsets and blur radius.

Each of these tools within the Typography Control works in concert to provide an unparalleled level of design precision, enabling your text to communicate effectively and look impeccable on any device.

[Create a beautiful screenshot that shows all these options in action]