{"id":10601,"date":"2026-08-05T10:08:43","date_gmt":"2026-08-05T15:08:43","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10601"},"modified":"2026-08-05T10:08:44","modified_gmt":"2026-08-05T15:08:44","slug":"typographic-css-tricks","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/typographic-css-tricks\/","title":{"rendered":"5 CSS Properties You Should Know for Better Text Designs"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Like the graphic design of a physical poster, sometimes we need some eye-catching text on the web too. Picking the right font is just the beginning. Text weight, style, spacing, and decoration can go a long way, but sometimes we need more to make the text stand out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are five properties that can help make words look better, or at least more interesting, on the web. They are all fairly simple implementations you can layer into other ideas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1.&nbsp;<code>background-clip<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The fill of the letterforms is <em>usually<\/em> a solid color in typography (with some <a href=\"https:\/\/www.colorfonts.wtf\/\">wild exceptions<\/a>). But it&#8217;s rather easy to use an <em>image<\/em> to fill that space instead. All we&#8217;ve got to do is pick a fancy background and snip it to the shape of our text. The result is a set of striking knockouts that can be read.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the late 2000s, the&nbsp;<code>text<\/code>&nbsp;value was introduced for the&nbsp;<code>background-clip<\/code>&nbsp;property, making it possible to&nbsp;<strong>mask background images (or gradients) inside live text<\/strong>. Since then, it has remained one of the most sought-after rules for really cool typography visuals.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Belize Reef<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">p<\/span> {\n  <span class=\"hljs-comment\">\/* `background-clip: text` included in the shorthand *\/<\/span>\n  <span class=\"hljs-attribute\">background<\/span>: text <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">\"image.jpg\"<\/span>) center\/auto <span class=\"hljs-number\">1<\/span>lh;\n  <span class=\"hljs-comment\">\/* transparent text so that the clipped background is visible underneath *\/<\/span>\n  <span class=\"hljs-attribute\">color<\/span>: transparent; \n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb775-b8a6-7793-9b4b-d97556ffe0d6\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb775-b8a6-7793-9b4b-d97556ffe0d6?height=450&amp;theme-id=1&amp;slug-hash=019fb775-b8a6-7793-9b4b-d97556ffe0d6&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb775-b8a6-7793-9b4b-d97556ffe0d6\" title=\"CodePen Embed 019fb775-b8a6-7793-9b4b-d97556ffe0d6\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2.&nbsp;<code>vertical-align<\/code>&nbsp;\/&nbsp;<code>align-content<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">On occasion, the basics build the brilliance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We all could align text horizontally since we could write CSS (<code>text-align: center;<\/code>). But when it comes to the vertical axis, the text alignment doesn\u2019t always go smoothly. However, understanding these two properties should resolve most of that.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>vertical-align<\/code>&nbsp;property hails from the era of the Early Web, when HTML tables ruled the layout landscape. It was widely used to align content inside a table cell. However, outside of a table cell, it\u2019s not really about aligning text vertically; rather, it\u2019s about&nbsp;aligning inline elements to the text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If something goes into a line of text, like&nbsp;<code>span<\/code>,&nbsp;<code>img<\/code>, or&nbsp;<code>input<\/code>, and has to line up relative to the text,&nbsp;<code>vertical-align<\/code>&nbsp;is how it\u2019s done.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">31 B<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"emoji\"<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;#x1F4BA;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.emoji<\/span> {\n  <span class=\"hljs-attribute\">vertical-align<\/span>: top;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb772-2e51-714a-84be-e07346f09a10\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb772-2e51-714a-84be-e07346f09a10?height=450&amp;theme-id=1&amp;slug-hash=019fb772-2e51-714a-84be-e07346f09a10&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb772-2e51-714a-84be-e07346f09a10\" title=\"CodePen Embed 019fb772-2e51-714a-84be-e07346f09a10\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">What we all might have initially thought&nbsp;<code>vertical-align<\/code>&nbsp;did \u2014 aligning text vertically in a box \u2014 is actually done by the relatively newer property,&nbsp;<code>align-content<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Evolved in the Modern Layout era, other than flex box and grid,&nbsp;<code>align-content<\/code>&nbsp;also affects the block box and&nbsp;<strong>arranges the box\u2019s content vertically<\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Bonjour<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">p<\/span> {\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">360px<\/span>;\n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">text-align<\/span>: center;\n\n  <span class=\"hljs-comment\">\/* No grid or flexbox needed anymore *\/<\/span>\n  <span class=\"hljs-attribute\">align-content<\/span>: center;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb773-f29c-739a-9ceb-dbaca9ce78de\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb773-f29c-739a-9ceb-dbaca9ce78de?height=500&amp;theme-id=1&amp;slug-hash=019fb773-f29c-739a-9ceb-dbaca9ce78de&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb773-f29c-739a-9ceb-dbaca9ce78de\" title=\"CodePen Embed 019fb773-f29c-739a-9ceb-dbaca9ce78de\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3. <code>box-decoration-mode<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We don\u2019t usually think line by line for typography design. However, if we ever do go line by line, this property is all we need, and frankly, it\u2019s all we have.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There\u2019s a CSS standard module to handle when content breaks along a flow, column, or page, termed <em>fragmentation<\/em>. But that was all only about deciding on the spacing, wrapping, and location of the break until&nbsp;<code>box-decoration-mode<\/code>&nbsp;came along to tackle the styling.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a text\u2019s line box breaks, the broken edge is typically unstyled, causing an awry appearance at the edges of the fragments. But with&nbsp;<code>box-decoration-mode<\/code>&nbsp;we can ensure&nbsp;<strong>all the fragments\u2019 edges are uniformly styled<\/strong>. Which means they all get the borders, shadows, etc. that were applied to the element at the edges.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\nwater cooler chat <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span>&gt;<\/span>\neveryone agrees <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span>&gt;<\/span>\nit is hot\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">span<\/span> {\n  <span class=\"hljs-attribute\">box-decoration-break<\/span>: clone;\n  <span class=\"hljs-attribute\">-webkit-box-decoration-break<\/span>: clone;\n  <span class=\"hljs-comment\">\/* the edge styles *\/<\/span>\n  <span class=\"hljs-attribute\">border<\/span>: solid blue;\n  <span class=\"hljs-attribute\">border-width<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">171<\/span>, <span class=\"hljs-number\">171<\/span>, <span class=\"hljs-number\">245<\/span>);\n  <span class=\"hljs-attribute\">padding-inline<\/span>: <span class=\"hljs-number\">6px<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">3px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb76f-c0e4-72cb-88c7-3adc9660d24d\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb76f-c0e4-72cb-88c7-3adc9660d24d?height=450&amp;theme-id=1&amp;slug-hash=019fb76f-c0e4-72cb-88c7-3adc9660d24d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb76f-c0e4-72cb-88c7-3adc9660d24d\" title=\"CodePen Embed 019fb76f-c0e4-72cb-88c7-3adc9660d24d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">4. <code>letter-spacing<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>letter-spacing<\/code>&nbsp;property is underappreciated not only for the typographical aesthetic, but also for animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is no way in CSS to target the individual glyphs in a text (except the first one). But&nbsp;<code>letter-spacing<\/code>&nbsp;somewhat does that, since it determines the trailing space of all the glyphs in a text. The spacing accepts both&nbsp;<strong>positive (putting distance)<\/strong> and&nbsp;<strong>negative (shrinking gap)<\/strong>&nbsp;values.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An animation of the same yields a text reveal effect.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"text\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Ingvar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Kamprad<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Elmtaryd<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Agunnaryd<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">span<\/span> {\n  <span class=\"hljs-comment\">\/* Shrink and hide the letters *\/<\/span>\n  <span class=\"hljs-attribute\">letter-spacing<\/span>: -<span class=\"hljs-number\">1ch<\/span>;\n  <span class=\"hljs-attribute\">color<\/span>: transparent;\n  <span class=\"hljs-comment\">\/* Keep the first one visible *\/<\/span>\n  &amp;::first-letter {\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#FBDA0C<\/span>; <span class=\"hljs-comment\">\/* yellow *\/<\/span>\n  }\n  <span class=\"hljs-comment\">\/* On expansion *\/<\/span>\n  <span class=\"hljs-selector-tag\">body<\/span><span class=\"hljs-selector-pseudo\">:has(<\/span><span class=\"hljs-selector-pseudo\">:checked)<\/span> &amp; {\n    <span class=\"hljs-comment\">\/* Expand and show the letters *\/<\/span>\n    <span class=\"hljs-attribute\">letter-spacing<\/span>: <span class=\"hljs-number\">0ch<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#0057AD<\/span>; <span class=\"hljs-comment\">\/* blue *\/<\/span>\n    <span class=\"hljs-attribute\">transition<\/span>: letter-spacing <span class=\"hljs-number\">0.4s<\/span> <span class=\"hljs-built_in\">cubic-bezier<\/span>(.<span class=\"hljs-number\">8<\/span>, -.<span class=\"hljs-number\">5<\/span>, .<span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">1.4<\/span>), color <span class=\"hljs-number\">0.8s<\/span> linear;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb768-211c-73a6-aa19-5c425d45443b\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb768-211c-73a6-aa19-5c425d45443b?height=550&amp;theme-id=1&amp;slug-hash=019fb768-211c-73a6-aa19-5c425d45443b&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb768-211c-73a6-aa19-5c425d45443b\" title=\"CodePen Embed 019fb768-211c-73a6-aa19-5c425d45443b\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5. <code>text-combine-upright<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>text-combine-upright<\/code>&nbsp;is made for East Asian typography, where short texts are sometimes written in small size as a vertical sentence.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means this works only when the writing mode is set to <code>vertical<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In LTR (left-to-right) languages, like English, occasionally we opt for vertical writing either to save space or for its appearance. It\u2019d be great if we could still include some horizontal text.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>2 Kilo <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>4 lb<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>Sugar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;#x1F3C2;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Feb<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>02\/26<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">p<\/span> {\n  <span class=\"hljs-attribute\">writing-mode<\/span>: vertical-lr;\n  span {\n    <span class=\"hljs-attribute\">text-combine-upright<\/span>: all;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019fb76d-af64-77a0-961e-ae4b5fd1a5b5\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019fb76d-af64-77a0-961e-ae4b5fd1a5b5?height=450&amp;theme-id=1&amp;slug-hash=019fb76d-af64-77a0-961e-ae4b5fd1a5b5&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019fb76d-af64-77a0-961e-ae4b5fd1a5b5\" title=\"CodePen Embed 019fb76d-af64-77a0-961e-ae4b5fd1a5b5\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">There are plenty of properties that can be useful for typography design, but these five should give you a head start and an understanding of how typography is approached with CSS and what aspects of typography we can work with for some good detailing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Includes background-clip for masking backgrounds, vertical-align for aligning elements, box-decoration-mode for consistent edge styling, letter-spacing for spacing control, and text-combine-upright for vertical text layouts.<\/p>\n","protected":false},"author":20,"featured_media":10610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[524,234,525,7,526,39],"class_list":["post-10601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-align-content","tag-background-clip","tag-box-decoration-mode","tag-css","tag-letter-spacing","tag-typography"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/08\/typography.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10601"}],"version-history":[{"count":7,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10601\/revisions"}],"predecessor-version":[{"id":10613,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10601\/revisions\/10613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10610"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}