Your product page typography is doing more work than you think. Customers cannot articulate good typography, but they can feel bad typography. Text that is too small, too tight, or using too many weights signals amateur. Text that breathes, has consistent weighting, and reads cleanly on mobile signals premium.
The good news is you do not need a new theme, a developer, or a redesign. Four CSS tweaks take under 20 minutes to apply and shift how your product pages feel. Each one is copy-paste ready.
1. Increase Line-Height to 1.6 for Product Descriptions
The problem: Most themes set line-height at 1.3 or 1.4 for body text. That is fine for navigation and buttons but cramped for paragraphs. Product descriptions with tight line-height feel dense and hard to read, especially on mobile where 60% of your customers are scrolling.
The tweak:
.product-description,
.product-description p {
line-height: 1.6;
}Add this to your theme custom CSS or a CSS section in your theme editor. Target the class your theme uses for product description text. If you are not sure, inspect the description area in your browser and find the container class.
Why it works: Line-height controls the vertical space between lines of text. At 1.6, each line has enough room above and below that the eye can track from the end of one line to the start of the next without effort. This is not about making text bigger. It is about giving text room to breathe. Premium brands use whitespace as a design element. This is the easiest way to add it to your product pages.
The difference between 1.4 and 1.6 line-height is subtle but immediate. Your descriptions will feel calmer, more deliberate, and easier to scan. Customers spend more time reading when text does not feel cramped.
2. Add Letter-Spacing to Uppercase Headings
The problem: Many themes use uppercase text for section headings, product titles, or labels like “DESCRIPTION” and “SHIPPING”. Default letter-spacing on uppercase text is zero. Letters sit tight against each other, which looks heavy and blunt. It reads as functional, not crafted.
The tweak:
h2, h3,
.product-title,
.section-heading {
letter-spacing: 0.5px;
}
/* For all-caps labels and buttons */
.product-label,
button.uppercase {
letter-spacing: 1px;
}Adjust the class names to match your theme. The rule of thumb: 0.5px for mixed-case headings, 1px for fully uppercase text. Never go above 2px. Anything more looks like a formatting error.
Why it works: Letter-spacing, also called tracking, is the horizontal equivalent of line-height. It gives each letter room to exist independently. High-end fashion and beauty brands use increased letter-spacing on uppercase text as a signature look. It adds a sense of intentionality. The text looks like it was set by a designer, not generated by a theme.
This tweak costs nothing and takes 30 seconds to apply. It is the single highest-impact font change you can make on a product page. Pair it with a slightly lighter font weight on uppercase labels and the effect doubles.
3. Limit Your Font Weights to Two
The problem: Your theme loads five or six font weights: 300, 400, 500, 600, 700, maybe 800. Your product page uses 400 for body, 600 for headings, 500 for buttons, 700 for prices, and 300 for captions. The result is visual noise. Each weight has a slightly different feel and the page becomes a patchwork of emphases with no clear hierarchy.
The tweak:
/* Use one weight for headings, one for everything else */
h1, h2, h3, h4, h5, h6,
.product-title,
.price,
.section-heading {
font-weight: 600;
}
/* Everything else: body, descriptions, labels, captions */
p, span, div, li, td, th,
.product-description,
.product-label {
font-weight: 400;
}
/* Remove any inline bold that breaks the system */
strong {
font-weight: 600;
}This forces a clear two-tier hierarchy. Headings and prices use 600. Everything else uses 400. Bold text inside paragraphs uses 600 to match the heading weight, which creates a consistent visual language.
Why it works: Font weight is a hierarchy signal. When you use two weights consistently, the eye instantly understands what is important and what is supporting. When you use five weights, the eye has to work harder to parse the hierarchy and the page feels busy.
Premium brands typically use two weights: a medium or semibold for display and headings, and a regular for body. Some go further and use a single weight for everything, relying on size and spacing for hierarchy. Two is the sweet spot for e-commerce. It gives you emphasis without chaos.
As a bonus, limiting font weights also improves page load speed. Each weight is a separate font file. Dropping from five to two can reduce your font payload by 60%.
4. Set a Minimum Body Font Size of 16px
The problem: Many themes set body text at 13px or 14px. On a desktop this looks acceptable. On a mobile screen, where most of your customers are reading, it is too small. Text below 16px on mobile triggers pinch-to-zoom behaviour in most browsers. That is a clear signal that your text is not comfortable to read.
Small text does not just look cheap. It actively reduces reading time. Customers who have to zoom to read your product description are customers who are one tap away from leaving.
The tweak:
/* Base body size */
body {
font-size: 16px;
}
/* Ensure product descriptions never go below 16px */
.product-description,
.product-description p {
font-size: 16px;
}
/* Labels and small text: 14px minimum, never lower */
.product-label,
.product-meta,
.caption {
font-size: 14px;
}
/* Override any theme defaults that shrink text on mobile */
@media (max-width: 768px) {
body, p, .product-description {
font-size: 16px !important;
}
}The !important on the mobile override is intentional. Some themes reduce font sizes on mobile to fit more content. You do not want that behaviour on your product pages.
Why it works: 16px is the baseline readable size for body text on mobile screens. Apple, Google, and Microsoft all recommend it. Text at 16px does not require zoom. It reads naturally at arm’s length. It respects the reader.
Premium brands never use text below 16px for body copy. They understand that readability is a form of respect for the customer. When text is comfortable to read, customers spend more time on the page, absorb more information, and feel more confident about the purchase.
If your theme uses 14px for body, bumping to 16px will feel like a big change at first. Give it 24 hours. You will not go back.
Apply All Four in One Session
These four tweaks are independent of each other. You can apply them all in a single session of about 20 minutes. Here is the order that makes the most visible difference:
- Set body font size to 16px first. This is the most immediately noticeable change.
- Add line-height 1.6 to product descriptions. The text will start to breathe.
- Limit font weights to two. The page will suddenly feel structured.
- Add letter-spacing to uppercase headings. The finishing touch.
None of these changes require a new theme, a developer, or a plugin. They are CSS rules you paste into your theme customiser. Test on mobile after each change to make sure the result feels right.
Premium is not about spending more money. It is about making deliberate choices with the tools you already have. Typography is where that shows up most clearly.
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.
