

{"id":3217,"date":"2017-06-26T17:39:25","date_gmt":"2017-06-26T14:39:25","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3217"},"modified":"2023-08-14T18:38:40","modified_gmt":"2023-08-14T18:38:40","slug":"typography-in-ui-guide-for-beginners","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/","title":{"rendered":"Typography in UI: Guide for Beginners"},"content":{"rendered":"<p><span style=\"color: #333333;\">People read all the time. It\u2019s not only books or magazines but various info on the Internet, adverts in the streets, in public transport or outside shops. However, only a minority of readers may know how much time and effort often stand behind a single line. When we easily read a copy feeling comfortable and relaxed, many thanks go to a designer. The text arrangement and the aesthetic look of fonts are among the designers\u2019 top priorities. To create effective UI and clear UX designers learn basics of typography science. Today\u2019s article covers basic points in typography that every professional designer should comprehend and apply in work.<\/span><\/p>\n<h2><span style=\"color: #333333;\">What\u2019s typography? <\/span><\/h2>\n<p><span style=\"color: #333333;\">Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.<\/span><\/p>\n<p><span style=\"color: #333333;\">Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11-12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as <\/span>Textualis<span style=\"color: #333333;\"> (Textura) and Schwabacher.<\/span><\/p>\n<p><span style=\"color: #333333;\">Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now science is applied in different spheres and plays a significant role in design.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">The role of typography in design<\/span><\/h2>\n<p><span style=\"color: #333333;\">Can you think of at least one example of <\/span>web<span style=\"color: #333333;\"> or mobile design without copy elements? It\u2019s difficult, right? Still, just a presence of <\/span>copy<span style=\"color: #333333;\"> in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it\u2019s too difficult to understand so it isn\u2019t worth spending much time. However, typography is an essential part of effective design. Let\u2019s see why.<\/span><\/p>\n<p><span style=\"color: #333333;\">People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users perception.<\/span><\/p>\n<p><span style=\"color: #333333;\">The effective copy is key to the powerful design. Its effectiveness depends not only on its content but also on how it is presented. Font size, width, color, and text structure &#8211; all of that matter. Designers can transfer a certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps the design to communicate with people. Visual performance and <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">readability<\/a> of copy in digital products have a great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can\u2019t use it at all. Today poor user experience in digital products is unforgiven since users can easily find a better alternative.<\/span><\/p>\n<p><span style=\"color: #333333;\">In addition, bad typography significantly affects the first impression because even when users don\u2019t read the copy, they <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">scan<\/a> it. In case fonts look inappropriate people may not want to learn about your offer or use your product.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8710\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_studio_webdesign.png\" alt=\"tubik studio webdesign\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_studio_webdesign.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_studio_webdesign-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_studio_webdesign-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_studio_webdesign-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Essential typography elements<\/span><\/h2>\n<p><span style=\"color: #333333;\">To create profound typography, you need to learn its anatomy and the processes typography building requires. Let\u2019s see.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Font and Typeface<\/span><\/h3>\n<p><span style=\"color: #333333;\">Nowadays, many designers use terms \u201cfont\u201d and \u201ctypeface\u201d as the synonyms but that\u2019s not quite right. Let\u2019s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects in which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers<\/span><span style=\"color: #333333;\">.<\/span><\/p>\n<h3><span style=\"color: #333333;\">Mean line and baseline<\/span><\/h3>\n<p><span style=\"color: #333333;\">Typically, type characters are placed in a straight line creating a neat visual presentation. The main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8704\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline-1024x611.png\" alt=\"tubik typography baseline\" width=\"1024\" height=\"611\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline-1024x611.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline-300x179.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline-768x458.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_baseline.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Character measurement (size, weight, and height)<\/span><\/h3>\n<p><span style=\"color: #333333;\">To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called \u201cx-height\u201d because the body of every character in one size is based on the letter \u201cx\u201d. This approach makes them look even. It\u2019s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8709\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height-1024x611.png\" alt=\"tubik typography x height\" width=\"1024\" height=\"611\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height-1024x611.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height-300x179.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height-768x458.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_x_height.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Ascender and Descender<\/span><\/h3>\n<p><span style=\"color: #333333;\">The ascender is a part of a letter that goes above the mean line like in a letter \u201cb\u201d or \u201cd\u201d. The descender is opposite to ascender. It\u2019s a segment that extends below the baseline like in \u201cq\u201d or \u201cg\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8703\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender-1024x611.png\" alt=\"tubik typography ascender\" width=\"1024\" height=\"611\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender-1024x611.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender-300x179.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender-768x458.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_ascender.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">White space<\/span><\/h3>\n<p><span style=\"color: #333333;\">White space, also known as <a href=\"https:\/\/blog.tubikstudio.com\/negative-space-in-design-tips-and-best-practices-2\/\">negative space<\/a>, is the area between elements in a design composition. Readers aren\u2019t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, <\/span>copy<span style=\"color: #333333;\"> will be hard to read. That\u2019s why negative space matters as much as any other typography element.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8708\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace-1024x768.png\" alt=\"tubik typography whitespace\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace-150x113.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_whitespace.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Alignment<\/span><\/h3>\n<p><span style=\"color: #333333;\">Creating effective typography is not that easy and it includes many processes. For example, alignment is an <\/span>action<span style=\"color: #333333;\"> of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8702\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment-1024x768.png\" alt=\"tubik typography alignment\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment-150x113.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_alignment.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Tracking<\/span><\/h3>\n<p><span style=\"color: #333333;\">The process of tracking involves the adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8707\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking-1024x610.png\" alt=\"tubik typography tracking\" width=\"1024\" height=\"610\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking-1024x610.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking-300x179.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking-768x458.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_tracking.png 1668w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Kerning<\/span><\/h3>\n<p><span style=\"color: #333333;\">Kerning is a bit similar to tracking still they aren\u2019t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8705\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning-1024x611.png\" alt=\"tubik typography kerning\" width=\"1024\" height=\"611\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning-1024x611.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning-300x179.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning-768x458.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning-150x89.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_kerning.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Leading<\/span><\/h3>\n<p><span style=\"color: #333333;\">Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8706\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading-1024x768.png\" alt=\"tubik typography leading\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading-150x113.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/tubik_typography_leading.png 1667w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Typographic hierarchy<\/span><\/h2>\n<p><span style=\"color: #333333;\">Like any other design element, typography should be structured. Typographic hierarchy is a system that organizes copy content in the best way for users\u2019 perception first of all via modifications and the combination of typefaces and fonts. It is aimed at creating a contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating typography elements including typefaces, fonts, sizes, and colors as well as their alignment.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8288\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/gourmet_web_design_UI.png\" alt=\"gourmet web design UI\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/gourmet_web_design_UI.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/gourmet_web_design_UI-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/gourmet_web_design_UI-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/10\/gourmet_web_design_UI-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The Gourmet Website<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.<\/span><\/p>\n<p><span style=\"color: #333333;\">The primary level of <a href=\"https:\/\/blog.tubikstudio.com\/copywriting-mobile-web-interfaces-types-ui-copy\/\">copy content<\/a> includes the biggest type like in headlines. It strives at drawing the user\u2019s attention to the product. The secondary level consists of copy elements that can be easily scanned. Those are subheaders and captions which allow users to quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough. The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7735\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website.png\" alt=\"tubik studio the big landscape website\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><em>The Big Landscape<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">Typography cannot be learned in one day. It requires constant studying and persistence. Follow Tubik Blog updates and learn more about typography in design.<\/span><\/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:\/\/www.amazon.com\/Elements-Typographic-Style-Robert-Bringhurst\/dp\/0881791326\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Robert Bringhurst \u201cThe Elements of Typographic Style Paperback\u201d<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/www.amazon.com\/FontBook-Digital-Typeface-Compendium-Spiekermann\/dp\/3930023024\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Erik Spiekermann \u201cFontBook\u201d<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/www.amazon.com\/Just-My-Type-About-Fonts\/dp\/1592407463\/ref=pd_sbs_14_4?_encoding=UTF8&amp;pd_rd_i=1592407463&amp;pd_rd_r=P2JG9MJDQFZ813N8PBFM&amp;pd_rd_w=GhJz4&amp;pd_rd_wg=uzu2R&amp;psc=1&amp;refRID=P2JG9MJDQFZ813N8PBFM\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Simon Garfield \u201cJust My Type: A Book About Fonts\u201d<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" 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><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/mobile-typography-8-steps-toward-powerful-ui\/\">Tips on Typography for Mobile Interfaces<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.<\/p>\n","protected":false},"author":3,"featured_media":8712,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[410,533,437,20,440,100,447,114,453,147,454,151,456,212,457,213,479,214,482,233,485,265,491,319,493,330,502,365,515,391,527],"coauthors":[],"class_list":["post-3217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-scannability","tag-web-design","tag-tips","tag-app-design","tag-tubik","tag-design","tag-tubik-studio","tag-design-education","tag-typography","tag-design-studio","tag-typography-basics","tag-design-tips","tag-typography-terms","tag-graphic-design","tag-ui","tag-graphic-design-article","tag-usability","tag-graphic-design-examples","tag-user-experience","tag-human-computer-interaction","tag-user-experience-design","tag-interface-typography","tag-user-interface","tag-mobile-app","tag-user-interface-design-process","tag-mobile-typography","tag-ux","tag-product-design","tag-uxui","tag-readability","tag-visual-hierarchy"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Typography in UI: Guide for Beginners<\/title>\n<meta name=\"description\" content=\"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.\" \/>\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\/typography-in-ui-guide-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typography in UI: Guide for Beginners\" \/>\n<meta property=\"og:description\" content=\"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-26T14:39:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T18:38:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"797\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/\",\"name\":\"Typography in UI: Guide for Beginners\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg\",\"datePublished\":\"2017-06-26T14:39:25+00:00\",\"dateModified\":\"2023-08-14T18:38:40+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg\",\"width\":1200,\"height\":797,\"caption\":\"typography in UI design web mobile\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Typography in UI: Guide for Beginners\"}]},{\"@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":"Typography in UI: Guide for Beginners","description":"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.","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\/typography-in-ui-guide-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"Typography in UI: Guide for Beginners","og_description":"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.","og_url":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-06-26T14:39:25+00:00","article_modified_time":"2023-08-14T18:38:40+00:00","og_image":[{"width":1200,"height":797,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/","url":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/","name":"Typography in UI: Guide for Beginners","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg","datePublished":"2017-06-26T14:39:25+00:00","dateModified":"2023-08-14T18:38:40+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"In design, every layout element plays its role. This article presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/06\/typography-in-UI-design-web-mobile.jpg","width":1200,"height":797,"caption":"typography in UI design web mobile"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/typography-in-ui-guide-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Typography in UI: Guide for Beginners"}]},{"@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\/3217","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=3217"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3217\/revisions"}],"predecessor-version":[{"id":14599,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3217\/revisions\/14599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8712"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3217"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}