

{"id":3344,"date":"2017-07-28T18:21:17","date_gmt":"2017-07-28T15:21:17","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3344"},"modified":"2023-08-14T18:37:03","modified_gmt":"2023-08-14T18:37:03","slug":"mobile-typography-8-steps-toward-powerful-ui","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/","title":{"rendered":"Mobile Typography: 8 Steps Toward Powerful UI"},"content":{"rendered":"<p><span style=\"color: #333333;\">Mobile design heavily depends on every detail it consists of. Screens are quite small so designers need to choose elements thoughtfully trying not to overload user interface. Such a peculiarity makes typography creation for mobile rather tough task. Mobile typography requires deep attention to the details from an appropriate kind of fonts to compelling tracking and alignment.<\/span><\/p>\n<p><span style=\"color: #333333;\">No matter how challenging it sounds, designers strive to build effective mobile design because smartphones are a huge part of our life. The article describes essential principles for compelling mobile typography.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7711\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-ui-app-design.png\" alt=\"tubikstudio ui app design\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-ui-app-design.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-ui-app-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-ui-app-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubikstudio-ui-app-design-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2><span style=\"color: #333333;\">High level of legibility<\/span><\/h2>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">Legibility<\/a> is a level of how distinguishable and recognizable the words and characters are in a text. The major objective of powerful typography is a clear text which users perceive without efforts. Small screens and ambient light of mobile devices may become a problem on the way to creating legible typography. To avoid problems with legibility, designers need to consider all the factors influencing the clarity of the text.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Font size<\/span><\/h3>\n<p><span style=\"color: #333333;\">In terms of mobile typography, the size does really matter. Some may think that on small screens tiny fonts will work best. It\u2019s a misbelief. Small fonts on a bright mobile screen can make user\u2019s eyes hurt from tension and bring a headache. Of course, modern devices allow screen zooming still it\u2019s not always convenient for users to spare an unnecessary effort. Fonts in mobile UI should be big enough for users to read easily but not too big to save typographic hierarchy. The appropriate font size is key to pleasing UX.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Leading<\/span><\/h3>\n<p><span style=\"color: #333333;\">As we\u2019ve mentioned in our previous article, leading is the spacing between the baselines of the copy. In a mobile interface, leading is usually smaller compared to a desktop version. Wide leading may ruin the visual unity of text while too short space makes it badly legible. If a leading is done right, readers go fast from one text line to another and big pieces of copy become legible.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7665\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/todolist-app-tubik-studio.png\" alt=\"todolist app tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/todolist-app-tubik-studio.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/todolist-app-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/todolist-app-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/todolist-app-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>To-Do List App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Line length<\/span><\/h3>\n<p><span style=\"color: #333333;\">To make body copy comfortable for reading in the mobile interface, designers consider all the parameters including length of text lines. Optimal line length for a desktop screen won\u2019t work the same for mobile. Too long lines would go beyond screen borders, that is why designers are recommended to keep the number of characters per line within 30-40.<\/span><\/p>\n<h3><span style=\"color: #333333;\">White space<\/span><\/h3>\n<p><span style=\"color: #333333;\">When design elements are tightly gathered in a bunch, the user interface looks messy and <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a> is rather difficult. Designers need to give elements space to breathe bringing relief to users\u2019 eyes and minds. The size of <a href=\"https:\/\/blog.tubikstudio.com\/mobile-ui-design-15-basic-types-of-screens\/\">mobile screens<\/a> doesn&#8217;t allow using much <a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\">white space<\/a> that\u2019s why a balance between the elements has to be found.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8718\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/wineyard_app_UI_animation_tubik.gif\" alt=\"wineyard app UI animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><em>Wine Year App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Fewer levels of hierarchy<\/span><\/h2>\n<p><span style=\"color: #333333;\"><a href=\"https:\/\/blog.tubikstudio.com\/visual-hierarchy-effective-ui-content-organization\/\">Visual hierarchy<\/a> is applied to organize content in interfaces clearly so that users could distinguish layout objects on the basis of their physical differences, such as size, color, contrast, alignment, etc. Hierarchy divides content into levels assisting users to learn copy content gradually step by step without effort and get oriented in the digital product.<\/span><\/p>\n<p><span style=\"color: #333333;\">Web design usually contains three levels of copy content which include such elements as headings, subheaders, body copy, CTA buttons, and captions. However, small mobile screens don\u2019t provide enough space for three levels, so designers apply only two. Elements of a secondary level such as subheaders step aside to make UI look clean.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7757\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/moneywise_app_tubik_studio.png\" alt=\"moneywise app tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/moneywise_app_tubik_studio.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/moneywise_app_tubik_studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/moneywise_app_tubik_studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/moneywise_app_tubik_studio-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Moneywise App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Simplicity of fonts<\/span><\/h2>\n<p><span style=\"color: #333333;\">A key feature of effective mobile UI is simplicity. Design should be clear and the navigation easy to use, so font choices have to be based on the requirements. First of all, it is recommended to keep a number of fonts within two or three to make text look solid. Designers often stop their choice on two types of fonts for mobile interfaces because it requires fewer levels of hierarchy than web design.<\/span><\/p>\n<p><span style=\"color: #333333;\">Moreover, kinds of fonts should also fit a simple and clean style. Novelty and decorative fonts may look illegible on small screens. Designers regularly combine a serif and sans-serif fonts to create enough contrast of copy elements in the layout. In addition, it\u2019s good to reduce effects like a shadow for mobile fonts. On desktop screens, they may work nice but will make small mobile screens look overloaded.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8720\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bookswap_app_interactions_tubik.gif\" alt=\"bookswap app interactions tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Book Swap Interactions<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Delicate contrast<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Contrast is an efficient tool for designers. It helps highlight vital UI elements as well as contribute a desirable level of text legibility. However, speaking of mobile interfaces, <a href=\"https:\/\/blog.tubikstudio.com\/3c-of-interface-design-color-contrast-content\/\">contrast<\/a> may play a bad joke. Small screens, ambient light, and short fonts make a contrast image look unpleasant for users\u2019 eyes. Reducing contrast between the background and copy elements, designers help users feel comfortable while reading text on a mobile screen.<\/span><\/p>\n<p><span style=\"color: #333333;\">Contrast can be created not only via colors but with sizes of fonts to set visual hierarchy. Nevertheless, mobile interfaces are short of space for giant headings, that\u2019s why size contrast should be also reduced.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7720\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/jewellery-ecommerce-app-concept.gif\" alt=\"jewellery ecommerce app concept\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Jewellery E-Commerce App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Responsive typography<\/span><\/h2>\n<p><span style=\"color: #333333;\">People surf the Internet via all devices available today. That\u2019s why responsive design is a key condition for a successful digital product. Typography is a vital part of design responsiveness. Wrong size, width, and placement of fonts have a big impact on a whole composition. Even the most insignificant changes may break the balance between all design elements.<\/span><\/p>\n<p><span style=\"color: #333333;\">Creating typography for a digital product, designers need to consider how it will look on different devices. Planning such things forehead helps to avoid unnecessary problems in the future.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7721\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/cinema_app_interactions_UI_tubik.gif\" alt=\"cinema app interactions UI\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Cinema App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Prioritized content<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">To make mobile interfaces simple and useful, designers need to take care of the wise content organization. Users want to have fast access to information they are looking for and mobile screens can make the process complicated.<\/span><\/p>\n<p><span style=\"color: #333333;\">Mobile UI has no room for unnecessary copy elements. There should be only essential content thoughtfully prioritized. Based on users\u2019 needs and preferences, designers set a structure assisting people to navigate within the product and find what they are searching for. Text elements are prioritized by size changes as well as different width or kind of font.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8734\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/tubik_studio_book_swap.gif\" alt=\"tubikstudio book swap\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Book App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Clear text rags<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Depending on the type of product, designers apply appropriate alignment for text blocks. It can be placed on the left, on the right, centrally or it can be justified. However, speaking of mobile design many experts often stop their choice on left side alignment. This kind forms text where the beginning of each line is placed equally and the rags look similar to stairways. Such a structure helps users easily go from one text line to another and scan text fast and easily. If body copy alignment is justified (text lines placed equally), it has no rags either side. The text with such a structure is difficult to <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">scan<\/a> on a mobile screen.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8735\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/tubik-studio-healthy-food-animation.gif\" alt=\"tubik studio healthy food animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Healthy Food App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Functional typography<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">While computer users do the clicks and scrolling to interact with products, mobile screens should provide much more functionality. There are many <a href=\"https:\/\/blog.tubikstudio.com\/copywriting-mobile-web-interfaces-types-ui-copy\/\">text elements<\/a> in mobile interfaces that allow users to accomplish certain actions like buying a product, making a call, going to a website and others.<\/span><\/p>\n<p><span style=\"color: #333333;\">Designers need to make sure users understand how the text elements work and enable them to complete the actions. Functional typography should be highlighted among the other and clickable elements should be big enough to tap on them.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8284\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/menu_interactions_ui_animation_tubik.gif\" alt=\"menu interactions ui animation_tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Menu Interactions<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Things to jot down<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><strong>Minimalism.<\/strong> Mobile screens are short of space, so try not to overload it. Simple fonts, clean style, and a minimum of elements will do their job.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>Test the smallest first.<\/strong> Mobile devices have various sizes but the biggest problem is the smallest. Create your design based on how it will look on the tiny screens first. When it\u2019s ready, you can easily adapt it to the bigger sizes.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>Avoid decorative and cursive fonts.<\/strong> They don\u2019t render properly on the small screens. Moreover, decorative fonts overload interface with unnecessary details.<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>Legibility first.<\/strong> Of course, it\u2019s good to make beautiful catchy UI but sometimes all the colors, contrast, original fonts may hurt the legibility of copy content. A good-looking text is not enough. Make sure it is legible otherwise users won\u2019t be able to read information and use your product properly.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7712\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/jewelry-ecommerce-app-ui-animation.gif\" alt=\"jewelry ecommerce app ui animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Jewellery App<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Every mobile UI design project is an interesting challenge. Meet it with the knowledge and the results will please you.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Recommended reading<\/span><\/h2>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">How to Make User Interface Readable<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/9-effective-tips-on-visual-hierarchy\/\">Tips on Visual Hierarchy in User Interfaces<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/mobile-ui-design-15-basic-types-of-screens\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mobile UI Design: 15 Basic Types of Screens<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/typography-in-ui-guide-for-beginners\/\">Typography in UI: Guide for Beginners<\/a><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/tips-on-applying-copy-content-in-user-interfaces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tips on Applying Copy Content in User Interfaces<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.<\/p>\n","protected":false},"author":3,"featured_media":8736,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[330,489,331,491,365,502,437,504,447,515,453,20,457,100,463,123,465,138,466,151,467,212,469,233,479,256,482,319,485,324,487],"coauthors":[],"class_list":["post-3344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-mobile-typography","tag-user-experience-examples","tag-mobile-ui","tag-user-interface","tag-product-design","tag-ux","tag-tips","tag-ux-design-article","tag-tubik-studio","tag-uxui","tag-typography","tag-app-design","tag-ui","tag-design","tag-ui-design-article","tag-design-for-business","tag-ui-design-examples","tag-design-process","tag-ui-design-inspiration","tag-design-tips","tag-ui-design-practices","tag-graphic-design","tag-ui-design-tips","tag-human-computer-interaction","tag-usability","tag-interaction-design","tag-user-experience","tag-mobile-app","tag-user-experience-design","tag-mobile-design-inspiration","tag-user-experience-design-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mobile Typography: 8 Steps Toward Powerful UI<\/title>\n<meta name=\"description\" content=\"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile Typography: 8 Steps Toward Powerful UI\" \/>\n<meta property=\"og:description\" content=\"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-28T15:21:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T18:37:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/\",\"name\":\"Mobile Typography: 8 Steps Toward Powerful UI\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg\",\"datePublished\":\"2017-07-28T15:21:17+00:00\",\"dateModified\":\"2023-08-14T18:37:03+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg\",\"width\":1200,\"height\":900,\"caption\":\"calendar app ui design tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile Typography: 8 Steps Toward Powerful UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile Typography: 8 Steps Toward Powerful UI","description":"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.","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:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/","og_locale":"en_US","og_type":"article","og_title":"Mobile Typography: 8 Steps Toward Powerful UI","og_description":"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.","og_url":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-07-28T15:21:17+00:00","article_modified_time":"2023-08-14T18:37:03+00:00","og_image":[{"width":1200,"height":900,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/","url":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/","name":"Mobile Typography: 8 Steps Toward Powerful UI","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg","datePublished":"2017-07-28T15:21:17+00:00","dateModified":"2023-08-14T18:37:03+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article presenting effective tips on mobile typography helping to create compelling user interface design with the functional copy elements for positive UX.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/bright_vibe_calendar_app_ui_tubik.jpg","width":1200,"height":900,"caption":"calendar app ui design tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/mobile-typography-8-steps-toward-powerful-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile Typography: 8 Steps Toward Powerful UI"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3344"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3344\/revisions"}],"predecessor-version":[{"id":14593,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3344\/revisions\/14593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8736"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3344"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}