Text Effects & Styling
Overview
Chitmunk gives you 5 text effects you can apply to any text element: Outline, Drop Shadow, Outer Glow, Gradient Fill, and Letterpress. Effects stack: you can combine outline + shadow + glow on the same text element, and each effect has its own independent controls.
If you want to get started quickly, the 12 one-click presets (Fantasy Title, Gold Foil, Neon Glow, and more) apply a tuned combination of effects in a single click. You can apply a preset and then tweak individual settings from there.
All text effect settings are in the Text Effects section of the properties panel. Select any text element on the canvas to see them.
Text Outline
A text outline adds a colored stroke around the outside of each character. It's one of the most practical effects in the set, a thin white outline makes text readable over almost any background image without needing a separate shadow or overlay.
Properties:
- Color: Any color, including semi-transparent values.
- Width: 1–10px. 1–2px is subtle and clean; 4–6px gives a bold graphic look; anything above 6px starts to fill in narrow letterforms.
Tip: A 1–2px white outline is the fastest way to make body text readable over a busy card background. It's subtle enough that players won't notice it, but it makes a real difference in legibility.
Drop Shadow
Drop shadow renders a copy of the text behind the original, offset and blurred. It creates depth and separation between text and the background.
Properties:
- Color: Supports full rgba values, so you can control both color and opacity independently. A dark semi-transparent shadow (e.g., rgba(0,0,0,0.5)) usually looks more natural than solid black.
- Blur: 0–20px. Low blur (0–3px) gives a hard-edged shadow, great for comic or retro styles. Higher blur (8–15px) gives a soft, diffuse shadow for a modern look.
- X Offset: -20 to 20px. Positive values push the shadow right, negative push it left.
- Y Offset: -20 to 20px. Positive values push the shadow down, negative push it up.
Tip: For subtle depth, use 2–3px blur with a low-opacity shadow and a 1–2px offset in each direction. For a retro/comic look, set blur to 0 and offset to 3–5px with a fully opaque color.
Outer Glow
Outer glow adds a colored halo radiating outward from the edges of each character. It's distinct from drop shadow, the glow is centered on the text rather than offset, and it typically uses a bright or saturated color.
Properties:
- Color: The glow color. Bright, saturated colors work best, pale glows tend to disappear on light backgrounds.
- Blur Radius: 1–30px. Controls how far the glow extends from the text.
- Strength: 1–5. Controls the intensity of the glow, higher values make the halo more opaque and punchy.
Outer glow is ideal for fantasy titles, neon signs, magic/arcane text, and ethereal or dreamlike effects. It pairs well with a dark card background where the glow has room to breathe.
Gradient Fill
Gradient fill replaces the solid text color with a color gradient, letting you create metallic, fiery, icy, or rainbow text without needing a separate image or mask.
Properties:
- Type: Linear (a straight transition from one color to another), Radial (circular, radiating from the center outward), or Conic (sweeping around a center point like a color wheel).
- Color stops: Two colors define the gradient. Pick a start color and an end color.
- Angle (linear only): 0–360°. 0° is left-to-right, 90° is top-to-bottom, 45° is diagonal. Adjusting the angle gives you control over the direction of the color transition.
Tip: Gold foil text is a classic use case, try a linear gradient from a warm amber (#C8860A) to a bright gold (#FFD700) at a 45° angle. The Gold Foil preset does exactly this if you want a starting point.
Letterpress
Letterpress simulates the look of text physically pressed into (or raised from) a surface. It's a subtle, elegant effect best suited for headers and titles where you want texture without heavy visual noise.
Styles:
- Raised: The text appears to come up off the surface, with a light highlight above and a dark shadow below each character.
- Inset: The text appears pressed into the surface, with the opposite highlight/shadow arrangement.
Letterpress works best on medium-toned backgrounds where both the light and dark parts of the effect are visible. On very light or very dark backgrounds, one half of the effect tends to disappear.
Effect Presets
The presets panel gives you 12 one-click effect combinations with pre-tuned settings. Each preset applies a full set of effects to the selected text element, replacing any effects you had before.
Available presets:
- Fantasy Title: Warm outline + strong drop shadow, evokes classic fantasy typography.
- Gold Foil: Linear gradient (amber to gold) at 45°, light outline.
- Silver Metal: Radial gradient (white to dark grey), metallic sheen.
- Fire: Orange-to-red gradient with a warm glow. Turn up the heat.
- Frozen Ice: Blue-to-white gradient with a cool outer glow.
- Arcane: Purple glow, gradient fill, and drop shadow. Magic-ready.
- Blood Moon: Deep red glow with a dark gradient. Ominous and bold.
- Neon Glow: Bright cyan or magenta outer glow, minimal shadow. Great for sci-fi themes.
- Engraved: Inset letterpress effect. Clean and classic.
- Drop Shadow: Simple soft drop shadow, no other effects. A reliable workhorse.
- White Outline: Clean 2px white outline, nothing else. Maximum readability.
- Ethereal: Soft white glow at high blur radius. Dreamy and delicate.
After applying a preset, all individual effect controls remain editable. Tweak any setting to make it your own. The Reset button clears all effects and returns the text to plain styling.
Curved Text (Text Path)
The text path option bends text along an arc. It's useful for circular badge layouts, arching titles at the top of a card, and any design that calls for text that follows a curve rather than a straight baseline.
Options:
- Straight: Default. Text flows on a flat horizontal baseline.
- Arc Up: Text curves upward along an arc (the middle of the text is higher than the ends).
- Arc Down: Text curves downward (the middle dips lower than the ends).
Tip: Arc Up at the top of a card and Arc Down at the bottom is the classic circular badge arrangement. Pair with a circular shape element behind the text to complete the look.
Text Transforms
Text transforms change the capitalization of text at render time, without modifying the underlying text content. This means your original text is always preserved, if you're pulling values from CSV data, the source data stays unchanged.
Available transforms:
- UPPERCASE: All characters rendered in caps.
- lowercase: All characters rendered in lower case.
- Title Case: First letter of each word capitalized.
Transforms are especially handy for card titles that should always appear in caps regardless of how the CSV data is entered. Set the element to UPPERCASE and your contributors can type naturally without worrying about consistent capitalization.
Auto-Shrink vs Clip
When text content is longer than the bounding box of the text element, you have two options for how to handle the overflow:
- Clip: Text is rendered normally and cut off at the edge of the bounding box. Characters that extend past the box are invisible. This is the default behavior and works well when you know the text will always fit.
- Shrink to Fit: The font size automatically decreases until the entire text content fits within the bounding box. The minimum font size and line behavior are respected.
Shrink to Fit is the right choice for CSV-driven text elements where some values will be longer than others. It ensures every card is readable without manual adjustment per row, a card with a short name and one with a long name both display correctly.
Tip: Use Shrink to Fit on name and description fields in CSV projects. Set the font size to the largest you want (for short values), and let the shrink handle the rest. Just make sure your bounding box is large enough to give text room to shrink into.
Line Height & Letter Spacing
These two controls give you fine-grained typographic control over how text fills its bounding box.
Line Height controls the vertical space between lines of text. The value is a multiplier relative to the font size:
- Default is 1.3: a comfortable reading line height for most body text.
- Range is 0.5–3.0. Values below 1.0 cause lines to overlap (useful for stylized display text).
- Tighten line height (1.0–1.1) for compact stat blocks or small-text areas. Loosen it (1.5–2.0) for airy, readable body copy.
Letter Spacing controls the horizontal space added between each character:
- Range is -10 to 50px.
- Negative values tighten tracking, which can help wide headers fit in narrow spaces.
- Positive values add space between characters, giving text an elegant, spaced-out quality, commonly used for subtitle text or labels.
Tip: Wide letter spacing (10–20px) on a short, uppercase header looks great for section labels and card categories. Keep it to 1–3 words, long sentences with wide tracking become hard to read quickly.
Tips & Best Practices
- Less is more. One or two effects per text element usually looks better than stacking all five. If your text needs three effects to be readable, the real problem might be the background contrast.
- Use outline for readability over images. A 1–2px white outline is the most reliable way to make text legible over a photographic or illustrated background without an opaque overlay box.
- Start with a preset. Even if the preset isn't exactly right, it gives you a tuned starting point to work from. Adjust one setting at a time until you get the look you want.
- Test at actual card size. Effects that look great zoomed in at 200% can disappear or become muddy at actual print size. Use the zoom controls to check your design at 100% or smaller before finalizing.
- Consider CSV interactions. Outer glow and gradient fill can look messy when combined with long CSV values that cause text to wrap across multiple lines. Test your effects against your longest expected text values, not just a sample word.
- Curved text and letter spacing interact. On Arc Up / Arc Down paths, letter spacing affects how spread out the characters appear along the arc. Adjust it after setting your curve to get the spacing right.