{"id":14462,"date":"2012-07-31T21:01:13","date_gmt":"2012-07-31T13:01:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14462"},"modified":"2023-09-12T02:17:34","modified_gmt":"2023-09-11T18:17:34","slug":"understanding-typography-for-web","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/","title":{"rendered":"Mastering Typography: Top 10 Tools and Resources You Need"},"content":{"rendered":"<p>In my previous article on <a href=\"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/\">Mastering Typography<\/a>, I delved into the intricacies of type design and how it can elevate your website\u2019s layout while enhancing the user experience. In this follow-up article, I\u2019m excited to share <strong>10 indispensable tools for web typography<\/strong>.<\/p>\n<p>These tools are excellent for constructing HTML grids, crafting CSS styles, identifying fonts, and much more. Feel free to explore the resources listed below and share your thoughts in the comments section.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/\" class=\"ref-block__link\" title=\"Read More: Mastering Typography: Top 10 Tools and Resources You Need\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mastering Typography: Top 10 Tools and Resources You Need<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/understanding-typography-for-web.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14462 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/understanding-typography-for-web.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Mastering Typography: Top 10 Tools and Resources You Need<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn my previous article on Mastering Typography, I delved into the intricacies of type design and how it...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/media.24ways.org\/2007\/17\/fontmatrix.html\">Font Matrix<\/a><\/h2>\n<p>This digital guide is brought to you by the 24ways design blog. It showcases a comprehensive table of standard web fonts, commonly found in software from vendors like Windows, Mac, Microsoft Office, and Adobe Creative Suite.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg\" alt=\"Web Font Matrix Grid\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/snook.ca\/technical\/colour_contrast\/colour.html\">Colour Contrast Check<\/a><\/h2>\n<p>Struggling with <a href=\"https:\/\/www.hongkiat.com\/blog\/high-contrast-color-design\/\">color contrast<\/a>? This tool is your savior. It helps you select harmonious color combinations, moving beyond the basic black-and-white scheme. A well-chosen color palette can make or break your design, and this tool aims to guide you towards the former.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/02-colour-match.jpg\" alt=\"Colour Contrast Chart online tool\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/html-ipsum.com\/\">HTML-Ipsum<\/a><\/h2>\n<p>Need more than just Lorem Ipsum text? HTML-Ipsum is here to help. This online generator produces HTML code blocks for various page elements, such as unordered lists, definition lists, web forms, tables, and many more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/03-html-ipsum-charts.jpg\" alt=\"HTML Lorem Ipsum generator charts\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/pxtoem.com\/\">PX-to-EM.com<\/a><\/h2>\n<p>Having trouble aligning ems with pixels? This in-browser app offers a conversion table and user interface for px to em conversions. It\u2019s a straightforward yet invaluable tool, especially considering it\u2019s free of charge.<\/p>\n<p><strong>Related:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/\">Understand Units in CSS<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/05-px-to-em-converter.jpg\" alt=\"Pixels to ems converter\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/csstypeset.com\/\">CSS Type Set<\/a><\/h2>\n<p>While CSS Type Set is an excellent starting point for beginners, it\u2019s not recommended for long-term use. This tool generates CSS code based on the font properties you select. It\u2019s a great time-saver for quick projects, but relying on it too much can hinder your growth in mastering CSS properties.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/06-css-typeset.jpg\" alt=\"CSS Type Set tool for beginners\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flippingtypical.com\/\">Flipping Typical<\/a><\/h2>\n<p>Flipping Typical is a unique font preview library that scans your Operating System\u2019s native fonts. It offers web-safe options and allows you to compare fonts side-by-side. It\u2019s a convenient tool to have bookmarked, especially when you\u2019re in a time crunch.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/07-flipping-typical.jpg\" alt=\"Flipping Typical font comparison tool\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/typographic-grid\/\">Typographic Grid<\/a><\/h2>\n<p>Designing around a grid is a hot topic in HTML and CSS. This tutorial by CSS-Tricks serves as a comprehensive guide to understanding typography in the digital age. It covers advanced topics and is worth exploring if you\u2019re willing to dive deep into how grid properties can impact your web design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/08-typographic-grid.jpg\" alt=\"Typographic Grid tutorial design\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.myfonts.com\/pages\/whatthefont\">WhatTheFont!<\/a><\/h2>\n<p>Ever stumbled upon a logo with an intriguing but unidentifiable font? WhatTheFont has been a go-to tool for years. Upload an image, and the tool will analyze the text to identify similar typefaces. It even provides links to external platforms where you can purchase the fonts.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/09-what-the-font-recognition.jpg\" alt=\"WhatTheFont? Recognition Tool\" width=\"580\" height=\"400\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/topfunky.com\/baseline-rhythm-calculator\/\">Baseline\/Line-Height Calculator<\/a><\/h2>\n<p>This is a robust tool for generating line-height and rhythm properties. Input your base font size and line-height, or add custom CSS code. The app previews various styles, giving you a sense of how these properties would look on your website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/10-baseline-rhythm-calculator.jpg\" alt=\"Baseline calculator tool for CSS development\" width=\"580\" height=\"400\"><\/figure>\n<h2>Typechart<\/h2>\n<p><strong>Note:<\/strong> Typechart is currently unavailable.<\/p>\n<p>If you\u2019re a CSS developer like me, Typechart is a godsend. It saves time by allowing you to quickly browse through popular font families and even download the necessary CSS code for your project.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/04-typechart.jpg\" alt=\"Typechart online tool for web print\" width=\"580\" height=\"400\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website\u2019s layout while enhancing the user experience. In this follow-up article, I\u2019m excited to share 10 indispensable tools for web typography. These tools are excellent for constructing HTML grids, crafting CSS styles, identifying fonts,&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[866,4593],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mastering Typography: Top 10 Tools and Resources You Need - Hongkiat<\/title>\n<meta name=\"description\" content=\"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website&#039;s layout while enhancing\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Typography: Top 10 Tools and Resources You Need\" \/>\n<meta property=\"og:description\" content=\"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website&#039;s layout while enhancing\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-31T13:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-11T18:17:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Mastering Typography: Top 10 Tools and Resources You Need\",\"datePublished\":\"2012-07-31T13:01:13+00:00\",\"dateModified\":\"2023-09-11T18:17:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/\"},\"wordCount\":524,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-typography-for-web\\\/01-font-matrix.jpg\",\"keywords\":[\"Typography\",\"Writing Tips and Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/\",\"name\":\"Mastering Typography: Top 10 Tools and Resources You Need - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-typography-for-web\\\/01-font-matrix.jpg\",\"datePublished\":\"2012-07-31T13:01:13+00:00\",\"dateModified\":\"2023-09-11T18:17:34+00:00\",\"description\":\"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website's layout while enhancing\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-typography-for-web\\\/01-font-matrix.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/understanding-typography-for-web\\\/01-font-matrix.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/understanding-typography-for-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Typography: Top 10 Tools and Resources You Need\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering Typography: Top 10 Tools and Resources You Need - Hongkiat","description":"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website's layout while enhancing","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:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/","og_locale":"en_US","og_type":"article","og_title":"Mastering Typography: Top 10 Tools and Resources You Need","og_description":"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website's layout while enhancing","og_url":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-31T13:01:13+00:00","article_modified_time":"2023-09-11T18:17:34+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Mastering Typography: Top 10 Tools and Resources You Need","datePublished":"2012-07-31T13:01:13+00:00","dateModified":"2023-09-11T18:17:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/"},"wordCount":524,"commentCount":17,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg","keywords":["Typography","Writing Tips and Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/","url":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/","name":"Mastering Typography: Top 10 Tools and Resources You Need - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg","datePublished":"2012-07-31T13:01:13+00:00","dateModified":"2023-09-11T18:17:34+00:00","description":"In my previous article on Mastering Typography, I delved into the intricacies of type design and how it can elevate your website's layout while enhancing","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/understanding-typography-for-web\/01-font-matrix.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/understanding-typography-for-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Typography: Top 10 Tools and Resources You Need"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Lg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14462"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14462\/revisions"}],"predecessor-version":[{"id":69218,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14462\/revisions\/69218"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14462"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}