In the video I explain this in detail, so I won’t do it here. You can scale up everything proportionally, by changing the root size of the html element at certain breakpoints. Here the relative units from above bring you a big advantage. This means you can increase the font size at certain steps. On a smaller screen, go with the defaults, maybe slightly smaller. The larger the screen, the larger the font size should be. Besides my rough guidelines, a great tool for that is the Font Size Calculator by. On the other hand, a 1920 px wide viewport might be an external monitor or an iMac positioned on a desktop further away from the reader. A width of 370 px might be a smartphone, held closer to your body. Let’s assume that the larger the viewport is, the further it is away from the reader. It is sizing your text appropriate to the reader’s distance from the device.
Let’s bring it all together to the one thing I find most crucial for sizing your text right in responsive web design. We talked about a good default size as starting point, and about relative units. p Increase the font-size on larger displays
Looking at the following code example, the rem are easier to understand and process for me as a designer. But for designing and coding, I find it very helpful to think in relations between the different elements, rather than exact sizes. Of course, your text will eventually be displayed at a specific pixel size and your root size should be sufficient for it (look at the minimum sizes above). The reason why I love relative units is, because they make things easier for us typographers. Relative units rockĮm and rem are both relative units used in CSS, and for this article, let’s treat them as interchangeable (but if you want, find out here when to em or rem). One tip here is to use a slightly stronger weight (like medium) and increase the tracking as well (at 1% or 0.01em). This is because otherwise you would have a hard time fitting it into your design. This text can be smaller than the body text. On mobile: Don’t go below the defaults, it’s already very small Functional text (captions, nav)ĭefault: 12px to 14px or 0.75em to 0.875em The could have the same size as your body text, but set in a bolder weight or a different typeface, so it still stands out as a heading. In most cases, you only need to style your to. For the other headings, you would pick some values in between that will still create a visual hierarchy. I use this as the maximum for my font sizes. On mobile: 32px or 2em or smaller, since it uses up too much space. In the video, I show a horrible example of a hotel’s website where the body text is set at only 11 px on desktop, which is ridiculous. I see a lot of sites that set the body text too small. On mobile: Use the defaults, at times 10% smaller Body text should ideally be around the browser defaults. Display text, like headings or pull quotes, is set larger. Is it an app or a UI with very short precise information, then functional text is your main actor. Is it a portfolio or a more marketing show-off site? Then display text comes into play. Different kinds of text have different sizesĪs with picking a proper typeface, ask yourself, what’s the main application of your text? Is it a long reading format, like a blog? Then body text is the star of your show.
For the purpose of clarity, I want to keep it as simple as possible to be a solid introduction. I will not go into modular scale (which is beneficial) or more advanced fluid typography. I always start out with picking a proper typeface, followed by setting the appropriate font size, and then take care of line length and line height.įor this article, let’s do the same and focus on size. So when adjusting the type size, the other parameters might be adjusted as well. These three parameters are strongly related to each other, and effect if your text can be easily read the most. The holy trinity of typography when it comes to setting your text is: You can choose the best typefaces ever for your web or app design, and still f*** it up big time (pun intended) when setting it so small or in other ways inappropriate. The holy trinity of typographyĪ font is only as good as it’s being set. Use relative units and from there, scale up the font size and ideally also the layout proportionally and make it larger on bigger view ports, since we can assume that the viewer is further away. TL DR: Start with your body text and set it at a default size of 1em, which is calculated as 16 px in most browsers.