{"id":2182,"date":"2017-01-17T03:21:24","date_gmt":"2017-01-17T03:21:24","guid":{"rendered":"http:\/\/cssreset.com\/?p=2182"},"modified":"2017-01-17T09:18:59","modified_gmt":"2017-01-17T09:18:59","slug":"css-tools-css-typeset","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-tools-css-typeset\/","title":{"rendered":"CSS Tools: CSS Typeset"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\nspan.s1 {font-kerning: none}\nspan.s2 {text-decoration: underline ; font-kerning: none}\n--><\/style>\n<p><a href=\"http:\/\/csstypeset.com\/\" target=\"_blank\">CSS Typeset<\/a>\u00a0is a great tool for anyone learning CSS, and it can be a fun tool for experienced developers to use to play around with text and font rules to experiment with ideas and inspirations for future projects. The typeset, a so-called \u201cletterpress for the digital age), is a fun and interactive way to style text. To use it, all you need to do is paste your desired text into the left input box, and use the options at the bottom to customize all the stylistic aspects of your text \u2014 the letter spacing, font-family, font-size, color, weight, positioning, etc. As you make your changes, the CSS code that corresponds to your creations should appear in the text box on the right hand side.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2183 aligncenter\" alt=\"Screen Shot 2017-01-11 at 1.27.23 PM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.27.23-PM-1024x366.png\" width=\"1024\" height=\"366\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.27.23-PM-1024x366.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.27.23-PM-300x107.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.27.23-PM-180x64.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.27.23-PM.png 1152w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\nspan.s1 {font-kerning: none}\n--><\/style>\n<p>To use any of your text creations in a project, all you\u2019ll need to do is copy the CSS code from the text box on the right and paste it directly into your stylesheets. If you\u2019re just learning the fundamentals of CSS, start playing around with the typeset generator to see how many unique creations and combos you can come up with! And if you\u2019re not new to CSS\u2026well, it\u2019s still a pretty fun tool to experiment with.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS Typeset\u00a0is a great tool for anyone learning CSS, and it can be a fun tool for experienced developers to use to play around with text and font rules to experiment with ideas and inspirations for future projects. The typeset, [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css-tools-css-typeset\/\" title=\"Click to read 'CSS Tools: CSS Typeset'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2182"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2182"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2182\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2182\/revisions\/2184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2183"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}