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.

Text styles designs