By the end of this tutorial, you’ll have a multi‑size banner set in Viewst where headlines, CTAs, and legal lines automatically resize and stay readable across formats like 300×250, 320×50, 728×90, and 970×250 — without manual tweaking for every size.

This guide is designed for creative and production leads who need a predictable, scalable way to handle responsive text scaling in HTML5 display ads.

Looking for the broader theory first? See the related guide: Multi‑Size Banner Generator Fundamentals: Designing for Scaled Text Across Formats.

Prerequisites

Before you start, you should have:

• A Viewst account with access to the HTML5 editor

• A base design (or concept) for a display banner

• A clear messaging hierarchy:

  • H1 – primary headline

  • H2 – secondary line / subhead (optional)

  • Body – supporting copy

  • CTA – button text

  • Legal – disclaimers, T&Cs, or footnotes

• Your brand typography defined:

  • Primary and secondary fonts

  • Allowed weights and line heights

  • Minimum legible font sizes per device (e.g., 10–12 px for legal on desktop, larger on mobile)

You do not need to be a Viewst power user; this tutorial keeps every step self‑contained.

1. Create a Master Creative and Add Your Core Sizes

Goal: Set up a single master creative that governs all sizes in your multi‑size set.

Why this step matters
Viewst is built around a master creative: one design structure that drives dozens of sizes. Text and image changes sync across all sizes, while their exact pixel positions can be adjusted per size. This is essential for consistent text scaling.

Step-by-step

1. Create a new project in Viewst

   • From the dashboard, click Create → Banner set (or equivalent multi‑size option).

   • Choose an initial base size — for example 300×250 (a common mid‑range canvas).

2. Design your master layout

   • Add the following text elements as separate layers:

     • H1 (main headline)

     • H2 (optional subhead)

     • Body text

     • CTA (inside a button shape)

     • Legal line(s)

   • Use your brand fonts but don’t obsess over exact font sizes yet. You’ll formalize them with scaling rules shortly.

3. Add additional sizes into the same set

   • Use Viewst’s multi‑size feature to add formats such as:

     • 300×250 (medium rectangle)

     • 320×50 (mobile banner)

     • 728×90 (leaderboard)

     • 970×250 (billboard)

   • In Viewst, a single creative can contain dozens of sizes, and content (like text strings) stays synced across all of them.

4. Roughly place elements in each size

   • For each size, position H1, CTA, and legal where they’ll live.

   • Expect breaks: text will overflow or be too small/large — that’s fine. The goal right now is structure.

Most common failure at this step
Teams skip the master and start “designing per size.” That breaks syncing, so any global copy change (e.g., a new offer) forces manual edits across dozens of banners. Always start from a single master creative and add sizes into it.

2. Define a Typographic Hierarchy With Concrete Font Ranges

Goal: Turn your brand typography into explicit min/max ranges for each text type (H1, H2, body, CTA, legal).

Why this step matters
Multi‑size campaigns live or die on legibility. One static font size won’t work across 320×50 and 970×250. You need a rule system so that Viewst can scale text intelligently instead of shrinking everything until it’s unreadable.

Step-by-step

1. Map your text roles to priorities

   • Priority 1: H1

   • Priority 2: CTA

   • Priority 3: H2 / body

   • Priority 4: Legal

   This priority order will guide which elements are allowed to shrink more.

2. Set target font sizes for a mid‑range size (e.g., 300×250)

   • Example starting point:

     • H1: 24 px

     • H2: 16 px

     • Body: 14 px

     • CTA: 18 px

     • Legal: 10–11 px

3. Define min/max ranges per role

   • Example production‑ready ranges:

     • H1: 18–32 px (never smaller than 18 px)

     • H2: 14–24 px

     • Body: 12–18 px

     • CTA: 16–24 px (CTAs must remain obvious)

     • Legal: 10–14 px (smallest layer; can shrink more but must stay readable)

4. Write these ranges down

   • Save them in your team’s brandbook or as a Viewst note.

   • You’ll plug these numbers into Viewst’s size‑specific settings and/or styles so scaling behaves predictably.

Most common failure at this step
Letting every designer pick “what looks nice” per size with no numeric ranges. Over time this leads to mismatched font sizes, broken hierarchy, and inconsistent CTAs across markets. Commit to concrete min/max values now.

3. Configure Global Text Styles and Brand Rules in Viewst

Goal: Set up reusable text styles in Viewst so scaling rules are connected to roles (H1, CTA, legal), not individual text boxes.

Why this step matters
Brand control in the AI era depends on governed styles. When you define brandbook‑level rules once, AI‑driven features like Smart Resize and Instant Animator can work without breaking typography.

Step-by-step

1. Create text styles for each role

   • In Viewst, open your master creative and select the H1 text layer.

   • In the text / style panel, save it as a style, e.g., “H1 / Headline”.

   • Repeat for:

     • “H2 / Subhead”

     • “Body / Copy”

     • “CTA / Button text”

     • “Legal / Footnote”

