{"id":23531,"date":"2015-03-31T21:01:11","date_gmt":"2015-03-31T13:01:11","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23531"},"modified":"2022-08-06T21:20:17","modified_gmt":"2022-08-06T13:20:17","slug":"web-typography-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/","title":{"rendered":"12 Useful Typography Libraries and Frameworks For Developers"},"content":{"rendered":"<p>Dealing with typography on the web has been real quirky. <strong>Each browser has its own algorithm to render fonts<\/strong> which could lead to unexpected discrepancies.<\/p>\n<p>There are only a few CSS properties you can use to have some control over fonts, such as font kerning, font smoothing, creating DropCaps etc. On top of that, we have to deal with a lot of layout issues when it comes to fonts.<\/p>\n<p>The good news is there are resources that you can use to take over the wheel when it comes to website typography. Here are <strong>15 web tools, libraries and frameworks<\/strong> you can use to that end.<\/p>\n<h2><a href=\"https:\/\/github.com\/bramstein\/trmix\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">TypeRendering<\/a><\/h2>\n<p>In a nutshell, <strong>TypeRendering<\/strong> works similar to Modernizr, except it only identifies the browser engine for font rendering. This library adds custom classes based on its discoveries which can be used to apply specific styling rules for type rendering.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg\" alt=\"TypeRendering\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/endtwist.github.io\/kerning.js\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">KerningJS<\/a><\/h2>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Kerning\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Kerning<\/a> is not customizable for use on the web yet \u2013 <code>font-kerning<\/code> support is still poor at the moment \u2013 but a new standard property is coming our way. <strong>KerningJS<\/strong> is a Javascript library that gives you a few new properties for better kerning control, for example <code>-letter-kern<\/code>.<\/p>\n<pre>\r\n#heading {\r\n    -letter-kern: 1px 1px 0 0 0\r\n                  1px 0 2px 0 0\r\n                  0 0 0;\r\n}\r\n<\/pre>\n<p>Keep in mind that the above example is non-standard and only applicable with KerningJS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-kerning.jpg\" alt=\"KerningJS\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/github.com\/zmmbreeze\/lining.js?files=1\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">LiningJS<\/a><\/h2>\n<p><strong>LiningJS<\/strong> is a JavaScript library which adds the <code>line<\/code> class in each line of your paragraph. This allows you to style the line separately. It simulates the idea of <code>::nth-line()<\/code>, <code>::nth-last-line()<\/code> and <code>::last-line<\/code> pseudo-classes which  is not present in CSS still. Here is an example how we style the first line of a paragraph with LiningJS:<\/p>\n<pre>\r\np .line[first]\t{\r\n\tfont-weight: 600;\r\n\ttext-transform: uppercase;\r\n}\r\n<\/pre>\n<p>In addition, LiningJS also supports Chinese paragraph flow.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-liningjs.jpg\" alt=\"KerningJS\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/github.com\/wentin\/underlineJS\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">UnderlineJS<\/a><\/h2>\n<p><strong>UnderlineJS<\/strong> is a JavaScript library that makes the text underline better. Check out the <a href=\"https:\/\/underlinejs.wentin.net\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">demo<\/a> to see what I mean, be sure to hover over the lines. Compare the demo with the underline output of current CSS <code>text-decoration<\/code> standard and you\u2019d probably be a fan of underlineJS too.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-underlineJS.jpg\" alt=\"UnderlineJS\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/simplefocus.com\/flowtype\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">FlowType<\/a><\/h2>\n<p>This plugin will dynamically adjust font size based on a specific wrapper width. <strong>FlowType<\/strong> helps you apply an ideal number of characters per line at any screen width. The library comes with options where one can set min\/max screen width, min\/max font size, and font ratio.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-flowtype.jpg\" alt=\"FlowType\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/www.gridlover.net\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">GridLover<\/a><\/h2>\n<p><strong>GridLover<\/strong> is a great tool to generate basic styles for typography arrangement (size, line height, and margin) with an easy slider UI. It generates the styles in SCSS, LESS, and Stylus so you can include it right away in your project regardless of which CSS-Preprocessor you use.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-gridlover.jpg\" alt=\"GridLover\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/type-scale.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">TypeScale<\/a><\/h2>\n<p><strong>TypeScale<\/strong> is an online tool that will help you to easily determine the right font size for your website. The tool provides a simple intuitive GUI to insert base font size,  scale, and font family you want to use. The results will be visualized for you so you can play around with the scale, to get just the right value. Just grab the CSS once you are done.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typescale.jpg\" alt=\"TypeScale\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"http:\/\/font-to-width.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Font-To-Width<\/a><\/h2>\n<p><strong>Font-To-Width (FTW)<\/strong> is a Javascript library that makes a font fit to its width container. It will determine the font size along with the word spacing required for the font. Should you want to make a pretty headline, this is the library you may want to try.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-fonttowidth.jpg\" alt=\"Font-To-Width\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"http:\/\/ffffallback.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">FFFFallback<\/a><\/h2>\n<p><strong>FFFFallback<\/strong>, a handy tool that allows you to find the best font stack that will degrade gracefully. The tool comes in a form of a bookmarklet, which will analyze the font family on your page and suggest a set of fonts to use as fallback.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-fffallback.jpg\" alt=\"FFFFallback\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/www.fontpair.co\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Font Pair<\/a><\/h2>\n<p><a href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Google Font<\/a> is one of the most popular web font library used by millions, and host above 500 font families. <strong>Font Pair<\/strong> is a collection of paired Google Fonts, where you can find a various combination between font families and type faces easily. Font Pair makes choosing font pairing a little less overwhelming.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-fontpair.jpg\" alt=\"Font Pair\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"https:\/\/www.typesettings.io\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">TypeSettings<\/a><\/h2>\n<p><strong>TypeSettings<\/strong> is a collection of CSS rule set to define proper font scaling, vertical rhythm, and responsive ratio of typography. TypeSettings comes in Sass and Stylus which allows for flexibility to meet your project needs by adjusting the variables.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typesettings.jpg\" alt=\"TypeSettings\" width=\"700\" height=\"450\"><\/figure>\n<h2><a href=\"http:\/\/typeplate.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Typeplate<\/a><\/h2>\n<p><strong>Typeplate<\/strong> is probably one of the most complete starter kit for setting up typography. Typeplate ships with a handful of basic typographic  styles that address scaling, colors, small capital, dropcap, indenting, hyphenation, blockquote, code block and a lot more stuff.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typeplate.jpg\" alt=\"Typeplate\" width=\"700\" height=\"450\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies. There are only a few CSS properties you can use to have some control over fonts, such as font kerning, font smoothing, creating DropCaps etc. On top of that, we&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[1823,3497,4117,866],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>12 Useful Typography Libraries and Frameworks For Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.\" \/>\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\/web-typography-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 Useful Typography Libraries and Frameworks For Developers\" \/>\n<meta property=\"og:description\" content=\"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/\" \/>\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=\"2015-03-31T13:01:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-06T13:20:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"12 Useful Typography Libraries and Frameworks For Developers\",\"datePublished\":\"2015-03-31T13:01:11+00:00\",\"dateModified\":\"2022-08-06T13:20:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/\"},\"wordCount\":714,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-typography-tools\\\/type-typerendering.jpg\",\"keywords\":[\"Frameworks\",\"Javascript Library\",\"Javascripts\",\"Typography\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/\",\"name\":\"12 Useful Typography Libraries and Frameworks For Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-typography-tools\\\/type-typerendering.jpg\",\"datePublished\":\"2015-03-31T13:01:11+00:00\",\"dateModified\":\"2022-08-06T13:20:17+00:00\",\"description\":\"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-typography-tools\\\/type-typerendering.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-typography-tools\\\/type-typerendering.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-typography-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 Useful Typography Libraries and Frameworks For Developers\"}]},{\"@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\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"12 Useful Typography Libraries and Frameworks For Developers - Hongkiat","description":"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.","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\/web-typography-tools\/","og_locale":"en_US","og_type":"article","og_title":"12 Useful Typography Libraries and Frameworks For Developers","og_description":"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.","og_url":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-03-31T13:01:11+00:00","article_modified_time":"2022-08-06T13:20:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"12 Useful Typography Libraries and Frameworks For Developers","datePublished":"2015-03-31T13:01:11+00:00","dateModified":"2022-08-06T13:20:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/"},"wordCount":714,"commentCount":20,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg","keywords":["Frameworks","Javascript Library","Javascripts","Typography"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/","name":"12 Useful Typography Libraries and Frameworks For Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg","datePublished":"2015-03-31T13:01:11+00:00","dateModified":"2022-08-06T13:20:17+00:00","description":"Dealing with typography on the web has been real quirky. Each browser has its own algorithm to render fonts which could lead to unexpected discrepancies.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-typography-tools\/type-typerendering.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-typography-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"12 Useful Typography Libraries and Frameworks For Developers"}]},{"@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\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-67x","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23531","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\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23531"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23531\/revisions"}],"predecessor-version":[{"id":61241,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23531\/revisions\/61241"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23531"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}