{"id":7095,"date":"2021-09-21T20:45:00","date_gmt":"2021-09-21T18:45:00","guid":{"rendered":"https:\/\/pimpmytype.com\/?p=7095"},"modified":"2023-05-27T18:09:34","modified_gmt":"2023-05-27T16:09:34","slug":"font-size","status":"publish","type":"post","link":"https:\/\/pimpmytype.com\/font-size\/","title":{"rendered":"What\u2019s the right font size in web design?"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p class=\"has-drop-cap\"><span class=\"first-letter\">I<\/span>f you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web design? This article and <a href=\"https:\/\/youtu.be\/JagGAq7fwyc\">video<\/a> has answerers for you with some practical examples focused on body text in responsive web design. Ready \u2013 then let\u2019s size up, how to size your fonts!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"What\u2019s the best font size? A guide for body text in responsive web design\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/JagGAq7fwyc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><span class=\"small-caps\">TL;DR:<\/span> Start with your body text and set it at a default size of <code>1em<\/code>, which is calculated as 16 px in most browsers. 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The holy trinity of typography<\/h2>\n\n\n\n<p><strong>A font is only as good as it\u2019s being set.<\/strong> You can choose the <a href=\"https:\/\/pimpmytype.com\/fontfriday\">best typefaces<\/a> 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 when it comes to setting your text is:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>font size,<\/li>\n\n\n\n<li>line height (or leading), and<\/li>\n\n\n\n<li>line length (or measure)<\/li>\n<\/ol>\n\n\n\n<p>These three parameters are <strong>strongly related to each other,<\/strong> and effect if your text can be easily read the most. So when adjusting the type size, the other parameters might be adjusted as well. I always start out with picking a proper typeface, followed by setting the appropriate font size, and then take care of <a href=\"https:\/\/pimpmytype.com\/line-length-line-height\/\">line length and line height<\/a>.<\/p>\n\n\n\n<p>For this article, let\u2019s do the same and focus on size. I will not go into <a href=\"https:\/\/type-scale.com\/\">modular scale<\/a> (which is beneficial) or more advanced <a href=\"https:\/\/css-tricks.com\/simplified-fluid-typography\/\">fluid typography<\/a>. For the purpose of clarity, I want to keep it as simple as possible to be a solid introduction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Different kinds of text have different sizes<\/h2>\n\n\n\n<p>As with <a href=\"https:\/\/pimpmytype.com\/kinds-of-text\/\" data-type=\"post\" data-id=\"5429\">picking a proper typeface<\/a>, ask yourself, what\u2019s the main application of your text? Is it a <strong>long reading<\/strong> format, like a blog? Then body text is the star of your show. Is it a portfolio or a more <strong>marketing<\/strong> show-off site? Then <a href=\"https:\/\/pimpmytype.com\/display-text\/\" data-type=\"post\" data-id=\"5446\">display text<\/a> comes into play. Is it an <strong>app or a UI<\/strong> with very short precise information, then <a href=\"https:\/\/pimpmytype.com\/functional-text\/\" data-type=\"post\" data-id=\"5467\">functional text<\/a> is your main actor. Here are values I use in my projects. Use them as helpful guidelines.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-1200x675.png\" alt=\"The different types of text shown in an app. 1. Display text is pointing to the headline. 2. Body text is pointing to long reading text below it. 3. Functional text is pointing to the caption below a pullquote.\" class=\"wp-image-5431\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-1200x675.png 1200w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-800x450.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-768x432.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-1536x864.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-1400x788.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app-600x338.png 600w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2020\/12\/different-types-of-text-in-an-app.png 1600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">Display text, like headings or pull quotes, is set larger. Body text should ideally be around the browser defaults. Functional text can be slightly smaller.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Body text<\/h3>\n\n\n\n<p>Default: <code>16px<\/code> or <code>1em<\/code><br>On mobile: Use the defaults, at times 10% smaller<br>On Desktop: go up until <code>24px<\/code> or <code>1.5em<\/code><\/p>\n\n\n\n<p>I see a lot of sites that set the body text too small. In the video, I show <a href=\"https:\/\/youtu.be\/JagGAq7fwyc?t=230\" target=\"_blank\" rel=\"noreferrer noopener\">a horrible example<\/a> of a hotel\u2019s website where the body text is set at only 11 px on desktop, which is ridiculous. Even for mobile, it would be too small.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display text (Heading 1)<\/h3>\n\n\n\n<p>Default: <code>40px<\/code> or <code>2.5em<\/code> for an <code>&lt;h1&gt;<\/code><br>On mobile: <code>32px<\/code> or <code>2em<\/code> or smaller, since it uses up too much space.<br>On Desktop: go up until <code>64px<\/code> or <code>4em<\/code><\/p>\n\n\n\n<p>I use this as the <strong>maximum for my font sizes.<\/strong> For the other headings, you would pick some values in between that will still create a visual hierarchy. In most cases, you only need to style your <code>&lt;h1&gt;<\/code> to <code>&lt;h4&gt;<\/code>. The <code>&lt;h4&gt;<\/code> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Functional text (captions, nav)<\/h3>\n\n\n\n<p>Default: <code>12px<\/code> to <code>14px<\/code> or <code>0.75em<\/code> to <code>0.875em<\/code><br>On mobile: Don\u2019t go below the defaults, it\u2019s already very small<br>On Desktop: go up until <code>16px<\/code> or <code>1em<\/code><\/p>\n\n\n\n<p>This text <strong>can be smaller<\/strong> than the body text. This is because otherwise you would have a hard time fitting it into your design. It should still be readable, though. One tip here is to use a slightly stronger weight (like medium) and increase the tracking as well (at 1% or 0.01em).<\/p>\n\n\n\t<div class=\"support-box support-box--patreon\">\n\t\t<div class=\"patreon--logo\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"3.5rem\" height=\"3.5rem\" viewBox=\"0 0 256 247\"><path fill=\"#FFFFFF\" d=\"M45.136 0v246.35H0V0h45.136Zm118.521 0C214.657 0 256 41.343 256 92.343s-41.343 92.343-92.343 92.343s-92.343-41.344-92.343-92.343c0-51 41.344-92.343 92.343-92.343Z\"\/><\/svg>\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h4 class=\"h4\">Pimp my Type on Patreon<\/h4>\n\t\t\t<p>Get several benefits while supporting my content creation.<br>\n\t\t\t<a href=\"https:\/\/patreon.com\/pimpmytype\" target=\"_blank\">Join Patreon<\/a><\/p>\n\t\t<\/div>\n\t<\/div>\n\t\n\n\n\n<h2 class=\"wp-block-heading\">Relative units rock<\/h2>\n\n\n\n<p><code>em<\/code> and <code>rem<\/code> are both relative units used in CSS, and for this article, let\u2019s treat them as interchangeable (but if you want, find out here <a rel=\"noreferrer noopener\" href=\"https:\/\/zellwk.com\/blog\/rem-vs-em\/\" target=\"_blank\">when to em or rem<\/a>). The reason why I love relative units is, because they <strong>make things easier<\/strong> for us typographers. 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). But for designing and coding, I find it very helpful to <strong>think in relations between the different elements,<\/strong> rather than exact sizes.<\/p>\n\n\n\n<p>Looking at the following code example, the rem are easier to understand and process for me as a designer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n font-size: 1rem;\n}\n\nh1 {\n font-size: 3rem; \/* 3 times the body text *\/\n}\n\nh2 {\n font-size: 2rem; \/* 2 times the body text *\/\n}\n\nh3 {\n font-size: 1.5rem; \/* 1 \u00bd times the body text *\/\n}\n\nfigcaption {\n font-size: 0.75rem; \/* \u00be of the body text *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Increase the font-size on larger displays<\/h2>\n\n\n\n<p>We talked about a good default size as starting point, and about relative units. Let\u2019s bring it all together to the one thing I find <strong>most crucial for sizing your text right in responsive web design.<\/strong> It is sizing your text appropriate to the reader\u2019s distance from the device. Let\u2019s assume that the larger the viewport is, the further it is away from the reader. A width of 370 px might be a smartphone, held closer to your body. 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. Besides my rough guidelines, a great tool for that is the <a href=\"https:\/\/www.leserlich.info\/werkzeuge\/schriftgroessenrechner\/index-en.php\" target=\"_blank\" rel=\"noreferrer noopener\">Font Size Calculator<\/a> by leserlich.info.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"755\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-1400x755.png\" alt=\"A desktop computer with text set at 24 px, a laptop with text set at 20 px, a tablet with text set at 16 px and a smartphone with text set at 16 px font size.\" class=\"wp-image-7128\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-1400x755.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-800x432.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-600x324.png 600w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-768x414.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-1536x829.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-responsive-web-design-different-devices-2048x1105.png 2048w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">The larger the screen, the larger the font size should be. On a smaller screen, go with the defaults, maybe slightly smaller.<\/figcaption><\/figure>\n\n\n\n<p>This means you can <strong>increase the font size<\/strong> at certain steps. Here the relative units from above bring you a big advantage. You can scale up everything proportionally, by changing the root size of the <code>html<\/code> element at certain breakpoints. In the video I <a href=\"https:\/\/youtu.be\/JagGAq7fwyc?t=256\" target=\"_blank\" rel=\"noreferrer noopener\">explain this in detail<\/a>, so I won\u2019t do it here. Also, play around with it <a href=\"https:\/\/codepen.io\/glyphe\/pen\/abWydyO\">on CodePen<\/a> and change the width of the view port there.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"codepen\" data-height=\"514\" data-default-tab=\"html,result\" data-slug-hash=\"abWydyO\" data-preview=\"true\" data-user=\"glyphe\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/glyphe\/pen\/abWydyO\">\n  font size<\/a> by Oliver (<a href=\"https:\/\/codepen.io\/glyphe\">@glyphe<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">It depends on the typeface<\/h2>\n\n\n\n<p>These were all rough guidelines to point you in the right direction. Bear in mind, that it will always <strong>depend on your exact application,<\/strong> and the typeface you choose. Because of the design of a typeface and super complicated technical stuff called <a href=\"https:\/\/iamvdo.me\/en\/blog\/css-font-metrics-line-height-and-vertical-align\">vertical metrics<\/a>, you can almost lose yourself in that subject, and I could go on forever about more details and exceptions. Eventually it does not matter that much.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"517\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-1400x517.png\" alt=\"\" class=\"wp-image-7123\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-1400x517.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-800x295.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-600x222.png 600w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-768x284.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-1536x567.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/font-size-gill-sans-vs-arpona-sans-2048x756.png 2048w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">Irritating, but true: both typefaces are set at the same size. On the left, Gill Sans, has a lower x-height which makes it appear smaller than <a href=\"https:\/\/pimpmytype.com\/arpona-sans\/\" data-type=\"post\" data-id=\"6303\">Arpona Sans<\/a> on the right with a larger x-height.<\/figcaption><\/figure>\n\n\n\n<p>This <a href=\"https:\/\/youtube.com\/shorts\/WX-56wRA4aY?feature=share\" target=\"_blank\" rel=\"noreferrer noopener\">short video<\/a> and also the review of <em><a href=\"https:\/\/pimpmytype.com\/captura-now\/\">Captura Now<\/a><\/em><strong><em>,<\/em><\/strong> also goes into the details of the font size in Relation to the x-height.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Same font size?! No way! The power of the x-height\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/WX-56wRA4aY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Judge what you see,<\/strong> and not what is calculated. Use this article as another step of your typographic journey to train your eye, taste, and assessment. If you have trouble with that, you can always <a href=\"https:\/\/pimpmytype.com\/coaching-call\/\" data-type=\"page\" data-id=\"6677\">book a private coaching call<\/a> for assistance!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>I hope this article was helpful, so you can make a more educated decision, when it comes to font sizes. <strong>Do you miss something, or have questions?<\/strong> I\u2019m happy to answer them in the comments below!<\/p>\n\n\n\n            <div id=\"mailerlite-form_1\" data-temp-id=\"69fcdae283e13\">\n                <div class=\"mailerlite-form\">\n                    <form action=\"\" method=\"post\" novalidate>\n                                                    <div class=\"mailerlite-form-title\"><h3>Better typography. Every Friday.<\/h3><\/div>\n                                                <div class=\"mailerlite-form-description\"><ul class=\"ul-checklist\">\n<li><strong>Font Friday:<\/strong> biweekly standout font recommendations \u2013 free &amp; paid.<\/li>\n<li><strong>Type Tips:<\/strong> sharp, actionable advice for stronger UX and UI design.<\/li>\n<li><strong>Join 3200+ UX designers &amp; typography fans<\/strong>\u00a0\u2013 unsubscribe anytime.<\/li>\n<\/ul>\n<\/div>\n                        <div class=\"mailerlite-form-inputs\">\n                                                                                            <div class=\"mailerlite-form-field\">\n                                    <label for=\"mailerlite-1-field-email\">Your email<\/label>\n                                    <input id=\"mailerlite-1-field-email\"\n                                           type=\"email\" required=\"required\"                                            name=\"form_fields[email]\"\n                                           placeholder=\"\"\/>\n                                <\/div>\n                                                                                            <div class=\"mailerlite-form-field\">\n                                    <label for=\"mailerlite-1-field-name\">Your first name<\/label>\n                                    <input id=\"mailerlite-1-field-name\"\n                                           type=\"text\"                                            name=\"form_fields[name]\"\n                                           required\/>\n                                <\/div>\n                                                        <div class=\"mailerlite-form-loader\">Just a sec \u2026<\/div>\n                            <div class=\"mailerlite-subscribe-button-container\">\n                                <button class=\"mailerlite-subscribe-submit\" type=\"submit\">\n                                    Subscribe                                <\/button>\n                            <\/div>\n                            <input type=\"hidden\" name=\"form_id\" value=\"1\"\/>\n                            <input type=\"hidden\" name=\"action\" value=\"mailerlite_subscribe_form\"\/>\n                            <input type=\"hidden\" name=\"ml_nonce\" value=\"8e1162ef17\"\/>\n                        <\/div>\n                        <div class=\"mailerlite-form-response\">\n                                                            <h4><p>Hooray, typographic glory on its way! Check your inbox (or spam folder) to confirm your subscription.<\/p>\n<\/h4>\n                                                    <\/div>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <script type=\"text\/javascript\" src='https:\/\/pimpmytype.com\/wp-content\/plugins\/official-mailerlite-sign-up-forms\/assets\/js\/localization\/validation-messages.js'><\/script>\n         <script type=\"text\/javascript\"> var selectedLanguage = \"\"; var validationMessages = messages[\"en\"]; if(selectedLanguage) { validationMessages = messages[selectedLanguage]; } window.addEventListener(\"load\", function () { var form_container = document.querySelector(`#mailerlite-form_1[data-temp-id=\"69fcdae283e13\"] form`); let submitButton = form_container.querySelector('.mailerlite-subscribe-submit'); submitButton.disabled = true; fetch('https:\/\/pimpmytype.com\/wp-admin\/admin-ajax.php', { method: 'POST', headers:{ 'Content-Type': 'application\/x-www-form-urlencoded', }, body: new URLSearchParams({ \"action\" : \"ml_create_nonce\", \"ml_nonce\" : form_container.querySelector(\"input[name='ml_nonce']\").value }) }) .then((response) => response.json()) .then((json) => { if(json.success) { form_container.querySelector(\"input[name='ml_nonce']\").value = json.data.ml_nonce; submitButton.disabled = false; } }) .catch((error) => { console.error('Error:', error); }); form_container.addEventListener('submit', (e) => { e.preventDefault(); let data = new URLSearchParams(new FormData(form_container)).toString(); let validationError = false; document.querySelectorAll('.mailerlite-form-error').forEach(el => el.remove()); Array.from(form_container.elements).forEach((input) => { if(input.type !== 'hidden') { if(input.required) { if(input.value == '') { validationError = true; let error = document.createElement(\"span\"); error.className = 'mailerlite-form-error'; error.textContent = validationMessages.required; input.after(error); return false; } } if((input.type == \"email\") && (!validateEmail(input.value))) { validationError = true; let error = document.createElement(\"span\"); error.className = 'mailerlite-form-error'; error.textContent = validationMessages.email; input.after(error); return false; } } }); if(validationError) { return false; } fade.out(form_container.querySelector('.mailerlite-subscribe-button-container'), () => { fade.in(form_container.querySelector('.mailerlite-form-loader')); }); fetch('https:\/\/pimpmytype.com\/wp-admin\/admin-ajax.php', { method: 'POST', headers:{ 'Content-Type': 'application\/x-www-form-urlencoded', }, body: data }) .then((response) => { fade.out(form_container.querySelector('.mailerlite-form-inputs'), () => { fade.in(form_container.querySelector('.mailerlite-form-response')); }); }) .catch((error) => { console.error('Error:', error); }); }); }, false); var fade = { out: function(el, fn = false) { var fadeOutEffect = setInterval(function () { if (!el.style.opacity) { el.style.opacity = 1; } if (el.style.opacity > 0) { el.style.opacity -= 0.1; } else { el.style.display = 'none'; clearInterval(fadeOutEffect); } }, 50); if( typeof (fn) == 'function') { fn(); } }, in: function(el) { var fadeInEffect = setInterval(function () { if (!el.style.opacity) { el.style.opacity = 0; } if (el.style.opacity < 1) { el.style.opacity = Number(el.style.opacity) + 0.1; } else { el.style.display = 'block'; clearInterval(fadeInEffect); } }, 50); } }; function validateEmail(email){ if(email.match( \/^(([^<>()[\\]\\\\.,;:\\s@\\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/ )) { return true; } return false; } <\/script> \n","protected":false},"excerpt":{"rendered":"<p>If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web or app design? This article and video has answerers for you with some practical examples focused on body text in responsive web design. Ready \u2013 then let\u2019s size up, how to size your fonts!<\/p>\n","protected":false},"author":1,"featured_media":7134,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[71,73,128,74,139,129,131,130],"class_list":["post-7095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typography","tag-body-text","tag-display-text","tag-font-size","tag-functional-text","tag-mobile","tag-relative-units","tag-rem-em","tag-responsive-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What\u2019s the right font size in web design? - Pimp my Type<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pimpmytype.com\/font-size\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What\u2019s the right font size in web design? - Pimp my Type\" \/>\n<meta property=\"og:description\" content=\"If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web or app design? This article and video has answerers for you with some practical examples focused on body text in responsive web design. Ready \u2013 then let\u2019s size up, how to size your fonts!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pimpmytype.com\/font-size\/\" \/>\n<meta property=\"og:site_name\" content=\"Pimp my Type\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-21T18:45:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-27T16:09:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oliver\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oliver\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/\"},\"author\":{\"name\":\"Oliver\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#\\\/schema\\\/person\\\/eb33e0389cf0471bb6e259ed45ae2af1\"},\"headline\":\"What\u2019s the right font size in web design?\",\"datePublished\":\"2021-09-21T18:45:00+00:00\",\"dateModified\":\"2023-05-27T16:09:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/\"},\"wordCount\":1235,\"commentCount\":31,\"publisher\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/18-font-size-in-responsive-web-design.jpg\",\"keywords\":[\"body text\",\"display text\",\"font-size\",\"functional text\",\"mobile\",\"relative units\",\"rem em\",\"responsive web design\"],\"articleSection\":[\"Typography\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/\",\"name\":\"What\u2019s the right font size in web design? - Pimp my Type\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/18-font-size-in-responsive-web-design.jpg\",\"datePublished\":\"2021-09-21T18:45:00+00:00\",\"dateModified\":\"2023-05-27T16:09:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/18-font-size-in-responsive-web-design.jpg\",\"contentUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/18-font-size-in-responsive-web-design.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Please, make that font size bigger\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/font-size\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pimpmytype.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s the right font size in web design?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#website\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/\",\"name\":\"Pimp my Type\",\"description\":\"Learn to use the power of Typography!\",\"publisher\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pimpmytype.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#organization\",\"name\":\"Pimp my Type\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/pimp-my-type-logo.png\",\"contentUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/pimp-my-type-logo.png\",\"width\":500,\"height\":210,\"caption\":\"Pimp my Type\"},\"image\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#\\\/schema\\\/person\\\/eb33e0389cf0471bb6e259ed45ae2af1\",\"name\":\"Oliver\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/avatar-privacy\\\/cache\\\/gravatar\\\/7\\\/5\\\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/avatar-privacy\\\/cache\\\/gravatar\\\/7\\\/5\\\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png\",\"contentUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/avatar-privacy\\\/cache\\\/gravatar\\\/7\\\/5\\\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png\",\"caption\":\"Oliver\"},\"sameAs\":[\"https:\\\/\\\/pimpmytype.com\"],\"url\":\"https:\\\/\\\/pimpmytype.com\\\/author\\\/oliver\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What\u2019s the right font size in web design? - Pimp my Type","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pimpmytype.com\/font-size\/","og_locale":"en_US","og_type":"article","og_title":"What\u2019s the right font size in web design? - Pimp my Type","og_description":"If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web or app design? This article and video has answerers for you with some practical examples focused on body text in responsive web design. Ready \u2013 then let\u2019s size up, how to size your fonts!","og_url":"https:\/\/pimpmytype.com\/font-size\/","og_site_name":"Pimp my Type","article_published_time":"2021-09-21T18:45:00+00:00","article_modified_time":"2023-05-27T16:09:34+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg","type":"image\/jpeg"}],"author":"Oliver","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oliver","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pimpmytype.com\/font-size\/#article","isPartOf":{"@id":"https:\/\/pimpmytype.com\/font-size\/"},"author":{"name":"Oliver","@id":"https:\/\/pimpmytype.com\/#\/schema\/person\/eb33e0389cf0471bb6e259ed45ae2af1"},"headline":"What\u2019s the right font size in web design?","datePublished":"2021-09-21T18:45:00+00:00","dateModified":"2023-05-27T16:09:34+00:00","mainEntityOfPage":{"@id":"https:\/\/pimpmytype.com\/font-size\/"},"wordCount":1235,"commentCount":31,"publisher":{"@id":"https:\/\/pimpmytype.com\/#organization"},"image":{"@id":"https:\/\/pimpmytype.com\/font-size\/#primaryimage"},"thumbnailUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg","keywords":["body text","display text","font-size","functional text","mobile","relative units","rem em","responsive web design"],"articleSection":["Typography"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pimpmytype.com\/font-size\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pimpmytype.com\/font-size\/","url":"https:\/\/pimpmytype.com\/font-size\/","name":"What\u2019s the right font size in web design? - Pimp my Type","isPartOf":{"@id":"https:\/\/pimpmytype.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pimpmytype.com\/font-size\/#primaryimage"},"image":{"@id":"https:\/\/pimpmytype.com\/font-size\/#primaryimage"},"thumbnailUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg","datePublished":"2021-09-21T18:45:00+00:00","dateModified":"2023-05-27T16:09:34+00:00","breadcrumb":{"@id":"https:\/\/pimpmytype.com\/font-size\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pimpmytype.com\/font-size\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pimpmytype.com\/font-size\/#primaryimage","url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg","contentUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/09\/18-font-size-in-responsive-web-design.jpg","width":1920,"height":1080,"caption":"Please, make that font size bigger"},{"@type":"BreadcrumbList","@id":"https:\/\/pimpmytype.com\/font-size\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pimpmytype.com\/"},{"@type":"ListItem","position":2,"name":"What\u2019s the right font size in web design?"}]},{"@type":"WebSite","@id":"https:\/\/pimpmytype.com\/#website","url":"https:\/\/pimpmytype.com\/","name":"Pimp my Type","description":"Learn to use the power of Typography!","publisher":{"@id":"https:\/\/pimpmytype.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pimpmytype.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pimpmytype.com\/#organization","name":"Pimp my Type","url":"https:\/\/pimpmytype.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pimpmytype.com\/#\/schema\/logo\/image\/","url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/07\/pimp-my-type-logo.png","contentUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/07\/pimp-my-type-logo.png","width":500,"height":210,"caption":"Pimp my Type"},"image":{"@id":"https:\/\/pimpmytype.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/pimpmytype.com\/#\/schema\/person\/eb33e0389cf0471bb6e259ed45ae2af1","name":"Oliver","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pimpmytype.com\/wp-content\/uploads\/avatar-privacy\/cache\/gravatar\/7\/5\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png","url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/avatar-privacy\/cache\/gravatar\/7\/5\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png","contentUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/avatar-privacy\/cache\/gravatar\/7\/5\/751b520db5d02c587443aac1f3a436da5b5fa35c82a29f74e0c16d532e901aff-96.png","caption":"Oliver"},"sameAs":["https:\/\/pimpmytype.com"],"url":"https:\/\/pimpmytype.com\/author\/oliver\/"}]}},"meta_box":{"zs_show_featured_image":"0","zs_big_headline":"","zs_hide_h1":"0"},"_links":{"self":[{"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts\/7095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/comments?post=7095"}],"version-history":[{"count":46,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts\/7095\/revisions"}],"predecessor-version":[{"id":14260,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts\/7095\/revisions\/14260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/media\/7134"}],"wp:attachment":[{"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/media?parent=7095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/categories?post=7095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/tags?post=7095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}