Change All Text Sizes

Store Design
, , , , , ,

Topic summary

Goal: reduce all text sizes across a Shopify Stiletto theme beyond the theme editor limits, and adjust per element (h1–h6, p, a, li).

What was proposed:

  • Add custom CSS in theme.css via Admin → Online store → Theme → Edit code. A snippet with example font-size values (using !important) for h1–h6, p, a, li was provided. Save and reload. A screenshot illustrated where to edit code.

Mobile vs. desktop:

  • Use CSS media queries (breakpoints for phones ≤576px, tablets 577–768px, laptops 769–992px, desktops 993–1200px, wide screens ≥1201px). Place per-element font-size rules inside each block to tailor sizes by device.

Status:

  • Practical steps and code patterns were provided; no remaining disagreements or unresolved questions noted.
Summarized with AI on December 23. AI used: gpt-5.
1

Hello!

I would like to change all the text sizes inside my website and make them smaller but I already reached shopify’s limit. They still look too big for me.

Are there any codes that would allow me to adjust all the different text sizes manually? Like h1, h2, h3, h4, h5, h6, p, a, li…

My theme is Stiletto and my website is www.winnerofficial.com

2

Hi @martujv ,

I have reviewed your requirement, You can manually adjust the text sizes in your Stiletto theme by adding custom CSS. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1722601119776.png
BSSCommerceB2B_0-1722601119776.png400×195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

h1 {
    font-size: 24px !important;
}

h2 {
    font-size: 22px !important;
}

h3 {
    font-size: 20px !important;
}

h4 {
    font-size: 18px !important;
}

h5 {
    font-size: 16px !important;
}

h6 {
    font-size: 14px !important;
}

p {
    font-size: 14px !important;
}

a {
    font-size: 14px !important;
}

li {
    font-size: 14px !important;
}

IN this step, You can manually adjust the text sizes and change font-size as you want to smaller or bigger.

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day my dear friend!

3

How can I adjust the font sizes individually for mobile and desktop versions?

4

You can use media query

/* For small devices (e.g., phones) */
@media (max-width: 576px) {
   // Your font-size code here
}

/* For medium devices (e.g., tablets) */
@media (min-width: 577px) and (max-width: 768px) {
   // Your font-size code here
}

/* For large devices (e.g., laptops) */
@media (min-width: 769px) and (max-width: 992px) {
 // Your font-size code here	
}

/* For extra large devices (e.g., desktops) */
@media (min-width: 993px) and (max-width: 1200px) {
 // Your font-size code here
}

/* For extra extra large devices (e.g., wide screens) */
@media (min-width: 1201px) {
   // Your font-size code here
}