{"id":5467,"date":"2021-01-11T18:28:17","date_gmt":"2021-01-11T17:28:17","guid":{"rendered":"https:\/\/www.zeichenschatz.net\/?p=5467"},"modified":"2023-10-07T07:26:33","modified_gmt":"2023-10-07T05:26:33","slug":"functional-text","status":"publish","type":"post","link":"https:\/\/pimpmytype.com\/functional-text\/","title":{"rendered":"How to pick a Typeface for User Interface and App Design?"},"content":{"rendered":"\n<p class=\"lead-in\"><span class=\"first-letter\">W<\/span>hat should you pay attention to when choosing a font for your user interface or app? In this article and video I cover what to look for. I also pick on Hellvetica (yes, Hell-vetica) so you won\u2019t pick it as a typeface for your functional text.<\/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=\"How to Choose a Font for UI or App Design? Typefaces for Functional Text\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/M1bIVRdBl4s?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> For your UI or app select a typeface with clean distinctive characters (Il1 test), open shapes, little contrast, and set it legible, so it works in tiny sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User interface text is functional text<\/h2>\n\n\n\n<p>The term functional text summarizes everything that\u2019s not display or body text. It\u2019s <strong>short text<\/strong> that serves a specific purpose and might be mostly applied in a user interface or app design. You might find it in:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Labels<\/li>\n\n\n\n<li>Alerts<\/li>\n\n\n\n<li>Navigational element<\/li>\n\n\n\n<li>Captions, and so on.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-5475\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text.png\" alt=\"\" class=\"wp-image-5475\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text.png 1920w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-800x450.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-1200x675.png 1200w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-768x432.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-1536x864.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-1400x788.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/functional-text-600x338.png 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">If you\u2019re designing an app you will most likely focus on functional text<\/figcaption><\/figure>\n\n\n\n<p>It is mostly used in <strong>small sizes,<\/strong> so in 10 to 12 px it still should be readable. But how can you be sure the typeface you chose fits these circumstances and your app or UI will perform great?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Go for clear distinctions<\/h2>\n\n\n\n<p>Clarity is key. Functional text is not long reading text, so context might be different or missing. The typography of your labels or the caption of charts should leave no room for interpretation. To assure that your typeface works well do the Il1 test (capital I, lower case l, and the number one). If these three shapes are easy to distinguish you found a good typeface.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-5476\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive.png\" alt=\"\" class=\"wp-image-5476\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive.png 1920w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-800x450.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-1200x675.png 1200w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-768x432.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-1536x864.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-1400x788.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/Il1-test-comparison-between-gill-sans-fira-Sans-Recursive-600x338.png 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Gill Sans on the left has the same shape for the uppercase I, lower case l and the number 1. Fira Sans in the middle is clearer and with Recursive on the right side it is obvious what shape is what character. Btw: Basic Sans, the typeface for this caption, is not ideal for the Il1 test either, as you can see here \ud83d\ude09<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Look for open shapes<\/h2>\n\n\n\n<p>The apertures, these are the openings between the counter and the outside of the letter, should be open. This makes them easier to read in small sizes. In the example below you see that Helvetica as very closed apertures compared to PT Sans on the right side.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-5477\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans.png\" alt=\"\" class=\"wp-image-5477\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans.png 1920w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-800x450.png 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-1200x675.png 1200w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-768x432.png 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-1536x864.png 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-1400x788.png 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/open-apertures-for-ui-fonts-helvetica-vs-pt-sans-600x338.png 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Helvetica on the left vs. PT Sans on the right. Helvetica\u2019s apertures are closed which makes it harder to read in small sizes compared to PT Sans.<\/figcaption><\/figure>\n\n\n\n<p>This is the major reason why it was a horrible decision to use Helvetica as the UI font for Mac OS 10.10 Yosemite back in 2014. Luckily it got replaced by SF Pro.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-5468\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"138\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/helvetica-vs-lucida-grand-mac-os-10-10-yosemite.gif\" alt=\"\" class=\"wp-image-5468\"\/><figcaption class=\"wp-element-caption\">Helvetica vs. Lucida Grande in Mac OS 10.10 Yosemite. Helvetica is harder to read and gets blurred, especially on low resolution monitors. Image taken by <a href=\"https:\/\/www.typografie.info\/3\/artikel.htm\/n\/t\/wie-man-die-helvetica-als-standardschrift-von-mac-os-1010-yosemite-austauscht-r371\/\">Typografie.info<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Little contrast is better<\/h2>\n\n\n\n<p>Look for typeface with even, sturdy strokes. This does not necessarily mean it has to be a sans-serif (some subtle slab serifs could work as well), but in most cases it might be.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set things legible<\/h2>\n\n\n\n<p>Letters set in all caps are harder to read, since they create less distinct letter shapes. When there are no ascenders and descenders the outer shape of a word is always a long rectangle. The menu in Half-Life: Alyx VR gives you typographically the same shivers down your spine like the game play. It\u2019s incredible hard to read making it extra horrific to pick something.<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-5473\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"872\" src=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography.jpg\" alt=\"The Menu in  Half-Life Alyx VR shows two levels, the text ist set in capital letters in tiny sizes on a noisy background and extremely hard to read\" class=\"wp-image-5473\" srcset=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography.jpg 1920w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-800x363.jpg 800w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-1200x545.jpg 1200w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-768x349.jpg 768w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-1536x698.jpg 1536w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-1400x636.jpg 1400w, https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/half-life-alyx-vr-menu-typography-600x273.jpg 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">The typography of Half-Life: Alys VR gives you nausea. The tiny type sizes and noisy background makes it extremely hard to read. Especially with a VR headset.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Go deeper and evolve<\/h2>\n\n\n\n<p>Get a practical take on choosing fonts for UI Design in the <a href=\"https:\/\/pimpmytype.com\/ui-webinar\/\">free UI Typography webinar<\/a>, and a deep dive into it with the <a href=\"https:\/\/pimpmytype.com\/ui-fonts-checklist\/\">UI Fonts Checklist<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>After <a href=\"https:\/\/pimpmytype.com\/display-text\/\" data-type=\"post\" data-id=\"5446\">display text<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=Pg5Nq8MAyvs\">body text<\/a>, this was the third part of my three part series about how to choose a proper typeface. I also cover <a href=\"https:\/\/pimpmytype.com\/open-sans\/\" data-type=\"post\" data-id=\"5398\">why your font choice matters<\/a> and gave <a href=\"https:\/\/pimpmytype.com\/kinds-of-text\/\" data-type=\"post\" data-id=\"5429\">a primer on the 3 different kinds of text<\/a>. <strong>Any feedback or suggestions<\/strong> for future topics? Happy to read them in the comments below!<\/p>\n\n\n\n            <div id=\"mailerlite-form_1\" data-temp-id=\"69fce4f9b0c2c\">\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=\"69fce4f9b0c2c\"] 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>What should you pay attention to when choosing a font for your user interface or app? In this article and video I cover what to look for. I also pick on Hellvetica (yes, Hell-vetica) so you won\u2019t pick it as a typeface for your functional text. TL;DR: For your UI or app select a typeface \u2026 <a class=\"read-more\" href=\"https:\/\/pimpmytype.com\/functional-text\/\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":5480,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[76,74,139,75,77,78],"class_list":["post-5467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typography","tag-app-design","tag-functional-text","tag-mobile","tag-typography","tag-ui-design","tag-user-interface-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to pick a Typeface for User Interface and App 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\/functional-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to pick a Typeface for User Interface and App Design? - Pimp my Type\" \/>\n<meta property=\"og:description\" content=\"What should you pay attention to when choosing a font for your user interface or app? In this article and video I cover what to look for. I also pick on Hellvetica (yes, Hell-vetica) so you won\u2019t pick it as a typeface for your functional text. TL;DR: For your UI or app select a typeface \u2026 Weiterlesen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pimpmytype.com\/functional-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Pimp my Type\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-11T17:28:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-07T05:26:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/\"},\"author\":{\"name\":\"Oliver\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#\\\/schema\\\/person\\\/eb33e0389cf0471bb6e259ed45ae2af1\"},\"headline\":\"How to pick a Typeface for User Interface and App Design?\",\"datePublished\":\"2021-01-11T17:28:17+00:00\",\"dateModified\":\"2023-10-07T05:26:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/\"},\"wordCount\":691,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/fonts-for-ui-app-design.jpg\",\"keywords\":[\"app design\",\"functional text\",\"mobile\",\"typography\",\"ui design\",\"user interface design\"],\"articleSection\":[\"Typography\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/\",\"name\":\"How to pick a Typeface for User Interface and App Design? - Pimp my Type\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/fonts-for-ui-app-design.jpg\",\"datePublished\":\"2021-01-11T17:28:17+00:00\",\"dateModified\":\"2023-10-07T05:26:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/fonts-for-ui-app-design.jpg\",\"contentUrl\":\"https:\\\/\\\/pimpmytype.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/fonts-for-ui-app-design.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pimpmytype.com\\\/functional-text\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pimpmytype.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to pick a Typeface for User Interface and App 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":"How to pick a Typeface for User Interface and App 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\/functional-text\/","og_locale":"en_US","og_type":"article","og_title":"How to pick a Typeface for User Interface and App Design? - Pimp my Type","og_description":"What should you pay attention to when choosing a font for your user interface or app? In this article and video I cover what to look for. I also pick on Hellvetica (yes, Hell-vetica) so you won\u2019t pick it as a typeface for your functional text. TL;DR: For your UI or app select a typeface \u2026 Weiterlesen","og_url":"https:\/\/pimpmytype.com\/functional-text\/","og_site_name":"Pimp my Type","article_published_time":"2021-01-11T17:28:17+00:00","article_modified_time":"2023-10-07T05:26:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-design.jpg","type":"image\/jpeg"}],"author":"Oliver","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oliver","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pimpmytype.com\/functional-text\/#article","isPartOf":{"@id":"https:\/\/pimpmytype.com\/functional-text\/"},"author":{"name":"Oliver","@id":"https:\/\/pimpmytype.com\/#\/schema\/person\/eb33e0389cf0471bb6e259ed45ae2af1"},"headline":"How to pick a Typeface for User Interface and App Design?","datePublished":"2021-01-11T17:28:17+00:00","dateModified":"2023-10-07T05:26:33+00:00","mainEntityOfPage":{"@id":"https:\/\/pimpmytype.com\/functional-text\/"},"wordCount":691,"commentCount":2,"publisher":{"@id":"https:\/\/pimpmytype.com\/#organization"},"image":{"@id":"https:\/\/pimpmytype.com\/functional-text\/#primaryimage"},"thumbnailUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-design.jpg","keywords":["app design","functional text","mobile","typography","ui design","user interface design"],"articleSection":["Typography"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pimpmytype.com\/functional-text\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pimpmytype.com\/functional-text\/","url":"https:\/\/pimpmytype.com\/functional-text\/","name":"How to pick a Typeface for User Interface and App Design? - Pimp my Type","isPartOf":{"@id":"https:\/\/pimpmytype.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pimpmytype.com\/functional-text\/#primaryimage"},"image":{"@id":"https:\/\/pimpmytype.com\/functional-text\/#primaryimage"},"thumbnailUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-design.jpg","datePublished":"2021-01-11T17:28:17+00:00","dateModified":"2023-10-07T05:26:33+00:00","breadcrumb":{"@id":"https:\/\/pimpmytype.com\/functional-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pimpmytype.com\/functional-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pimpmytype.com\/functional-text\/#primaryimage","url":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-design.jpg","contentUrl":"https:\/\/pimpmytype.com\/wp-content\/uploads\/2021\/01\/fonts-for-ui-app-design.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/pimpmytype.com\/functional-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pimpmytype.com\/"},{"@type":"ListItem","position":2,"name":"How to pick a Typeface for User Interface and App 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\/5467","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=5467"}],"version-history":[{"count":5,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts\/5467\/revisions"}],"predecessor-version":[{"id":17190,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/posts\/5467\/revisions\/17190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/media\/5480"}],"wp:attachment":[{"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/media?parent=5467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/categories?post=5467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pimpmytype.com\/wp-json\/wp\/v2\/tags?post=5467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}