{"id":337892,"date":"2021-04-20T07:24:44","date_gmt":"2021-04-20T14:24:44","guid":{"rendered":"https:\/\/css-tricks.com\/?p=337892"},"modified":"2021-04-20T10:18:22","modified_gmt":"2021-04-20T17:18:22","slug":"intrinsic-typography-is-the-future-of-styling-text-on-the-web","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/intrinsic-typography-is-the-future-of-styling-text-on-the-web\/","title":{"rendered":"Intrinsic Typography is the Future of Styling Text on the Web"},"content":{"rendered":"\n
The way we style text hasn\u2019t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code to style text explicitly for every portion of our layouts, and then, to make it responsive, we write more code to make it work at every breakpoint. This means that, as different areas of text compress and expand, the result is tension\u2009\u2014\u2009palpable, experiential tension\u2009\u2014\u2009just before the content breaks. At these places, content suffers from not being sized or spaced well, all the while being supported by overly complicated and brittle code.<\/p>\n\n\n\n
Intrinsic typography<\/dfn> shifts all this, clearing it away by starting at the code itself to affect the styling. Instead of writing explicit text styles, you define how those styles change in proportion to the text\u2019s area. This enables you to use more flexible text components in more layout variations. It simplifies your code, increasing the opportunities for new layout possibilities. Intrinsic typography works so that text self-adjusts to the area in which it\u2019s rendered. Instead of sizing and spacing text for each component at every breakpoint, the text is given instructions to respond to the areas it is placed in. As a result, intrinsic typography enables designs to be far more flexible, adapting to the area in which it is placed, with far less code.<\/p>\n\n\n\n\n\n\n The result of using intrinsic typography goes well beyond what is possible with tools like Responsive typography references the viewport to transform text. It does this through media queries, Intrinsic typography doesn\u2019t need all that. With intrinsic typography, a single headline style can be used in all different content areas. Discrete headline styles can be consolidated into one intrinsic headline. This is a distinction similar to that of element queries versus media queries: with element queries it\u2019s possible to bind all of the scaling information to a component, where media queries the styles always reference the viewport.<\/p>\n\n\n\nTypographic superpowers beyond
clamp()<\/code><\/h3>\n\n\n
clamp()<\/code>. Intrinsic typographic styling blends the component portability of element queries with the interpolation control of CSS animations, enabling seamless changes of any value across container widths. This technique enables things that aren\u2019t possible with other CSS techniques, such as fluidly adjusting variable font settings, color, and unitless
line-height<\/code> as an element\u2019s area changes. You also avoid the accessibility pitfalls of
clamp()<\/code> and locks where changing the browser\u2019s default font size shifts your typography out of alignment<\/a> with your breakpoints when using relative units.<\/p>\n\n\n
How is this different from responsive typography?<\/h3>\n\n\n
clamp()<\/a><\/code>, or CSS Locks<\/a>. While these techniques enable granular control of typography across screen sizes, they lack the ability to control typography in different components. This means that, for a page with an array of differently sized content areas, a new headline style would need to be created for each of these areas with a responsive typography approach.<\/p>\n\n\n\n