2. Apply these styles to all relevant layers

   • In every size:

     • Assign H1 layers to the H1 style.

     • Assign CTA layers to the CTA style, etc.

   • This links every text instance to a single governed definition.

3. Lock brand attributes in your brandbook (if available)

   • In Viewst brandbook settings, define:

     • Font families

     • Font weights

     • Base line heights

     • Tracking/letter spacing

   • Lock attributes that should never change (e.g., font family for H1 and CTA).

4. Prepare for overrides

   • Decide what can be overridden per size:

     • Allowed: font size, sometimes line height

     • Not allowed: font family, weight, CTA label wording

Most common failure at this step
Manually editing font properties per layer instead of using styles. As the campaign grows, this makes it impossible to update typography centrally and guarantees inconsistency.

4. Add Sizes and Map Scaling Behaviors (Smart Resize Baseline)

Goal: Use Viewst’s multi‑size capabilities and Smart Resize behavior as the baseline for your scaling logic.

Why this step matters
Viewst’s Smart Resize and multi‑size sync ensure that text content updates once and flows everywhere, even though positions can change per size. This meshes perfectly with your min/max font rules.

Step-by-step

1. Verify your size list inside the same creative

   • Check the sizes sidebar and confirm all target formats are present.

   • Add more if needed (e.g., 160×600, 300×600) using Add size.

2. Use Smart Resize (if enabled)

   • Starting from your base size (e.g., 300×250), trigger Smart Resize or Add sizes from master.

   • Let Viewst automatically adapt layout and text boxes into the new sizes.

3. Check content syncing behavior

   • Change a word in H1 on the master size.

   • Confirm that the H1 text updates across all other sizes automatically.

   • Remember: text and image contents sync; exact position does not — you can reposition per size without breaking sync.

4. Note which sizes are most constrained

   • Typically:

     • 320×50 and 728×90 are hardest for text.

   • You’ll use these sizes to test the lower bound of your scaling rules.

Most common failure at this step
Designers duplicate the creative file per size instead of adding sizes inside one multi‑size creative. That kills syncing and makes text scaling rules nearly impossible to manage.

5. Set Size-Specific Font Rules: Headlines and Subheads

Goal: Define and test explicit font sizes per format for H1 and H2, following your min/max ranges.

Why this step matters
H1 and H2 carry most of the message. If they are too small on a leaderboard or too big on a mobile banner, your campaign performance suffers. AppsFlyer’s 2025 report saw 1.1 million creative variations across $2.4B in ad spend — tiny differences in legibility compound at that scale.

Step-by-step

1. Start from the mid‑range size (e.g., 300×250)

   • Set H1 to your baseline (e.g., 24 px).

   • Set H2 to 16 px.

   • Ensure line lengths are reasonable (no more than 2–3 short lines).

2. Adjust for large, roomy sizes (e.g., 970×250)

   • Increase H1 within your range, e.g., from 24 → 30 px.

   • Increase H2 proportionally, e.g., 16 → 20 px.

   • Keep the ratio similar: if H1 is 1.5× H2 in 300×250, aim for the same ratio in 970×250.

3. Adjust for small, tight sizes (e.g., 320×50, 728×90)

   • Reduce H1 toward your lower bound, e.g., 18–20 px.

   • Consider dropping H2 entirely on 320×50 or replacing it with a shorter line.

   • Enforce a maximum of one line for H1 on 320×50.

4. Record your size → font mapping

   • Example mapping:

     • 320×50: H1 18 px, no H2

     • 300×250: H1 24 px, H2 16 px

     • 728×90: H1 20 px, H2 14 px

     • 970×250: H1 30 px, H2 20 px

5. Implement these values in Viewst

   • For each size, select the H1 text layer and set the font size explicitly.

   • Repeat for H2.

Most common failure at this step
Trying to make the same headline copy fit all sizes without editing the text itself. Some sizes (especially 320×50) require shorter copy and not just smaller fonts.

6. Configure CTA and Legal Text Scaling Rules

Goal: Set distinct scaling rules for CTA and legal text so they stay visible and compliant across all sizes.

Why this step matters
CTAs drive clicks and legal lines keep you out of trouble. They need different rules than headlines.

Step-by-step

1. Set CTA rules per size category

   • Use your defined range (e.g., 16–24 px).

   • Example mapping:

     • 320×50: CTA 16 px, button height ~28–32 px

     • 300×250: CTA 18 px

     • 728×90: CTA 18–20 px

     • 970×250: CTA 20–22 px

   • Make sure CTA is always larger or bolder than body text.

2. Enforce CTA label consistency

   • Keep CTA text short: ideally 2–3 words, max 20–22 characters.

   • Maintain a canonical phrasing (e.g., “Get started”, “Shop offer”) across sizes.

3. Define legal text ranges and behavior

   • Legal is the only text allowed to approach your minimum size.

   • Example range: 10–14 px.

   • For smaller formats, allow slightly tighter line spacing but stay readable.

