Enlarged text on mobile web browsers can vary based on the make of the mobile device (Android or iOS) being used. Each operating system has different settings that can cause enlarged text.

Inside an iPhone's accessibility option inside of settings there is an option called "Display & Text Size." This panel controls the size and boldness of text on a particular phone. If these settings are changed from the default, the text size may be altered on a mobile browser. Unfortunately since these settings are specific to each user, there is not too much to control as to how text may display for users who enable these settings.

Unlike iOS, Android does not have special text setting options for the user. Instead it uses automatic text scaling in web browsers, so most websites should automatically size text correctly.

Custom fonts are also a common culprit for text sizing issues. Because of the nature of how different browsers may render custom fonts, text overlap may occur more frequently with the use of custom fonts.

If you are using iOS, the first step to troubleshooting this issue is to check your text size under Settings > Accessibility > Display & Text Size. If any options are turned on, try turning them off to see if that resolves the text issue. If all options are turned off, you can move on to the next step.

If the issue persist or you are not using iOS, head over to the Showit Design App. Here are some tweaks you can try. After each of these changes, publish and check to see if the issue has been resolved or changed on the live mobile site.

2. Reduce the size of the text by 1-2px.

3. Modify The Line Height and Letter Spacing

4. Change the font

If your design allows for font flexibility, try changing the font to a more standard font. If the font cannot be changed, the design will need to be adjusted around how the font responds in mobile browsers.