Set the typography styles of the block.
Text Color
color
Set the color value for the block and the block currentcolor value.
Use predefined colors
Most well-designed themes provide a color palette using CSS variables. Use these instead of static hex or RGB values to enable easy global updates and maintain consistency.
Font Size
font-size
Set the font size of the blocks content.
REM units for font sizing can improve accessibility
Using rem for font size keeps text consistent and scalable because it’s based on the browser’s default font size. This means text will automatically adjust if a user changes their browser settings for better readability.
Font Weight
font-weight
Set the font weight ranging from 100 to 900. In addition Normal ( 400 ) and Bold ( 700 ) can be chosen as quick shortcuts to these standard variants.
Each weight is dependent on the font family variants being available to the site.
Font Style
font-style
Set the font style:
none( remove any font style )normal( the default font style value )Italic
Text Alignment
text-align
Set the blocks text alignment:
leftcenterrightjustified
Justified text can be hard to read
Setting text-align to justify may create uneven word spacing, which may reduce readability, particularly for individuals with dyslexia or visual impairments.
Text Transform
text-transform
Transform the text between lower and uppercase characters including:
nonelowercaseuppercasecaptitilize
Text Decoration
text-decoration
Decorate the text:
noneunderlineoverlinestrike-through
Line Height
line-height
The line-height property sets the height of a line, controlling the spacing between lines of text.
Unitless property value
The line-height property supports unit-less values eg. 1.5
Using a unitless value makes it a multiplier of the font size, ensuring consistent and flexible spacing.
Letter Spacing
letter-spacing
The letter-spacing property adjusts the space between characters in text. Positive values improve readability in loose or uppercase text, while slight negative values can enhance cohesion in headings or script fonts. Overuse in body text may reduce legibility.
Font Family
font-family
Choose an available font family.
White Space
white-space
The white-space property controls how whitespace inside an element is handled.
normal(default): Collapses multiple spaces into one and wraps text as needed.nowrap: Prevents text from wrapping and keeps it on a single line.pre: Preserves whitespace and line breaks, similar to the<pre>tag.pre-wrap: Preserves whitespace but allows text to wrap if needed.