How to Use Secondary Text Styles in Image Templates

A secondary text style is the reusable treatment for supporting copy beneath or beside a primary headline: subtitles, captions, labels, metadata, and short body text. Define its role, choose readable type properties, and reuse that treatment across template text layers. If only part of a text box needs a different treatment, select that text range when the editor supports range formatting.

Keep the style subordinate without making it hard to read. Test the shortest and longest likely copy, check contrast on every intended background, and confirm how wrapping behaves at the final image size. In Figma, text styles can be applied to a whole text layer or a range, but color and resizing behavior are not part of the text style itself. In Adobe Express, Adobe describes selecting a range while editing text and applying attributes such as font, color, and size; some object effects still apply to the whole text object. Figma’s text-style documentation and Adobe’s guidance on secondary text styling explain those editor-specific differences.

1. Decide what the secondary text is for

Do not begin by choosing a smaller font size. First identify the job the copy performs. A subtitle adds context to a headline; a caption describes an image; metadata gives details such as a date or category; a label marks a status or short attribute; body copy explains something in a few sentences. These roles may share a base treatment, but they do not always need identical spacing, contrast, or emphasis.

Write down the role and where the text will appear. This prevents a generic “secondary” style from being used for text with different reading needs. A tiny date stamp and a two-line explanatory subtitle might both be secondary to the headline, yet the first can be compact while the second needs more line height and room to wrap.

Role	Typical use	Check especially
Subtitle	Clarifies or qualifies the headline	Relationship to headline and two-line wrapping
Caption	Names or explains image content	Contrast over changing imagery
Metadata	Date, category, author, or status	Legibility at small output sizes
Label	Short marker such as “New” or “Draft”	Whether color or a background carries meaning
Body copy	Supporting explanation	Line length, line height, and copy expansion

2. Choose the properties that create hierarchy

A secondary style should read as related to the headline, while making its lower priority clear. The hierarchy can come from a smaller size, lighter weight, different case, spacing, color, placement, or a combination. Avoid changing every property at once: if the subtitle differs in size, weight, color, and typeface, it may look like an unrelated component rather than a supporting level.

• Font family and weight: Keep the family consistent with the template system where possible. A lighter weight can establish hierarchy, but very thin strokes may disappear at small export sizes.
• Size: Use a clearly subordinate size, then inspect the actual rendered image rather than judging only at a zoomed-in canvas scale.
• Line height: Allow enough vertical room for multi-line copy. Tight leading can make a subtitle feel cramped; excessive leading can separate it from the headline.
• Letter spacing: Use deliberately, especially for uppercase labels. Tracking that looks subtle at a large artboard may become uneven or crowded in a small thumbnail.
• Paragraph spacing and indentation: These matter when text has multiple paragraphs or lists, but may not be relevant to a one-line caption.
• Color and fill: Choose these for contrast against the image or background. In Figma, color or fill is not included in a text style, so pair the text style with a color style or another documented convention.

There is no universal numeric ratio that makes secondary text correct for every image template. The right relationship depends on the output dimensions, viewing distance, image detail, and length of the content. Inspect the rendered asset at the size and context in which people will see it.

3. Create and apply a reusable style in Figma

Figma supports applying a text style to an entire text layer or to a range inside a layer. Its documented text-style properties include font family, weight, size, line height, letter spacing, paragraph spacing and indentation, decoration, case transform, lists, and OpenType features. Alignment, color or fill, and resizing behavior are outside the text style. Keep those separate in your design system and verify them on each layout where they matter. See Figma’s full property list and workflow.

1. Select a representative text layer that already has the desired typography, or create a sample subtitle or caption.
2. In the right sidebar’s Typography section, use the control to create a text style. Give it a descriptive name, such as Subtitle / Image, Caption / Compact, or Metadata / Small.
3. Save the style. Figma also documents creating a style from Local styles; use a name and description that make its intended role apparent to other editors.
4. To apply it, select the target text layer, open the Typography style picker, and choose the named style.
5. For a mixed-format text box, enter text editing mode and select the relevant range before applying a style. Confirm that the rest of the text retains its intended formatting.
6. Apply color, alignment, and resizing behavior as separate properties where needed. Check the result after any later style edits.

For a library style used across files, Figma says the style must be published as a library before it can be reused in another file. Anyone with edit access to a file can create and edit its styles; access to a library controls who can use styles from it. When changing a shared style, review the affected templates because a style update can change every instance that uses it.

4. Apply a secondary treatment in Adobe Express

Adobe employee Abhi G. described the current Adobe Express method in an April 20, 2024 community answer: enter text editing mode, select the range that should be secondary, then apply the desired text attributes, including font, color, and size. The answer notes that attributes such as shape, outline, and shadow are not applicable to a text range and affect the entire text object instead. The available controls may depend on the object and version of the editor, so inspect the result after applying them. Read the Adobe Community answer.

1. Open the text object and enter text editing mode.
2. Select the exact characters or words that form the subtitle, qualifier, or caption segment.
3. Apply the intended type attributes to that selection. Use range formatting for the text treatment itself; do not assume that object-level effects will be limited to the selection.
4. Exit text editing mode and inspect the complete object. Check the relationship between the styled range and the surrounding text, including punctuation and spaces.
5. Repeat on representative template variations and save the result as part of the reusable template or workflow supported by your Express setup.

5. Style text in a dynamically rendered image template

For a template system that renders images from parameters, keep the headline and supporting copy as distinct semantic text layers or parameters when the system allows it. Give the secondary layer its own explicit font, color, and background controls rather than relying on an operator to infer that it is secondary. Google’s native ad template documentation, for example, models secondary text with separate font, font-color, and background-color style keys. That is a useful template-design pattern, not a universal requirement for every editor.

