From desktop to mobile and beyond, here’s how to ensure that your typography is just as responsive as the rest of your website.
Illustration by Ashger Zamana.
.png "Font Sizes for Responsive Websites (2)")
Typography can make or break your web design. Alongside identifying the best fonts for your website, it’s also vital to pick the right font sizes. The size of your font can create contrast and help users focus on your key message.
However, one size does not fit all. The websites you design are viewed on all sorts of different browsers and viewport sizes: laptops, tablets, TVs, smartphones — maybe even smartwatches. You therefore need to consider your font size carefully, and here’s what to keep in mind.
Font size in web design
Fonts can be sized in a number of different ways on the web:
Pixel (px)
Point (pt)
em: The font size is relative to the parent container’s font size.
Root em (rem): The font size inherits from the root of the styling.
Percentage (%)
Viewport width or height (vw or vh)
Centimeter (cm)
Millimetre (mm)
Inch (in)
Font size indication by pixel.
In most cases, you should avoid absolute measurements like cm, mm, in and pt for web designs as they will look different on every device.
Pixel is somewhat of an absolute size, as it is based on the pixel size of the user’s screen. However, using px for font sizing is quite a common practice and most web browsers are equipped to make your design look similar across different resolutions even when using px. It’s also a very easy unit to use when considering the collaboration between design teams who would typically design by pixel.
Another option is to utilize em and rem. em inherits its size from its parent, while rem inherits from the root styling (hence, why it’s named root em).
The default font size in all browsers tends to be approximately 16 pixels. A common practice is to set the root font-size to 62.5%, which translates the default 16px to approximately 10px. We do this to make the mental conversion of the font size easier when using em or rem (e.g. 1 rem = approx. 10 pixels, while 1.8 rem = approx. 18 pixels). This is a handy approach for two reasons:
The mental conversion between pixels and rem is easy to calculate in your head.
A user can change their preferred default font size and the website would adjust automatically to suit their needs.
Now, the next thing to consider is that font-sizes need to be different across different devices. On a desktop monitor there is more room and so fonts can (and should) be larger, while on mobile the screen is smaller so the font size should be decreased so all the text can fit on the page.
In CSS, we do this with media queries.
For example, we can set a default font size for a h1 element to 3.5 rem. This might look great on desktop, but on mobile it would be way too big. Therefore we could have a media query like:
h1 { font-size: 3.5rem;}@media only screen and (max-width: 400px) { h1 { font-size: 2rem; }}This would adjust the font sizes appropriately for a mobile viewport (assuming 400px is the width of the mobile).
Even after all this tweaking you may be looking at your screen and thinking: this font looks smaller, or larger, than it should be.
This is due to how digital typefaces are designed. Different fonts’ ascenders and descenders generally vary from typeface to typeface, which may make them seem like their proportions are different. (You should , too.)
More on making the most of typography.
Bite into the history of the squishy sans serifs making scrolling sweeter
Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria'
Get in on the psychedelic design trend with these groovy typefaces
Make online feel offline with one of these handwriting fonts
Establish a baseline: Know the difference between typefaces and fonts
Optimal font sizes for desktop
There are no exact rules for font sizing, but there are some generally good practices to think about when designing for desktop:
Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). Keep in mind that more expressive typefaces may be less legible, so if you can afford to go a bit larger, then, even 21px can be pleasant to read.
Headings - The headings should be around 1.96 times larger than your body text to create a sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings. Expressive or experimental type type generally works best here, since the larger size makes it more legible.
Subheadings - These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading.
Input fields - These should closely match the body text’s rules.
There are no exact rules for font sizing, but there are some generally good practices to think about when designing for desktop.
Optimal font sizes for mobile
On mobile, you have less room to display your content. Additionally, users typically hold the devices closer to their eyes than they would a laptop or desktop screen - which means your typefaces can (and should) be smaller than on desktop:
Body text - Font sizes should be at least 16px for body text. In some cases, you may be able to go smaller (for example. if a typeface has unusually large characters or you are using uppercase letters), with 14px being the smallest you should go. For context, Google’s Material Design uses a minimum suggestion of 14px for their secondary font size, while Apple’s guidelines use 15px for theirs.
Headings - Headings should be around 1.3 times larger than your body text to create a sufficient contrast. This would mean if you use 16px for body font size, then you would use ~21px. This is scaled down from the 3.5rem we used on desktop.
Subheadings - Here too, these would often be scaled down from the heading size, but we have a slight issue here in which the subheading may look too similar to the body font size. For this reason, some designers choose to make the subheading visually different through the use of weight, formatting like italics and letter spacing. If we used 21px for a heading, we might choose 18px or 16px for a subheading, but with lighter weight than the heading or body text.
Input fields - These should closely match the body text’s rules.
On mobile, you have less room to display your content.
Responsive font sizes on Wix Studio
Wix Studio allows you to create scalable, fluid text adjustments through different breakpoints like desktop, mobile and more.
Using the text editor, you can set a minimum and maximum font size for any text element. For example, you could set the maximum font size for a heading to 35 and the minimum to 21 on desktop. This will ensure your text will scale smoothly as you resize the screen. The maximum font size remains relative to the 1920px screen width reference point on Wix Studio, while the minimum font size is relative to the 320px screen width point.
You can also set the text to scale between different ranges for different breakpoints and even create custom breakpoints according to your needs, in order to make your website typography fully responsive.
Create scalable, fluid text adjustments through different breakpoints like desktop, mobile and more.
RELATED ARTICLES
Carving a space for yourself in the world of experimental design
BARTO RIVIRERA
Carving a space for yourself in the world of experimental design
BARTO RIVIRERA
Carving a space for yourself in the world of experimental design
BARTO RIVIRERA
Find new ways FWD
Do brilliant work—together
Collaborate and share inspiration with other pros in the Wix Studio community.