4. Plan legal content for different sizes

   • For tiny sizes:

     • Use shorter legal snippets or refer to a landing page.

   • For larger sizes:

     • Include the fuller disclaimer.

5. Implement in Viewst per size

   • For each banner size:

     • Select CTA text layer → set font size within your CTA range.

     • Select legal text layer → set font size and line height within your legal range.

Most common failure at this step
Letting legal shrink below readable size or letting CTA size float relative to body copy. This undermines both compliance and conversion.

7. Test, Iterate, and Save as a Reusable Template

Goal: Validate your scaling rules across all sizes and turn the setup into a production template.

Why this step matters
According to Adobe, 74% of creatives spend 50% of their time on repetitive tasks. The point of a Viewst‑based system is to invest once in a reliable text scaling framework and reuse it for future campaigns.

Step-by-step

1. Run a legibility pass on each size

   • Zoom out to 100%.

   • Ask: Can I read H1, CTA, and legal on a typical laptop screen and mobile display?

   • Flag any size where text feels cramped, tiny, or unbalanced.

2. Stress-test with worst‑case copy

   • Use the longest realistic headline you expect (e.g., 30 characters, matching Google’s short headline limit).

   • Paste in the longest legal line you’re likely to run.

   • Adjust font sizes or copy length for any size where text breaks.

3. Align across the team

   • Share the set within Viewst for review.

   • Collect feedback on:

     • Hierarchy (does H1 win?)

     • Brand feel (does typography look on‑brand?)

     • CTA clarity.

4. Save as a master template

   • Once approved, save the multi‑size set as a template:

     • Name it: “Display – Multi‑Size – Text Scaling v1.0”.

     • Document the min/max ranges in the template description.

5. Re-use with AI Smart Resize and AI Designer

   • For new campaigns:

     • Start from this template.

     • Let AI Designer populate structure and AI Smart Resize add or adjust sizes.

     • Your scaling rules and brandbook keep new variations in line.

Most common failure at this step
Not stress-testing with long copy or real legal text. The system works in ideal cases, then breaks when performance marketers push length limits.

Quick Reference: Example Text Scaling Table

Here’s a compact example you can adapt to your own brand.

• 320×50 (mobile banner)

  • H1: 18 px, 1 line

  • CTA: 16 px

  • Legal: 10–11 px, ultra-short

• 300×250 (mid‑range)

  • H1: 24 px

  • H2: 16 px

  • CTA: 18 px

  • Legal: 11–12 px

• 728×90 (leaderboard)

  • H1: 20 px

  • H2: 14 px (optional)

  • CTA: 18–20 px

  • Legal: 11–12 px

• 970×250 (billboard)

  • H1: 30 px

  • H2: 20 px

  • CTA: 20–22 px

  • Legal: 12–14 px

Use this as a starting point, then refine ranges based on your fonts, markets, and regulatory requirements.

FAQ: Troubleshooting Text Scaling in Multi‑Size Viewst Banners

1. Why does my headline look fine in one size but overflow in another?

Because content is synced but positions and sizes are independent. A headline that fits a 300×250 might overflow in 320×50.

Fix:

• Shorten the headline for the smallest sizes.

• Lower the font size for H1 within your defined min range for that specific size.

• Consider dropping H2 or body copy in ultra‑tight sizes.

2. How small can legal text be without risking readability?

For most desktop placements, a practical floor is 10–11 px for legal, assuming a clean sans‑serif font and adequate contrast. On mobile, consider 11–12 px.

In Viewst, define your legal style with a min range of 10–12 px and test at 100% zoom on a typical screen. Always confirm with your legal team.

3. Can I let Viewst automatically handle all font sizes with AI?

AI can remove a lot of drudgery (Smart Resize, AI Designer, Instant Animator), but font sizes still need human‑defined rules to preserve brand and hierarchy. Use AI to:

• Generate variants and layouts

• Duplicate and adapt to new sizes

But always anchor it with:

• H1/H2/CTA/legal min/max ranges

• Brandbook‑level type definitions

4. What if my brand uses multiple languages with longer words?

Multi‑language campaigns increase text length and word width.

Best practices:

• Design scaling rules around the longest language, not the shortest.

• Reserve more horizontal space for H1 and CTA in your master layout.

• For constrained sizes like 320×50, create language‑specific versions with shorter copy.

5. How is this different from using Google Web Designer’s text fitting?

Google Web Designer offers basic controls like reduce text size and truncate, and can expand or fix text containers. Viewst adds:

• A multi‑size master creative with synced copy across dozens of formats

• Brandbooks and governed styles for typography

• AI Smart Resize and Image Deflatening on top of editable HTML5 output

You’re not just fitting text into one banner — you’re running a governed system for an entire multi‑market display portfolio.

Configured this way, Viewst becomes the production infrastructure between design (Figma, Adobe) and media (ad servers, DSPs): you set the text scaling rules once, and your teams stop redrawing the same banners in 12 sizes every time the offer changes.