{"id":2030,"date":"2016-09-19T13:28:05","date_gmt":"2016-09-19T13:28:05","guid":{"rendered":"http:\/\/cssreset.com\/?p=2030"},"modified":"2016-09-19T13:28:05","modified_gmt":"2016-09-19T13:28:05","slug":"how-to-use-css3s-letter-spacing-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-css3s-letter-spacing-property\/","title":{"rendered":"How to Use CSS3’s Letter-Spacing Property"},"content":{"rendered":"

CSS3’s letter-spacing property is a great way to increase or decrease the space between the letters of your text using CSS. Let’s jump right in with an example. To increase the letter spacing in the h2 tag below, use the following code:<\/p>\n

\"Screen<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. h2{<\/span><\/div><\/li>\n
  2. letter-spacing<\/span>:<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Your results should look something like this:<\/p>\n

    \"Screen<\/p>\n

    You can also use letter-spacing property to decrease the space between the characters, like this:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. h2{<\/span><\/div><\/li>\n
    2. letter-spacing<\/span>:<\/span> -5px<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      \"Screen<\/p>\n

      The letter-spacing property is actually a really useful way to add some style to your CSS projects. Adding space between letters is a pretty common minimalist design trend. On the other hand, it can also be used to kern your text without having to use Photoshop or any other photo editing software — this is an effect often used for headers and logos. Or you can get really creative and layer text with two different letter-spacing values over each other for a nice abstract design.<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      CSS3’s letter-spacing property is a great way to increase or decrease the space between the letters of your text using CSS. Let’s jump right in with an example. To increase the letter spacing in the h2 tag below, use the […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,6,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2030"}],"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=2030"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2030\/revisions"}],"predecessor-version":[{"id":2034,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2030\/revisions\/2034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2032"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}