The way we style text hasn’t 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 — palpable, experiential tension — just 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.
Intrinsic typography 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’s 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’s 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.
clamp()
Typographic superpowers beyond The result of using intrinsic typography goes well beyond what is possible with tools like clamp()
. 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’t possible with other CSS techniques, such as fluidly adjusting variable font settings, color, and unitless line-height
as an element’s area changes. You also avoid the accessibility pitfalls of clamp()
and locks where changing the browser’s default font size shifts your typography out of alignment with your breakpoints when using relative units.
How is this different from responsive typography?
Responsive typography references the viewport to transform text. It does this through media queries, clamp()
, or CSS Locks. 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.
Intrinsic typography doesn’t 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’s possible to bind all of the scaling information to a component, where media queries the styles always reference the viewport.
The anatomy of an intrinsic style
If we were to take the intrinsic headline styles above and extrude out all the variations within them, it would look like the following:
Within larger areas of the page, the text is typeset to be bigger, bolder, and wider. In smaller areas of the page the text is smaller, lighter, and narrower. The area in which a headline is rendered is measured, and then the appropriate slice is taken from this intrinsic headline style to be used for that specific headline.
You may notice a few things about the shape of this extruded headline style. The text goes from being smaller to larger, but the shape itself has curves. This control over how text scales from one point to another is particularly useful as screens get smaller to ensure optimal legibility. Below you can see the same set of styles being applied to two columns of text, one with a curved shape and one with a linear shape. In the curved intrinsic example the text is vastly more legible in more places, in comparison to the example using linear interpolation, where the text becomes too small too quickly.
Through combining the ability to interpolate text styling across sizes and areas of a layout as well as shaping how those settings are interpolated, intrinsic typography gives designers an unprecedented amount of control over how text is rendered at any screen or component size.
Typeset intrinsically
Typetura developed a tool to add intrinsic typesetting functionality to CSS (I’m the creator.) This tool enables the necessary typographic styles to be written, injecting flexibility where previously there was none. Intrinsic styles are stored in CSS keyframes and change based on the width of a parent element. This enables interpolation of any animatable property across element widths. To reference back to our element queries example, think interpolated element queries.
To set up your keyframes, 0%
is equal to a container width of 0px
, and keyframe 100%
is the maximum container width your styles will cover. This value is 1600px
by default. Containers can be defined by adding the class typetura
to an element, with the root element as the default container. Child elements will be styled based on the parent context’s width, unless a new context is defined.
@keyframes headline {
0% {
font-size: 1rem;
}
100% {
font-size: 4rem;
}
}
To attach these styles to your element, use the custom property --tt-key
. Now you can see your first intrinsic style.
@keyframes headline {
0% {
font-size: 1rem;
line-height: 1.1;
}
100% {
font-size: 4rem;
line-height: 1;
}
}
.headline {
--tt-key: headline;
}
To shape how these styles scale, use the custom property --tt-ease
. This property accepts CSS easing functions and keywords. This enables you to rapidly bring up your base font size or taper off headline scaling and spacing. Additionally, we can constrain the range these styles cover with --tt-max
to better fit the constraints of your layouts and what the text is used for.
@keyframes headline {
0% {
font-size: 1rem;
line-height: 1.1;
}
100% {
font-size: 4rem;
line-height: 1;
}
}
.headline {
--tt-key: headline;
--tt-max: 600;
--tt-ease: ease-in-out;
}
The following example shows how flexible your page can be when all the text on it is driven by intrinsic typographic styles; from the root of the document and up. The text can seamlessly transition from a monitor serving a conference room all the way down to the size of a watch — all without media queries. Text styles can also be shared in different modules; for example, the headline at the top of the page and headlines in the next-click area are all driven by the same style. While efficiencies appear immediately at any size of website, they quickly compound: the larger site you have, the more these efficiencies build.



