Your price is right. Your typography is wrong. The way a price looks on the page changes how it feels. A price in tiny grey text next to a giant red sale badge screams discount. A price in confident, well-spaced type next to clear value says worth it.
Here are five typography tweaks that frame your price as a fair deal without touching the number. Each one takes under 10 minutes. No developer needed.
1. Price Size Should Match Confidence, Not Urgency
Most stores shrink their regular price and enlarge their sale price. This tells the shopper the product is only worth buying on sale. Flip the logic.
Your current price should be the largest number on the page, in your body font, at a weight that feels stable. Not bold-red-urgent. Calm and confident. If you show a compare-at price, make it smaller, lighter, and crossed through. The deal is implied by the line-through, not by a bigger font.
.price--current { font-size: 1.5rem; font-weight: 600; color: #1a1a1a; }
.price--compare { font-size: 1rem; font-weight: 400; color: #999; text-decoration: line-through; }
The shopper reads the big number first. If it feels confident, they feel confident. If it feels apologetic, they hesitate.
2. Add Breathing Room Around the Price
Prices crammed between a product title and a buy button feel rushed. The shopper has no space to process the number. Adding 16 to 24 pixels of margin above and below the price gives it room to breathe. Room reads as confidence. Cramped reads as cheap.
.price { margin-top: 1.25rem; margin-bottom: 1.5rem; display: block; }
This is the simplest tweak on this list and the one that changes the most. Go check your product page right now. If your price has less than 16 pixels of space above it, fix it today.
3. Use the Same Font Family as Your Body Text
Many default themes use a different font for prices. Often a condensed or technical font that signals “this is a number, not a word.” That visual separation makes the price feel like a separate object from the product. Like it does not belong.
Switch the price to the same font family as your product description. Same family, different weight. The price becomes part of the product story, not a sticker slapped on top. This is subtle but it works. Premium brands do this consistently.
.price { font-family: var(--font-body); font-weight: 600; }
If your body font is a serif, your price in that serif looks considered. If your body font is a clean sans-serif, your price in that sans-serif looks modern. Either way, it looks intentional.
4. Kill the Red
Red prices say sale. Red prices say urgency. Red prices say this price is temporary and might go up. If your price is your actual price, not a temporary discount, red is working against you.
Switch your price colour to your body text colour or a slightly darker variant. Black, charcoal, deep navy. These colours say permanent. They say this is what it costs and we are not apologising for it.
.price--current { color: #1a1a1a; }
.price--sale { color: #1a1a1a; }
Save red for actual sale prices that have a deadline. If everything is red, nothing is urgent. If nothing is red, the one red price you do show will actually mean something.
5. Frame the Price With Value, Not With Savings
Most stores frame price by showing what the shopper saves. “Save $20” or “20% off.” This reinforces that the full price was too high. Instead, frame the price with what the product delivers.
Under your price, add one line that connects the number to the value:
- “$48 for a candle that burns for 60 hours” (cost per use)
- “$120 for a jacket you will wear 200 times” (durability framing)
- “$35 for a set of three” (quantity framing)
This line goes in your body font, at your body size, in a muted colour. It is not a sales pitch. It is context. The shopper does the math themselves and the price starts feeling reasonable.
.price-context { font-size: 0.875rem; color: #666; margin-top: 0.5rem; display: block; }
Test each framing for two weeks. Check which one lifts your add-to-cart rate. The right framing depends on your product category and your customer.
The Pattern Across All Five
Every tweak here does the same thing: it makes your price look like a permanent fact, not a temporary offer. Calm type, breathing room, consistent fonts, no red, value framing. Together, they make a $48 product feel like a $48 product, not a $70 product on sale for $48.
The shopper who feels your price is fair buys. The shopper who feels your price is a discount waits for a bigger one.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
