Manipulate text in graphics (font style, curves)

19 Graphics Creation – Manipulating Text in Graphics

Learning Objectives

• Select and apply appropriate font styles for a graphic.
• Convert live text to curves (outlines) and edit the resulting vector shapes.
• Analyse the impact of text manipulation on file size, editability and export format.
• Apply fills, gradients, strokes and patterns to outlined text.
• Manage layers so that an editable copy of the original text is retained.
• Consider accessibility, readability, font licensing and cross‑topic implications (animation, web, databases, e‑security).

1. Context – Why Text Manipulation Matters in the IT Syllabus

Text‑to‑curve techniques sit at the intersection of several Cambridge AS & A‑Level IT topics:

• Data processing & databases (Topics 8‑10): Vector graphics (including outlined text) are often stored as binary blobs or SVG markup in a database for catalogue or e‑commerce systems.
• Web programming (Topic 21): SVG outlines can be styled with CSS and animated with JavaScript, enabling resolution‑independent icons and interactive text effects.
• Animation (Topic 20): Outlined text can be broken into individual paths for frame‑by‑frame motion, masking or morphing.
• E‑security (Topic 7): Using open‑source or properly licensed fonts avoids legal risk when graphics are distributed commercially.
• Digital divide & accessibility (Topic 6): Choosing legible typefaces and ensuring sufficient colour contrast supports users with limited bandwidth or visual impairments.

2. Font‑Style Selection & Application

Font style defines the visual characteristics of a typeface. The main attributes you can control in most graphics editors are:

When to Adjust Tracking vs. Kerning

• Tracking – applied to whole words or paragraphs; set before converting to curves because it changes the overall width of the text block.
• Kerning – adjusts spacing for individual glyph pairs; also finalised before conversion because each glyph becomes an independent shape afterwards.

3. Converting Text to Curves (Outlines)

Converting text to curves turns characters into vector paths, removing the live‑text link to the font file.

3.1 Why Convert?

• Guarantees identical appearance on any system (no font substitution).
• Enables complex transformations (skew, warp, custom‑path editing).
• Allows node‑level effects such as cut‑outs, decorative extensions, or Boolean operations.
• Necessary for print workflows where the printer may not have the original font installed.
• Facilitates use of the graphic in SVG or other markup where outlines are required for reliable rendering.

3.2 General Procedure (Illustrated for Adobe Illustrator, Inkscape, CorelDRAW)

1. Select the live‑text object.
2. Choose Type → Create Outlines (Illustrator) or Path → Object to Path (Inkscape) or Convert to Curves (CorelDRAW).
3. The text becomes a grouped set of closed paths; each character can be ungrouped for individual editing.
4. Use the node/anchor tool to:
   • Add, delete or move anchor points.
   • Convert corner points ↔︎ smooth points.
   • Adjust Bézier handles to reshape curves.
   • Check path direction (clockwise/anticlockwise) for correct fill rules.
5. Apply fills, strokes, gradients or patterns as required.
6. Duplicate the original text layer (still live) and hide it – this preserves a revision‑ready version.

3.3 Common Post‑Conversion Effects

• Distorting characters along a custom path or envelope.
• Creating intersecting or overlapping glyphs using Boolean operations (Union, Subtract, Intersect, Exclude).
• Adding decorative flourishes directly to the outline.
• Applying gradients, patterns or variable‑width strokes that follow the exact glyph shape.

4. Practical Example – Logo Design “TechNova”

1. Choose a sans‑serif font Orbitron, set size 120 pt, weight Bold.
2. Adjust tracking to +20 px for a spaced‑out feel.
3. Fine‑tune kerning between “T” and “e”.
4. Convert the text to curves.
5. Ungroup the characters. For the “T”:
   • Add a diagonal anchor on the left stem.
   • Drag it outward to create a sharp cut‑off.
6. Draw a small triangle on the bottom of the “o” with the Pen tool, then Union it with the “o”.
7. Apply a linear gradient fill #0044ff → #00ccff and a 1 px white stroke.
8. Duplicate the original live‑text layer, hide it, and rename the curve layer “Logo‑Text‑Curves”.
9. Export as SVG for web use and as EPS for print.

5. Impact on File Size and Editability

Outlining adds anchor points, which increases file size and reduces later editability.

