Text Styling in Global Styling

In Web Studio > Global Styling > Text Styling, you set the default typography for your entire site. These settings apply to paragraphs, headings (H1–H6), quotes, and links, ensuring your text looks consistent and adapts properly to desktop, tablet, and mobile.

⚡ Why it matters

Keeps typography consistent across your whole site.
Automatically adjusts between desktop and mobile views.
Saves time – you never need to manually resize or restyle text inside blocks.
Avoids broken designs (custom inline styles don’t scale on mobile).

What You Can Style

When you open Text Styling, you’ll see a list of elements you can configure:

Paragraph (body text)
Headings H1–H6 (page title down to small subheading)
Quote (styled for pull quotes/testimonials)
Text Links (default state)
Text Links on Mouse Over (hover state)

Clicking on any element opens controls for:

Font Family (choose from your added fonts)
Font Size (in px)
Letter Spacing (space between characters)
Line Height (space between lines)
Text Color (inherit main text color by default, can override per element)

Desktop vs Mobile

At the top of the Text Styling panel, toggle between Desktop and Mobile.

Desktop settings control how text appears on large screens.
Mobile settings let you scale down for smaller devices.

This separation is critical. If you manually resize text in the Web Studio, the same size will apply everywhere—often breaking layouts on mobile. Setting it globally ensures proper scaling.

Recommended Base Sizes

Your text hierarchy should feel natural: start with the paragraph size as your foundation and scale your headings up step by step. This creates balance and makes it effortless for visitors to scan your content.

Think of it this way: the paragraph is your baseline voice, and each heading is a louder or more emphasized version of it.

Desktop (large screens)

Paragraph: 18px (comfortable, readable baseline)
H6: 20–22px (slightly larger, for subtle sublabels)
H5: 24–26px (good for small section titles)
H4: 28–32px (clearer section headings)
H3: 36–42px (strong sub-section heading)
H2: 48–56px (major section divider)
H1: 64–72px (your hero headline — big and bold)

Line height: ~1.5 for paragraphs, 1.25–1.35 for headings.

Mobile (small screens)

Mobile screens are tighter, so use gentler steps between sizes. This keeps headings powerful without taking over the whole viewport.

Paragraph: 16–17px (still comfortable to read)
H6: 18–19px
H5: 20–22px
H4: 22–26px
H3: 26–30px
H2: 30–36px
H1: 36–44px (max — large enough to stand out, but not overwhelming)

Line height: ~1.6–1.7 for paragraphs, 1.3–1.4 for headings.

💡 Pro Tip

Imagine moving “up the ladder” from paragraph text. Each step should feel noticeably bigger, but not jarring. On desktop, you can afford bold leaps (10–12px jumps for big headings). On mobile, keep steps smaller (4–6px) so text fits neatly and doesn’t crowd the screen.

Styling Quotes

Quotes have their own text style under Quote. This is useful for:

Testimonials
Pull quotes in blog articles
Highlighted text sections

Keep quotes slightly larger or styled differently (e.g., italic or lighter weight) to visually separate them from body text.

Styling Links

There are two sections for links:

Text Links → Default color, underline on/off
Text Links on Mouse Over → Hover color, underline on/off

Best practices:

Use a different color from body text so links are easy to spot.
Choose a color that remains clearly visible on both dark and light backgrounds.
Keep underline enabled for accessibility (especially for long text passages).
For hover, change color and/or underline to give clear feedback.

Confirming Changes

When you’ve set up your typography:

Click Confirm (bottom-right) to save your changes.
Your changes apply globally across the site.
Open the Web Studio and add text blocks using H1–H6, Paragraph, or Quote to see them in action.

Best Practices

Set text styling first before building your site.
Avoid inline overrides in the Web Studio (e.g., selecting a heading and manually making it 45px). That breaks responsiveness.
Check on mobile often—typography that looks great on desktop may be too large on phones.
Stick to a scale (golden ratio or modular scale) so text feels balanced.
Use no more than 2 font families (e.g., one for headings, one for body text).

Troubleshooting

My headings are too big on mobile: Adjust sizes in Text Styling → Mobile (don’t fix manually in blocks).
My links don’t match my brand color: Update Text Links and Hover colors here.
Some text isn’t updating: It may have custom inline styles applied. Reset the element to its default (e.g., switch it back to H2) to inherit global settings. If that doesn't work you can Remove Font Style by clicking the far right icon in the text edit panel:

✅ Once configured, your text styles ensure every heading, paragraph, and link across your Recrevio site is readable, consistent, and mobile-ready.