Colors and fonts
Pick your fonts and colors together, on a real store
Choose a heading font, a body font and a type scale, paste your colors, and watch a working storefront change as you go. Every pair is checked for readable contrast.
Free, no sign-up. Fonts are free to use under the SIL Open Font License or already on every device. Nothing leaves this browser.
Colors only? Palette visualizer Palette generator
Autumn table
Stoneware for every day
Hand thrown in small batches and glazed by hand, so no two pieces are quite alike.
Our storyMade to be used
Every mug, plate and bowl goes through the dishwasher and the oven, because good stoneware should not live in a cupboard.
- AaH1 49
- AaH2 39
- AaH3 31
- AaH4 25
- AaH5 20
- AaH6 16
- AaBody 16
- AaSmall 13
Your type and colors on a storeSee it on a working store
Autumn table
Stoneware for every day
Hand thrown in small batches and glazed by hand, so no two pieces are quite alike.
Our story
Made to be used
Every mug, plate and bowl goes through the dishwasher and the oven, because good stoneware should not live in a cupboard.
- AaH1 49
- AaH2 39
- AaH3 31
- AaH4 25
- AaH5 20
- AaH6 16
- AaBody 16
- AaSmall 13
Checks on this store
- Text on the pageBody text needs 4.5:114.48:1AAA
- Text on cardsBody text needs 4.5:112.88:1AAA
- Button labelButton labels need 4.5:16.24:1AA
- Button on the pageShapes need 3:15.69:1Passes
- Sale tag labelTag labels need 4.5:14.93:1AA
- Body text size16 px or more reads without zoom on a phone16 pxPasses
- Smallest text12 px or more for prices and notes12.8 pxPasses
- Heading contrastA second font, or 200 heavier2 fontsPasses
Every check on this store passes.
Fonts
Colors
- TextHeadings, body copy, prices
- BackgroundThe page behind everything
- PrimaryBuy buttons, banners, the active tab
- SecondaryCards, the search field, panels
- AccentSale tags, offers, small highlights
Pairings
Four stores, four pairings
Each example pairs a heading face with a body face of another kind, sets a scale and keeps every color pair readable. Open one in the tool to make it yours.
Baked today
Sourdough by morning
Slow loaves, laminated pastry and granola, baked before sunrise and ready for pickup.
Our story
Flour, water, time
Our starter is twelve years old and every loaf proves for a full day.
- AaH1 52
- AaH2 42
- AaH3 33
- AaH4 27
- AaH5 21
- AaH6 17
- AaBody 17
- AaSmall 14
Bakery: Fraunces and Work Sans
A soft serif with warm curves for the headings and a plain sans for menus and prices. A 1.25 scale keeps long menus calm.Open this pairing
Trail season
Pack light, go far
Packs, tents and runners tested on long trails, with weights listed on every page.
Our story
Tested outside
Every pack and tent spends a season on the trail before it reaches the store.
- AaH1 40
- AaH2 33
- AaH3 28
- AaH4 23
- AaH5 19
- AaH6 16
- AaBody 16
- AaSmall 13
Outdoor: Space Grotesk and DM Sans
A wide, technical sans in bold for the headings and a quiet sans for the specs. Dark page, bright primary, a tight 1.2 scale.Open this pairing
New ritual
Calm skin, every day
Short ingredient lists, sizes that last and refills that cut the packaging.
Our story
Fewer, better steps
Three products cover most routines, and each one names every ingredient.
- AaH1 67
- AaH2 51
- AaH3 38
- AaH4 28
- AaH5 21
- AaH6 16
- AaBody 16
- AaSmall 12
Skincare: Playfair Display and Manrope
A high contrast serif at medium weight for a calm, premium voice, set over a rounded sans that stays clear on ingredient lists.Open this pairing
Just pressed
Blue Hour on vinyl
Small pressings, listening notes for every record, and gear that does them justice.
Our story
Notes for every record
We write a short note on each pressing so you know what you are buying.
- AaH1 52
- AaH2 42
- AaH3 33
- AaH4 27
- AaH5 21
- AaH6 17
- AaBody 17
- AaSmall 14
Records: Bricolage Grotesque and Source Serif
A characterful grotesque in bold for the headings, with a book serif for liner notes and reviews. A 1.25 scale.Open this pairing
Type scale
Two numbers set every size
A scale multiplies the body size step by step, so headings, prices and notes stay in proportion on every page of the store.
Country sourdough
A 900 g country loaf with a dark, blistered crust. Proved for a full day, baked before sunrise and ready for pickup at eight.
Body size
Most stores read best at 16 to 18 px on a phone. Smaller body text forces a zoom on product pages and checkout.
Pack light, go far
Packs, tents and runners tested on long trails.
Ratio
A small ratio such as 1.2 suits long menus and catalogs. A large one such as 1.5 gives a landing page a bold, poster like headline.
Sourdough by morning
Slow loaves and laminated pastry, baked before sunrise.
Heading weight
Pair a heavy heading with a regular body, or two faces of different kinds. Either way buyers see at a glance what is a title and what is text.
On Tanqory
From a pairing to a store that sells
Choosing fonts and colors is the first hour of a brand. Tanqory takes the next ones off your team: a free theme to put them on, and AI that does the setup you would otherwise hire for.
Just pressed
Bookshelf speaker in sand
$119Sale
A compact two way speaker in a sand finish, sized for a shelf beside the turntable.
Finish: sand
Ships in 2 days
Every theme is free
Put your fonts and palette on any Tanqory theme at no cost. Themes are built in React and TypeScript and stay fully editable in the visual editor, so a type change never needs a developer. See themes
Set my theme in Fraunces and Work Sans
Theme fonts updated
- Fraunces
- Work Sans
AI credits included in every plan
Change the theme by asking
Describe the change in Studio and AI edits the theme for you, or generates a whole new one. Theme generation uses the AI credits included in every plan. See Tanqory AI
0%
Tanqory transaction fee
Your provider's own rate, not marked up
A 0% transaction fee
Connect your own Stripe, PayPal or Braintree account and pay a 0% Tanqory transaction fee on every plan. You pay your provider's own rate, never marked up. See payments
More free tools
Tools that work with this one
Start a palette in the generator, check it on email and phone in the visualizer, then come back here to set the type around it.
Palette visualizer
See five colors on a storefront, product page, order email, phone and social post, with contrast checks.Try it free
#2B1D14 #F6F6F4 #9A3F1C #ECEAE7 #8E5A10Color palette generator
Make a five color palette from a color or a photo, lock what you like and check contrast.Try it free
AI readiness checker
See whether AI shopping agents and search engines can read your store, with each fix named.Try it free
Questions about choosing fonts and colors
The help center covers themes, colors and Studio step by step.
Visit the help centerHow do I pick fonts that go together?
Pair two faces that differ in kind, such as a serif for headings and a sans for body text, or use one face with a clearly heavier heading weight. The pairing check in the tool flags headings that do not stand apart from the body.
Are these fonts free to use on my store?
Yes. The open faces in the tool are published under the SIL Open Font License, which allows commercial use, and the system stacks use fonts already on your visitors' devices. Host the font files with your site rather than loading them from a third party.
What is a type scale?
A type scale multiplies the body size by one ratio per step. With a 16 px body and a 1.25 ratio, the headings run 20, 25, 31, 39 and 49 px. Every heading size then follows from two numbers you can change at any time.
What body size should a store use?
16 px or more for body text, so product descriptions and checkout read without zooming on a phone. Keep the smallest text, such as prices and notes, at 12 px or more.
How are the colors checked?
Each pair the store shows is measured with the WCAG 2.2 contrast ratio: body text and labels need 4.5:1 and the button against the page needs 3:1. Fix contrast moves only lightness, so each color keeps its hue.
What do I get when I export?
Copy CSS gives custom properties for the five colors, both font stacks, the heading weight and every size in rem, plus base rules for body and headings. Download tokens gives the same values as design tokens in JSON.
Does the page slow down when I try many fonts?
No. Each font downloads only when you pick it, and only the Latin characters, from our own host. The page shows text in a system font until the file arrives.
Can I use these choices on a Tanqory store?
Yes. Every Tanqory theme is free and fully editable in the visual editor, so you can set the same fonts and colors there, or describe the change in Studio and AI edits the theme for you.
The help center covers themes, colors and Studio step by step.
Visit the help centerYour fonts and colors on a store that is ready to sell
Open a store, set the pairing and palette you checked here and launch with every pair already readable. The share link keeps the exact choice for whoever builds with you.
Baked today
Sourdough by morning
Slow loaves, laminated pastry and granola, baked before sunrise and ready for pickup.
Our storyFlour, water, time
Our starter is twelve years old and every loaf proves for a full day.
- AaH1 52
- AaH2 42
- AaH3 33
- AaH4 27
- AaH5 21
- AaH6 17
- AaBody 17
- AaSmall 14