Check out this Pen. In it, I’ve added an intrinsic style inspector so you can click on each headline and see what the rendered size is. Within the inspector you can also manipulate the shape of the intrinsic style, and the upper boundary. This allows you to begin to see the typographic styling possibilities for enabled by Typetura.
Intrinsic Typography is the future of styling on the web
Baking these design rules into your content is the practice of intrinsic design, and baking these rules into your text is the practice of intrinsic typography. Intrinsic web design, coined by Jen Simmons, is a concept where common design mutations are baked into the very fabric of our components. Instead of explicitly stating the style of each individual piece of content, intrinsic layouts are given design constraints and our content responds to its environment, as opposed to explicitly defining styles. This approach both simplifies your codebase and enhances the flexibility of your designs, as components have instructions that help them respond to more than just the viewport.
Typetura brings this philosophy into text styling. With text components being our most foundational design material, a material that is reused in almost every component, intrinsic typography has significant advantages over other methodologies. Advantages of design resilience, scalability, and simplification of code exist deeper in your project and extend its lifespan. Scale down to the size of a watch or up to the size of a TV, and where text once limited how far your layout could reach, it now supports your ambitions.
This sounds like an exciting and interesting concept. But besides the experimental joy, I can see very little improvement on existing practice. How do you manage typographic consistency? A lot of different font sizes and weights on one page will for sure look cluttered and decrease usability because of missing consistency. The first example shows that problem clearly, this wouldn’t be considered a useful design at all. Also how does it work with other layout elements, how do you keep the proportions in relation so the whole page works together? What about vertical spacing, e.g. 8 point grid. I’d be happy to see more real world examples.
Thanks for reading Rob!
I haven’t run into the issues you are outlining, but can understand the concern. For the most part, headlines and pullquotes are what I style to be styled based on their own sizes, while other elements are styled based on parent or viewport contexts. In practical use, headlines are almost always scaled and styled based on layout differences, this approach can encapsulate all those disparate styles into a single intrinsic style. In these demos I have seen an estimated typographic CSS reduction of 75%-90% with nearly identical, but now fluidly responsive, typographic hierarchy. At this time I can’t make any of those 1:1 comparisons of large websites public so I understand your skepticism.
Also yes, you can, and I do, interpolate spacing with this approach. I tend to avoid systems like the 8pt grid as I find them more useful for the designer than something that provides a consistent experience for the reader. In terms of consistency, I focus on consistency of proportion and create tooling to control proportion as opposed to consistency of specific measurements used. I find this focus on proportion helps me design better experiences for fluid media, where I can’t expect a browser window and percent based layout to adhere to fixed measures I use when designing.
This is a new approach and I would love to see more real-world examples as well. Hopefully many examples will come in time.
Scott, thank you for taking the time to give such a detailed reply. Yes, I agree now, this concept does make a lot of sense. Let´s see what can be build with it and keep up the good work!
There’s no silver bullet with this ever, but I’m interested in what to keep in mind here regarding accessibility and, for example, text zooming?
Browser zooming and user set font size preferences are respected, so yes both forms of text zooming work as expected. Although you do have to use
%
andem
/rem
to respect user set font sizes. This can’t magically makefont-size: 12px
accessible to peopleNote WCAG Success Criterion 1.4.4: Resize Text is the only thing to keep in mind, but that is a design issue not a technical issue as even sizing text with media queries can violate it. Issues have been opened and it will likely be amended to be more inclusive of typographic design changes at different dimensions. Also I have seen different interpretations, and as long as you can scale text by 200% with a 500% zoom level, SC 1.4.4 passes. Just something to keep in mind.
Nitpick, but this shouldn’t be called intrinsic typography.
In the CSS sense intrinsic behavior is styling; layout; etc. based on the natural internal qualities of a thing, whereas behavior based on the outside environment is called extrinsic behavior.
Typography which adapts to the available space is extrinsic typography.
The logical parallel here is CSS extrinsic and intrinsic sizing. Intrinsic sizing is sizing based on the size of the content itself – e.g.
min-content
andmax-content
. While extrinsic sizing is sizing dictated by how much space is available – e.g.stretch
andcontain
from CSS Box Sizing Lv4.Thanks for reading Ron!
While yes, you can style a container element, the reason I call this “intrinsic” is because the styles can respond to the properties of the element itself. For example, an
H1
’sfont-size
can change relative to the size of theH1
itself changing.I feel like this meets the definition of intrinsic, or at least the spirit of it as no externalizes need to be considered in the styling.
Great article and concept Scott.
Have you had any thoughts on how this could be worked into the design process? So if a designer were working on a new site design in figma how would they know what size the font should be at that set to based on the intrinsic typography constraints?
I would think if a desiger were just mocking up a single viewport then the styles could be set up to match the font size used in the design, but if they want to mock up multiple sizes (e.g. desktop, tablet, mobile) then they would need to know what size each text element would be scaled to at that size.
Thanks Mark, I’m so glad you enjoy the article and concept!
Yes, I have a few thoughts here.
How I approach this now is I just don’t worry about the implementation when designing in Figma. Just like with responsive web design, we mock up static instances that are imperfect representations of the things we ultimately create. I find that I can reasonably accurately achieve what I have in my mockups with this approach. The sizing and spacing we define in our mockups tend to follow intuitive rules of proportion around constraints, and intrinsic typography is a way to create a map of that.
This still remains an unsatisfactory answer to your question. Making a parallel to responsive web design tooling, I still don’t think we have design tools that accurately represent our products. The idea that we have fixed art boards for fluid media is slightly absurd to me. Our first product at Typetura was app.typetura.com, that explored ways to visually typeset things, merging the concept of an animation timeline with viewport width. In the paradigm of our current tools, I made a quick prototype of what intrinsic typography might look like inside of Adobe XD. None of this is fully baked, but I think the future here is exciting.
What is exciting about the prospect of deeper integration with design tools for me is what it might mean for brand guidelines beyond UI pattern libraries. Grabbing a callout intrinsic type component and putting it into Photoshop to design a billboard, and using that same component for the marketing website, app, and magazine advertisement has the potential to really streamline production across all media a brand exists on.
There is a way to intrinsically type without any of this. transform scale will handle 80% of the use cases without the need for all of this gobbledygook.
We need less, not more complexity, and this type of code disguised as CSS just makes CSS harder to deal with.
Thanks for reading and your comment James! I’m a little unclear as to what you mean by transform scale being a solution to any of these problems. I’d love to see examples of what you’re doing with it.
Hey Scott, I find this approach fascinating. I’m curious to hear what role JavaScript plays in Typetura? This article only describes the CSS piece of this approach. Can you talk about why JavaScript might make this approach more effective?
Thanks for reading Derek and I’m so glad you like the approach.
Ideally, we would be able to interpolate breakpoints natively in CSS. I’ll dive straight into the how as I think the article sums up why it would be ideal. Here is an issue with the CSS working group asking for breakpoint interpolation.
Animations can be re-mapped with JavaScript, and this is all the JavaScript does here. Using resizeObserver, a CSS custom property is written to all elements with the
typetura
class. The custom property is formatted as--tt-bind: 384
where384
is the element width in CSS pixels. Now that we have a width to query in our CSS, we can hand that off to the animation function that is applied to all elements (at a low specificity so it can be overwritten). The animation function isanimation:var(--tt-key) 1s var(--tt-ease) 1 calc(-1s * var(--tt-bind) / var(--tt-max)) both paused
. In English, the keyframes,--tt-key
, are applied starting at the position on the timeline corresponding to the width of the element,--tt-bind / --tt-max
, and thenpaused
there.With the custom property written to elements and the foundational CSS in place, the CSS as described in this article will just work.
To expand upon this, you could query things other than element width, like scroll position, cursor position, or track viewing distance with TensorFlow. Then you can have that output to
--tt-bind
and style text off of it. Here is a non-typography and scroll based example that uses the same underlying CSS+JS technique.I have followed and learned a lot from you, so please excuse my question if it’s too simple a concept I’m not getting. I’m not sure why font size wouldn’t be dependent on legibility at the reader’s normal distance from the device, and remain the same over various devices viewed roughly 14-25″ away without needing adjustment at breakpoints?
Thanks Lori! Great question. Yes, legibility at viewing distance is the primary factor in selecting a good root level font size, and the recommended minimum font size is 16px for good legibility. But there are a few other factors that lead us to choose different font sizes, and why fluid typography is helpful.
You want to emphasize text to grab the readers attention first and lead them into other areas of the page. This is useful for headlines, pullquotes, or call to actions. To apply the most emphasis, you may want to make the text as big as possible. As big as possible may change depending on how much room there is available in the layout and at that viewport, as well as how long words tend to be in the language you are typesetting. But that covers why you might want to fluidly scale text to be bigger.
The reason why you might want to make text smaller is if words start to no longer fit in a layout. Text can start to break in awkward places, making it choppy to read, or worse, a word can overflow it’s container or the viewport. The Apple Watch automatically scales websites down to avoid this, as even 16px text will start to fall apart at that screen size.
I think Tim Brown gets to the core of your question in his post about Molten Leading. Yes, for paragraph text you don’t want to scale it up or down much. The two reasons I listed to scale text have more to do with headlines or extreme viewport sizes. However there are other considerations that you would want to take into account for paragraph text. Considerations like adjusting line-height fluidly to help people more comfortably track the lines of text they are reading. If you’re wondering, yes, this can be done with an intrinsic typographic approach. I use it to implement molten leading in my projects.
Thanks again for the question. I didn’t elaborate on it much in the article so I’m glad you gave me the opportunity here.
Thanks a lot for the explanation and the informative article!