Widget fonts: the right typeface for 59 styles

How to use this list

WidgetCraft includes sans, serif, mono and condensed families. Where a style names another font, it is a free family you can download and import; the built-in alternative is given too.

How text should look in each style

Minimal

Set labels small and regular weight; let size, not boldness, carry the hierarchy. Give the main number at least half the widget height and keep everything else under 14 points.

Brutalist

Set every label in capitals with wide spacing, like a stencil or a shipping label. Make numerals huge, bold and tightly packed so they almost touch the frame.

Editorial

Pair a serif headline with tiny capitalised sans captions, the way a magazine credits a photo. Set numbers in the serif at display size and add a short caption underneath.

Bauhaus

Use a geometric sans in capitals and keep it small beside the shapes. Place numbers inside or next to a solid circle or square so the shape frames them.

Pixel art

Use a pixel font in capitals and keep words short; pixel fonts are wide. Show numbers like a game score, with a short label such as LV or HP in front.

Art Deco

Use tall thin capitals with wide letter spacing and center every line. Center the number and frame it with a thin gold line above and below.

Pastel

Use a rounded sans in a dark cocoa tone instead of black so it stays soft. Keep numbers bold and rounded and tint them slightly darker than the background.

Aesthetic

Write captions in lowercase and keep them short, like a note on a photo. Set numbers in a light serif and center them with a tiny label below.

Dark

Use off-white for main text and mid grey for labels so the contrast has two clear levels. Let the number glow in white against black and keep it medium weight.

Monochrome

Use weight instead of color: bold for the value, regular grey for the label. Make the number black and heavy; the label beneath in mid grey.

Glass

Use white text at full opacity; it must stay readable over any part of the wallpaper. Keep numbers white and medium weight, with labels at about 80% opacity.

Neon

Color text in one neon tone and keep labels in a dim violet grey. Make the number the brightest thing in the widget and add a shadow in the same color for glow.

Cyberpunk

Write labels as short codes in capitals, for example SYS or PWR, with wide spacing. Show numbers in yellow with a small cyan unit label beside them.

Vaporwave

Use wide capitals in white with a pink or teal label underneath. Center the number in white over the gradient and keep it bold.

Y2K

Use rounded bold type in indigo, and add a pink label for contrast. Put the number in a pill or bubble shape with a light gradient.

Retro

Use a chunky rounded face or a script for the title and plain sans for details. Set numbers thick and brown, with an orange stripe underneath.

Kawaii

Use extra-bold rounded type in cocoa and write in a friendly, short way. Center the number and add a small heart or star beside the label.

Cottagecore

Use a handwritten or soft serif font in dark green. Keep numbers modest in size and add a handwritten label.

Dark academia

Use a classical serif in parchment and set labels in small capitals. Use old-style serif numerals, centered, with a brass rule beneath.

Light academia

Use a refined serif in soft brown, with italic for a single word of emphasis. Center numbers in the serif and add a small capitalised label.

Material You

Use a friendly sans at medium weight in a dark tone of the same hue as the background. Make numbers large and rounded in the on-surface color.

iOS-style

Put a small bold colored title in capitals at the top left, then the value in black. Use a heavy sans for the main number and a grey caption beside it.

Nothing-style

Use a dot-matrix font for headings and a plain mono for small labels in capitals. Set the number in the dot-matrix font as large as the widget allows.

One UI-style

Use semi-bold headings and regular grey details with comfortable line height. Keep numbers bold and dark with a blue unit or label.

Neumorphic

Use a mid-dark slate for text; pure black looks pasted on. Center the number in slate and keep it semi-bold.

Neo-brutalist

Use a bold grotesque sans in black; no grey text at all. Make numbers heavy and black on the bright card.

Flat

Use white text on the color block with a paler tint for labels. Keep numbers white and semi-bold.

Line art

Use light-weight capitals with wide spacing in white. Use a thin weight for numbers so they match the strokes.

Gradient

Use white text with labels at about 80% opacity. Keep numbers white and bold so they hold up over both gradient colors.

Scandinavian

Use a plain regular sans in charcoal and avoid capitals. Keep numbers light and airy with a small label.

Japandi

Use a quiet serif and place text off-center with space around it. Keep the number moderate in size and anchor it to one corner.

Boho

Use a soft display serif in bark brown. Center the number under an arch or sun shape.

Botanical

Use deep green text instead of black. Keep numbers in dark fern with a small moss label.

Space

Use white capitals with wide spacing, like mission labels. Center the number in starlight white.

Terminal

Start lines with a prompt such as > or $ and write labels in lowercase. Print numbers as plain monospace output, not as large display type.

Newspaper

Write the title as a headline in bold serif and add a dateline in small capitals. Set the number like a headline figure with a caption beneath.

Handwritten

Use a handwriting font about 20% larger than you would a normal font; script reads small. Write numbers in the same hand and underline them with a red stroke.

Paper

Use graphite-grey text and a casual font. Write the number big with a marker-red underline.

E-ink

Use a book-style serif in black. Keep numbers black and plain; add a small label.

Gaming HUD

Use condensed capitals for stats such as HP, XP or LVL. Show values as fractions like 72/100 in bold.

Coquette

Use an italic serif for titles and keep labels small in mauve. Set numbers in the serif at a medium weight, never heavy.

Sakura

Use bark brown for text; pure black is too harsh on the pale pink. Use rounded numerals at a medium weight.

Grunge

Use a typewriter font in bone white; capitals for labels. Keep numbers plain and slightly spaced, like stamped digits.

Swiss

Use one neutral sans, left-aligned, in two sizes only. Make the number very large and tight, aligned to the left grid line.

White

Use charcoal for values and silver grey for labels. Keep numbers charcoal and medium weight.

Pink

Use deep berry for text so it reads clearly on pink. Make numbers berry and bold.

Gold

Use spaced capitals in a classical serif for labels. Set numbers in ivory with a thin gold rule beneath.

Blue

Use navy text and slate-blue labels. Keep numbers navy and semi-bold.

Green

Use forest green text for a softer look than black. Keep numbers forest green and semi-bold.

Purple

Use plum for text and heather for labels. Keep numbers plum and semi-bold.

Red

Use white capitals; labels in pale rose. Keep numbers white and bold.

Beige

Use cocoa brown instead of black. Keep numbers cocoa and medium weight.

Yellow

Use very dark text; white disappears on yellow. Keep numbers dark and bold.

Christmas

Use cream text on pine green with a festive display font for the title only. Center the number in cream and add a gold label.

Halloween

Use pumpkin orange for titles and fog grey for details. Center the number in orange.

Autumn

Use chestnut brown text in a warm serif. Keep numbers chestnut with a rust label.

Winter

Use light-weight capitals in midnight blue. Use thin numerals, centered.

Spring

Use stem green for text. Keep numbers green with a blossom-pink label.

Summer

Use deep teal text. Keep numbers teal and bold with a coral label.

Related

• How to choose widget fonts
• Widget color palettes
• All widget styles