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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |