Skip to main content

Typography

Typography settings control how text appears in your popup. Good typography is crucial for readability and brand consistency.

Font Family​

Available Fonts​

XBuilder supports:

System Fonts:

  • Arial
  • Helvetica
  • Georgia
  • Times New Roman
  • Courier New
  • And more...

Google Fonts:

  • 500+ fonts available
  • Auto-loaded when selected
  • Popular choices: Inter, Roboto, Open Sans, Poppins

Setting Font Family​

  1. Select a text element
  2. Go to Style section
  3. Choose font from dropdown
  4. Or search Google Fonts

Font Loading​

Google Fonts are automatically loaded when you use them. The font loads before the popup appears to prevent flash.

Font Size​

Size Values​

Set font size in pixels:

ContextRecommended
Small text12-14px
Body text16-18px
Subheadings20-24px
Headings28-48px

Responsive Font Sizes​

Set different sizes per device:

Desktop: 18px
Tablet: 16px
Mobile: 16px

Using Relative Units​

While pixels are default, you can use em/rem in custom CSS:

.my-text {
  font-size: 1.125rem; /* 18px */
}

Font Weight​

Weight Scale​

WeightNameUse
300LightSubtle text
400RegularBody text
500MediumEmphasis
600Semi-BoldSubheadings
700BoldHeadings
800Extra-BoldImpact
900BlackMaximum impact

Font Weight Tips​

  • Not all fonts support all weights
  • Use 2-3 weights per design
  • Bold for hierarchy, not emphasis

Line Height​

Values​

Line height controls vertical spacing between lines:

ValueEffect
1Tight (no extra space)
1.2Compact
1.5Normal (recommended)
1.75Relaxed
2Spacious

Best Practices​

  • Body text: 1.5-1.7
  • Headings: 1.1-1.3
  • Large text: 1.2-1.4

Letter Spacing​

Values​

Adjust space between characters:

ValueEffect
-0.05emTighter
0Normal
0.05emLooser
0.1emSpaced
0.2emVery spaced

Use Cases​

  • Tighter: Large headings
  • Looser: Uppercase text
  • Normal: Body text

Text Color​

Setting Colors​

Use:

  • Color picker
  • Hex: #333333
  • RGB: rgb(51, 51, 51)
  • RGBA: rgba(51, 51, 51, 0.8)

Color Contrast​

Ensure readability:

BackgroundText
WhiteDark gray (#333) or black
BlackWhite or light gray
ColoredTest for contrast

WCAG Guidelines​

Minimum contrast ratios:

  • Normal text: 4.5:1
  • Large text: 3:1
  • Check with contrast tools

Text Alignment​

Options​

AlignmentUse
LeftDefault, natural reading
CenterHeadings, short text
RightSpecial cases, RTL
JustifyLong paragraphs (careful)

Responsive Alignment​

Desktop: Left
Mobile: Center

Text Transform​

Options​

TransformExample
NoneAs typed
UppercaseALL CAPS
Lowercaseall lowercase
CapitalizeEach Word

Best Uses​

  • Uppercase: Labels, buttons, accents
  • Capitalize: Titles
  • Lowercase: Stylistic choice

Text Decoration​

Options​

DecorationUse
NoneDefault
UnderlineLinks, emphasis
Line-throughPricing, deleted

By default, links may be underlined. Customize:

Text Decoration: None
Color: Brand color
Hover: Underline

Text Shadow​

Properties​

PropertyDescription
X OffsetHorizontal position
Y OffsetVertical position
BlurShadow blur
ColorShadow color

Example Values​

Subtle shadow:

X: 0px
Y: 1px
Blur: 2px
Color: rgba(0,0,0,0.1)

Bold shadow:

X: 2px
Y: 2px
Blur: 4px
Color: rgba(0,0,0,0.3)

Typography Scale​

Create consistent hierarchy:

Display: 48px / 700 / 1.1
H1: 36px / 700 / 1.2
H2: 28px / 600 / 1.25
H3: 24px / 600 / 1.3
H4: 20px / 600 / 1.4
Body: 16px / 400 / 1.6
Small: 14px / 400 / 1.5
Caption: 12px / 400 / 1.4

Font Pairing​

Common Combinations​

HeadingsBody
Playfair DisplayRoboto
MontserratOpen Sans
PoppinsInter
OswaldLato

Guidelines​

  • Sans-serif + Sans-serif: Modern
  • Serif + Sans-serif: Classic contrast
  • Limit to 2 fonts maximum

Responsive Typography​

Mobile Adjustments​

Desktop → Mobile
H1: 36px → 28px
H2: 28px → 24px
Body: 16px → 16px (keep)

Why Adjust?​

  • Smaller screens need smaller text
  • Maintain readability
  • Preserve proportions

Best Practices​

  1. Readability first — 16px minimum for body
  2. Limit font count — 1-2 families max
  3. Establish hierarchy — Clear size differences
  4. Consistent weights — Use 2-3 per design
  5. Line length — 45-75 characters per line
  6. Test on devices — Verify all screen sizes

Common Mistakes​

❌ Too many fonts ❌ Body text under 14px ❌ Low contrast colors ❌ Inconsistent sizing ❌ Missing hierarchy ❌ Centered long paragraphs

Troubleshooting​

Font not loading:

  • Verify font name spelling
  • Check internet connection
  • Clear browser cache

Text hard to read:

  • Increase font size
  • Improve contrast
  • Increase line height

Inconsistent appearance:

  • Check font weight availability
  • Verify responsive settings
  • Look for CSS conflicts