Stroke Styles: Add Outlines and Borders to Bitmap Fonts
A comprehensive guide to applying and customizing font strokes (outlines). Learn to use width, color, position, and line styles to create professional and readable text.
Strokes (outlines) add definition to font characters and improve readability against busy backgrounds.
Applying a Stroke
Section titled “Applying a Stroke”To add a stroke, enable the Stroke option in the style editor. Once active, you can customize its appearance with the following properties.
Core Stroke Properties
Section titled “Core Stroke Properties”Stroke Width and Position
Section titled “Stroke Width and Position”- Width: Outline thickness in pixels. Thicker strokes carry more visual weight but can obscure details on small fonts.
- Stroke Type: Controls where the stroke is drawn relative to the character’s edge.
- Outer: The stroke is drawn entirely outside the character, preserving its original shape and making it appear larger. This is the most common type for improving readability.
- Middle: The stroke is centered on the character’s edge, creating a balanced outline.
- Inner: The stroke is drawn inside the character’s boundary, which can make the character itself appear thinner.
Line Caps and Joins
Section titled “Line Caps and Joins”These settings control corners and line endings — especially important for stylized or script fonts.
- Line Cap: Determines the style for the ends of open paths.
- Butt: Flat, squared-off ends.
- Round: Soft, rounded ends.
- Square: Squared-off ends that extend slightly.
- Line Join: Defines how corners are rendered where lines meet.
- Miter: Sharp, pointed corners.
- Round: Smooth, rounded corners.
- Bevel: Flat, angled corners.
Stroke Fill and Color
Section titled “Stroke Fill and Color”The stroke itself supports the same fill options as the font body:
- Solid Color: Applies a single, uniform color.
- Gradient: Creates a smooth color transition.
- Image Pattern: Fills the stroke with a repeating texture or image.
Best Practices for Strokes
Section titled “Best Practices for Strokes”- Ensure high contrast between the stroke and the font’s main fill for readability.
- Use thinner strokes for smaller font sizes to prevent the outline from overwhelming the character shape.
- The Outer stroke type is generally the best choice for making text stand out from a background.