You can set different font sizes for mobile and desktop in Rocketspark. This means the text size your visitors see on a phone or tablet can be completely separate from what they see on a desktop. This guide walks you through how to update your heading and paragraph font sizes specifically for mobile.
Adjusting text size for mobile devices (font size, headings, paragraphs)
Rocketspark's Headings & Paragraphs settings have separate controls for desktop and mobile. Changes you make on one view won't affect the other, so it's important to make sure you're on the right view before saving.
Step 1 — Open Change Design
From your Dashboard, click Edit Website to open your site editor, then click Change Design in the left-hand panel.
Step 2 — Go to Headings & Paragraphs
Inside Change Design, select Headings & Paragraphs.
Step 3 — Switch to the mobile view
At the top of the Headings & Paragraphs panel, you'll see two icons side by side: a monitor (desktop) and a tablet/phone (mobile). Click the mobile icon (the tablet on the right) to switch to mobile settings.
⚠ Important: If you skip this step and make changes while the desktop icon is selected, your mobile font sizes won't be affected. Always check which icon is active before saving.
Step 4 — Update your font sizes
With the mobile view selected, you'll see size dropdowns for:
- Big Heading (H1)
- Medium Heading (H2)
- Small Heading (H3)
- Paragraph
Use the dropdown next to each heading level to select the font size you want for mobile. Each one can be set independently.
Step 5 — Save and check your mobile view
Click Save once you've updated your sizes. A prompt at the top of the panel ("Check mobile view after saving") will remind you to preview your changes on a mobile device to make sure everything looks right.
Does changing mobile fonts affect desktop?
No. Mobile and desktop font sizes are independent. Updating your mobile H1 size, for example, will not change your desktop H1 size, and vice versa. This gives you full control over how your site looks on different screen sizes.
Tips and things to watch out for
- Always check which icon is active before making changes. The most common mistake is updating font sizes on desktop when you meant to update mobile, or the other way around.
- Preview on an actual phone after saving. The editor's preview is helpful, but viewing your site on a real device gives you the most accurate picture of how your text looks.
- Each heading level is independent. You can leave some heading sizes the same across desktop and mobile, and only adjust the ones that need changing.
Frequently asked questions
Why aren't my font size changes showing up on mobile? You may have made changes while the desktop view was selected. Go back to Change Design > Headings & Paragraphs, click the mobile icon to switch to mobile view, and check whether your sizes are set correctly there.
Can I use the same font sizes on both mobile and desktop? Yes. Just set the same values in both the desktop and mobile views. There's no option to sync them automatically, so you'll need to enter matching values in each view separately.
Will changing my mobile font sizes affect my desktop layout? No. Mobile and desktop settings are separate. Changes to one won't affect the other.
Can I change the font style (typeface) here, or just the size? The Headings & Paragraphs section controls font size. To change the typeface (the actual font family), look for font settings elsewhere in Change Design.
Is this available on all Rocketspark plans? Yes, adjusting heading and paragraph font sizes for mobile is available on all plans.