5.1 Example Calculation

• Word: “DataScience” (12 characters)
• Average anchor points per character after conversion: 15
• Total points added: 12 × 15 = 180 points
• Approximate size per point (AI/EPS): 0.02 KB
• Estimated file‑size increase: 180 × 0.02 KB ≈ 3.6 KB

5.2 Guidelines

• Keep point count low for simple designs – delete unnecessary nodes.
• Always retain a hidden layer with the original live text for future revisions.
• If the graphic will never be edited again, consider rasterising (PNG) to minimise file size.
• Be aware that excessive point density can cause rendering slow‑downs in web browsers (SVG) and may affect printing accuracy (colour‑management).

6. Layer Management & Export Considerations

6.1 Layer Best Practices

• Separate layers for text, background, decorative elements, and effects.
• After conversion rename the layer (e.g., “Logo‑Text‑Curves”).
• Keep a duplicate “Live‑Text” layer hidden but saved in the source file.
• Group related objects (all letters of a word) for quick selection.
• Use colour‑management profiles (sRGB for web, CMYK for print) before exporting.

6.2 Export Formats – When to Use Which

6.3 When NOT to Convert Text to Curves

• Future localisation or content changes – live text allows quick translation or copy updates.
• Large bodies of text (e.g., brochures, reports) – outlining dramatically inflates file size and removes spell‑check.
• Need for live‑text features such as automatic line‑wrapping, text‑on‑path, or accessibility‑focused screen‑reader tags.

7. Accessibility, Readability & Font Licensing

• Maintain a minimum contrast ratio of 4.5:1 (WCAG AA) between text colour and background.
• Print minimum point size: 6 pt for body text, 10 pt for headings.
• Prefer legible, open‑source fonts (e.g., Google Fonts) for projects that will be widely distributed, to avoid licensing breaches.
• When applying gradients or patterns, ensure the overall visual weight still meets contrast requirements.
• For web SVG, add aria‑label or title attributes to outlined text that conveys meaning to assistive technologies.

8. Cross‑Topic Connections (Cambridge IT Syllabus)

• Topic 20 – Animation: Outlined text can be split into individual paths and animated frame‑by‑frame or via motion‑tweening.
• Topic 21 – Web Programming: SVG outlines are styled with CSS, animated with JavaScript, and can be embedded directly in HTML.
• Topics 8‑10 – Spreadsheets, Modelling & Databases: Vector assets (including outlined logos) can be stored as BLOBs or SVG strings for dynamic generation of reports or product catalogues.
• Topic 7 – E‑Security: Using properly licensed fonts prevents copyright infringement; open‑source fonts reduce legal risk.
• Topic 6 – Digital Divide: Choosing web‑optimised SVG reduces bandwidth compared with raster images, supporting users on low‑speed connections.

9. Summary Checklist

• Choose an appropriate font family, weight, style and size (consider licensing and Unicode coverage).
• Set tracking and kerning, and leading for multi‑line text before conversion.
• Convert to curves only when the final appearance must be locked.
• Edit nodes carefully – add/delete points, smooth vs. corner, adjust Bézier handles, watch point count.
• Apply fills, strokes, gradients or patterns after conversion.
• Keep a hidden “Live‑Text” layer as a backup for future edits.
• Export in the most suitable format (AI/EPS/SVG/PDF for vectors; PNG/JPEG for raster).
• Check colour contrast, minimum point size and font licensing for accessibility and legal compliance.
• Document any cross‑topic links (e.g., SVG for web, outlines for animation) in project notes.

10. Assessment Questions

1. Explain the difference between tracking and kerning. Which is typically adjusted before converting text to curves, and why?
2. List three advantages of converting text to outlines before exporting a graphic for print.
3. Given a vector graphic where the word “Data” is converted to curves, describe step‑by‑step how you would create a “cut‑out” effect on the letter “D”.
4. Calculate the approximate increase in file size if converting a 12‑character word adds an average of 15 anchor points per character, and each point adds 0.02 KB to the file. Show your work.
5. Identify two situations where you should not convert live text to curves, and explain the rationale.
6. Discuss how outlined text can be used in a web‑based SVG icon and why this is preferable to a raster PNG for responsive design.
7. Briefly outline the legal considerations regarding font licensing when distributing a graphic that contains live text versus outlined text.