uBlur
Basic Editing

How to Add Text to an Image Professionally

Typography basics, alignment tips, and tools for polished annotations.

By Sarthak KuchhalFounder, uBlurPublished 15/02/20256 min read
Editorial review

Reviewed by Sarthak Kuchhal

Builds and maintains uBlur's privacy-first screenshot editor and reviews core product guides against the live web app before major updates.

  • Product-first guides are reviewed against the current uBlur web editor.
  • We update workflows when the UI or export behavior changes.
  • If you spot drift, email [email protected] and we will review it.

Text overlays can turn a generic image into a polished tutorial, ad, or status update. Professional-looking typography hinges on three pillars: hierarchy, contrast, and alignment. This guide walks through a reusable recipe you can apply in Canva, Photopea, or even Keynote.

1. Define the Message First

Write the headline and supporting copy before you open a design tool. Aim for 6-10 words in the headline and a subline under 40 characters. Short copy keeps the layout clean and ensures legibility on mobile screens.

2. Choose Fonts that Complement the Image

  • Pair a bold sans-serif headline (e.g., Montserrat, Inter) with a lighter subline (e.g., Source Sans, Lato).
  • Avoid using more than two font families to maintain cohesion.
  • Use free libraries: Google Fonts is built into both Canva and Photopea.

3. Establish Hierarchy with Size & Contrast

Make headlines 1.5-2× the size of supporting text. Ensure color contrast ratios meet accessibility guidelines (WCAG AA: 4.5:1). Tools like WebAIM Contrast Checker help confirm your palette.

4. Use Alignment & Spacing to Keep it Clean

Align text to the left edge unless the composition calls for center alignment. Maintain consistent padding around text blocks (e.g., 48 px margin from image edges). In Canva, enable Position > Tidy up; in Photopea, use smart guides.

5. Add Supporting Elements

Consider subtle boxes, gradients, or arrows to improve clarity. Keep these lightweight so they reinforce the message without stealing attention.

Tools to Try

  • Canva: Rapid typographic layouts with templates and brand kits.
  • Photopea: Photoshop-style control in the browser for precise kerning.
  • Figma: Collaborative text styling with auto layout and design tokens.

Finishing Touches in uBlur

Drop the final graphic into uBlur to blur sensitive sections, add highlights, or create quick arrows before sharing internally. Because edits stay in your browser, it's perfect for rapid feedback loops.

Support uBlur

Enjoying this guide? Buy us a coffee.

uBlur stays free and privacy-first because readers like you pitch in. Every coffee keeps the editor fast, improves these tutorials, and helps us ship new blur and highlight tools.