Text Effects & Styling
Overview
Plain text reads fine. A title that looks like gold foil gets picked up. 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 inspector, which starts closed; open it to see them. 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–20px. 1–2px is subtle and clean; 4–6px gives a bold graphic look; anything above 10px 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–30px. Low blur (0–3px) gives a hard-edged shadow, great for comic or retro styles. Higher blur (8–20px) 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: 1–40px. Controls how far the glow extends from the text.
- Strength: 1–8. 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:
- Colors: Two colors define the gradient. Pick a start color and an end color. Quick swatches such as Gold, Silver, Fire, and Ice fill them in for you.
- Angle: 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 gradient from pale gold to dark goldenrod at a steep angle. The Gold Foil preset applies a tuned version of this automatically 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
Style presets 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: Raised letterpress with a soft shadow, evokes classic fantasy typography.
- Gold foil: Pale-gold to dark-gold gradient at 170°, a dark outline, a shadow, and raised letterpress.
- Silver metal: White-to-dark-grey gradient with a thin outline, a shadow, and raised letterpress.
- Fire text: Yellow-to-red gradient with a dark outline and a warm outer glow.
- Frozen ice: White-to-blue gradient with a dark outline and a cool outer glow.
- Arcane: Purple glow, gradient fill, and a dark outline. Magic-ready.
- Blood moon: Red-to-dark gradient with a deep red glow, shadow, and outline. Ominous and bold.
- Neon glow: Bright green outer glow, no shadow or outline. Great for sci-fi themes.
- Engraved: Inset letterpress with a grey gradient and a tight shadow. Clean and classic.
- Drop shadow: Simple soft drop shadow, no other effects. A reliable workhorse.
- White outline: White text with a bold black outline and a soft shadow. Maximum readability.
- Ethereal: Soft blue-white glow at a high blur radius with a white gradient. Dreamy and delicate.
After applying a preset, all individual effect controls remain editable. Tweak any setting to make it your own. The Remove effects button turns all effects off.
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 your spreadsheet, the source data stays unchanged.
Available transforms:
- UPPER: All characters rendered in caps.
- lower: All characters rendered in lower case.
- Title: First letter of each word capitalized.
Transforms are especially handy for card titles that should always appear in caps regardless of how it is typed in your spreadsheet. 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: Check Shrink when it overflows and the font size decreases until the text fits the box, but never below the "no smaller than" size you set.
Shrink to fit is the right choice for text filled from a spreadsheet where some values will be longer than others. Every card stays readable without adjusting each row by hand: 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 filled from a spreadsheet. 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 Spacing & Letter Spacing
These two controls give you fine-grained typographic control over how text fills its bounding box.
Line spacing 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.
- Mind your longest text. Outer glow and gradient fill can look messy when combined with long spreadsheet 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.