Adobe Dynamic Media Classic Basic Templates use text layers and formatting controls such as font face, size, color, and justification. Dynamic text requires the relevant fonts to be uploaded and published to the Image Server; Adobe warns that an unpublished font can cause an image error rather than being substituted. Adobe also notes that font licensing can vary by delivery medium. Confirm the licensing terms for the intended use, publish the needed assets, and verify the final template URL and output. Adobe’s Basic Templates tutorial covers the text-layer and publishing workflow.

6. Test copy length, contrast, and output size

A style that looks polished with placeholder text can fail with real content. Test representative content before treating a template as finished:

• Shortest copy: Check whether a one-word subtitle looks stranded or too far from its headline.
• Longest expected copy: Check line breaks, clipping, overlap, and whether the secondary area pushes other elements out of place.
• Localization: Test the languages and scripts your template will support. Text expansion, glyph availability, and line breaking can change the layout.
• Multiple backgrounds: Review light, dark, busy, and low-detail images. Do not assume a single text color stays readable on all of them.
• Final dimensions: Export or render at the delivery size. Fine strokes, small type, and subtle spacing can behave differently when reduced.
• Range boundaries: Check that punctuation, spaces, and adjacent characters have the intended formatting when only part of a text object is styled.

For a library of templates, compare a set of representative outputs rather than relying on one attractive example. Use a consistent checklist: hierarchy, legibility and contrast, consistency across template instances, and editability when copy length or language changes. There is no authoritative numeric benchmark in the cited sources that proves one secondary style treatment works best, so make the decision from the actual design requirements and reviewable outputs.

7. Common problems and fixes

Problem	Likely cause	Fix
The whole text layer changes when only a phrase should change	The editor has the layer selected, not a text range	Enter text editing mode, select the characters, then apply range formatting where supported.
Figma’s text style changes type but not color	Color or fill is not included in Figma text styles	Apply the color separately and document the pairing, or use a color style alongside the text style.
Text wraps differently from the reference	Copy length, width, font metrics, resizing behavior, or language differs	Test expected long copy and localization, then adjust the text area or layout behavior deliberately.
Outline, shadow, or shape affects the entire text object	The effect is object-level rather than range-level in the editor	Use an object-level effect intentionally, or separate the content into distinct text objects if different effects are required.
A dynamic template returns an image error for text	A required font may be missing or unpublished, or a dynamic parameter may not match the system’s expected font identifier	Check the template’s font asset and publishing state; confirm the identifier and parameter format in the platform documentation.
Secondary text is unreadable on some images	The treatment assumes a fixed background color or has insufficient contrast	Review all intended backgrounds and adjust the color treatment or add a suitable background treatment where the editor and design permit.
A style update unexpectedly changes many assets	Those assets share a reusable style	Review all style instances before editing a shared style; use a separate named style when the role genuinely differs.

8. Review the rendered template with a screenshot

When a template is shown in a browser or preview page, a screenshot can make visual review easier: compare headline and secondary-copy hierarchy, check whether text wraps, and inspect the page at a chosen viewport. A screenshot captures a rendered page; it does not decide whether the typography is well designed. Review the source template and the final exported image for the actual production decision.

You can capture a page yourself with browser automation, or use a screenshot API when you need a repeatable image for review. ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL and returns an image or PDF; it is useful for capturing a browser preview as part of a template review workflow. Its features include viewport and device options, full-page capture, custom CSS and JavaScript, and waiting for a selector or network idle. See the ScreenshotNeo website and API documentation for request options.

9. Or skip the browser setup

Send one GET request with the preview URL to ScreenshotNeo. Replace YOUR_API_KEY and the example target with your own. The following examples save the response as a WebP file, as shown in the product-provided request pattern.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await (await import('node:fs/promises')).writeFile('shot.webp', bytes);

Use a page URL that actually displays the rendered template preview; the example URL above is only a placeholder. If the page requires authentication or dynamic content, consult the API docs for supported request settings and wait behavior. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each of these steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account to capture up to 1,000 screenshots a month with no card.

10. Performance, reliability, and cost considerations

For design work, the most useful capture is the smallest repeatable set that covers meaningful layout variation: a typical case, the longest copy, a difficult background, and any important viewport size. Full-page capture can help when the preview spans a long page; a fixed viewport is usually enough when evaluating a single image in context. Waiting for a relevant selector or for the page to become idle can reduce captures taken before a preview is ready. These choices should reflect how the preview is built; extra waiting and capturing unnecessary pages add time without improving the review.

Keep a small set of stable preview URLs and record which template version and copy each image represents. If a page is blank or blocked, do not treat the resulting image as a valid design review. ScreenshotNeo’s response includes verdict and billing headers, which can help distinguish a useful page capture from a failed or blocked result. For plans, the supplied pricing is Free: 1,000 monthly shots; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan. Choose a tier based on expected capture volume; no benchmark or savings claim is implied here.

FAQ

Should every template have a different secondary style?

No. Reuse a style when the role and output needs match. Create a distinct named style when a label, caption, or subtitle has meaningfully different legibility or layout requirements.

Can I style only a few words in a text box?

Yes, in editors that support range-level formatting. Figma supports applying a text style to a range, and Adobe Express guidance describes selecting a range before applying text attributes. Confirm which properties apply to the range versus the whole object.

Does a Figma text style also set color and alignment?

No. Figma’s documented text-style properties do not include color or fill, alignment, or resizing behavior. Handle those properties separately.

Do secondary styles improve a template by a measurable amount?

The cited documentation explains workflow and supported properties, but provides no numeric benchmark for design effectiveness. Evaluate the rendered result against your own hierarchy, legibility, consistency, and editing needs.