# Responsive Type Scale **URL:** \ **Category:** Ask the community\ **Tags:** design, design-tokens, typography\ **Created:** [May 19, 2026, 6:55pm UTC](https://community.penpot.app/t/responsive-type-scale/10590 "2026-05-19T18:55:39Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Gwix](https://avatars.discourse-cdn.com/v4/letter/g/b2d939/32.png) [@Gwix](https://community.penpot.app/u/Gwix)\ **Post date:** [May 19, 2026, 6:55pm UTC](https://community.penpot.app/t/responsive-type-scale/10590/1 "2026-05-19T18:55:39Z")
Hello Penpot friends, I’m wondering how can I manage my Responsive Type Scale using Penpot’s Tokens. I’m still a bit confused with Sets and Themes (I’m new to Penpot). I have built a design system with Sass (SCSS) and would love to implement it in Penpot (knowing my Sass Type Scales may need some refactoring so I can have the same JSON file for both Penpot and Sass). Thing is, I’m not sure how to proceed, I have 7 Type Scales (from Print to Desktop XXL) and 10 steps for each. I understand how to use the different kind of Tokens (Font Family, Font Size and Number) and how to build a Type Scale, the puzzle in my head is about managing Type Scale vs. Screen Size (or paper sheet) for fast swapping. I’m certain it can be done with what we have in Penpot, and I will continue working on a solution that works, but if any of you have ideas to get me going on faster it would be great for all of us, starting with me 😉 ---
**Author:** ![carolina.portugal](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/carolina.portugal/32/36_2.png) [@carolina.portugal](https://community.penpot.app/u/carolina.portugal)\ **Post date:** [May 20, 2026, 7:46am UTC](https://community.penpot.app/t/responsive-type-scale/10590/2 "2026-05-20T07:46:39Z")
Really interesting idea. I think responsive type scales become especially powerful when they’re connected to design tokens and fluid values instead of only fixed breakpoints. You can check this Blog post that @LauraKalbag wrote, it may help: > **[Using design tokens for a proportional typographic scale](https://penpot.app/blog/using-design-tokens-for-a-proportional-typographic-scale/)** > > A proportional typographic scale is a hierarchy for font sizes that uses a consistent mathematical ratio. Design tokens are ideal for creating these scales. ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [May 20, 2026, 1:26pm UTC](https://community.penpot.app/t/responsive-type-scale/10590/3 "2026-05-20T13:26:48Z")
I have a blog post brewing about breakpoints! But let me give you a basic demo on how I would do this for your case. First, here’s the result: And the file: [Breakpoints and typescales.penpot](https://community.penpot.app/uploads/short-url/mLSPXp1Ez5fGgIkS0tEytAMEPCD.penpot) (22.9 KB) This demo assumes you’ve chosen explicit font sizes (or previously calculated the font sizes) for your typescales. But it would work similarly for typescale values calculated inside the design tokens. Here’s how I’ve set up the file: ## One board to represent all viewports This board changes widths to represent our viewport. To make the board mimic a responsive viewport, I used a flex layout and set it to fixed width and fit content. This will make the content inside the board determine the height of the viewport but keep the same width regardless of its content. ![Viewport board with Flex layout settings flowing top to bottom, with Flex board settings of fixed witdth and fit content height.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/a87362d916b6cdab670c21390597f50c454ba3f4.png) See the _Token sets_ setup for how we define the responsive widths. ## Token sets - Global set: all the design tokens that should be applied to all breakpoints. - Mobile set: tokens that only apply to the mobile breakpoint. - Tablet set: only apply to the tablet breakpoint. - Desktop set: only apply to the desktop breakpoint. In my **Global** set, I have: - the font family token, `family.default`. I then applied this token to all text elements. - a funky shadow token, `shadow.viewport` for the top border effect on the viewport. Applied to the viewport board. - the spacing tokens, `spacing.sm`, `spacing.md` and so on (although you might want to scale these along with the viewport size.) Applied to the viewport padding and text element margins. I’ve grouped my breakpoint sets (using `/` in the name). You don’t have to do this, I just find it helps me visualise the overall tokens structure better. In the **Breakpoint / Mobile** set: - the dimension token, `dimension.viewport.width`. This has a value of `360`, representing the width of the viewport on mobile devices. Applied to the viewport width. - the font size tokens, `font-size.sm`, `font-size.md` and so on. These are where the type scale is defined. These are applied to their relevant text elements. - bonus color tokens, `color.body.background`, `color.body.border`, and `color.body.text`. These are applied to their relevant elements so each breakpoint has a different colour theme. For mobile, this is a gold/green-yellow colour. In the **Breakpoint / Tablet** set: The same tokens as the Breakpoint / Mobile set, with the values tweaked for tablet scale. For example, the `dimension.viewport.width` has a value of `960`, the type scale is tweaked so the largest font sizes are bigger than on mobile, and the colour theme is green. In the **Breakpoint / Desktop** set: The same tokens as the Breakpoint / Mobile and Breakpoint / Tablet sets, again tweaked for Desktop. The `dimension.viewport.width` has a value of `1200`, the type scale defines the largest font sizes as even bigger than on tablet, and the colour theme is blue. ![The dimension.viewport.width token in the Mobile set. It has a value of 360 and is applied to the width of the Viewport board.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/a/acb0fc9ec69c9d8cebc833a00a3969eb6f5ebd6e.jpeg) ## Token themes The themes is where the magic happens. I have three tokens themes set up. Each theme is in the **Breakpoint** group (created and set when you create theme.) This is useful if you want to have other themes that can be applied independently of the Breakpoint themes (like light and dark modes.) - Breakpoint (group) **Mobile** (theme): _Global_ set and _Breakpoint / Mobile_ set enabled. - Breakpoint (group) **Tablet** (theme): _Global_ set and _Breakpoint / Tablet_ set enabled. - Breakpoint (group) **Desktop** (theme): _Global_ set and _Breakpoint / Desktop_ set enabled. ![The mobile theme has the Global and Mobile sets enabled, and the Tablet and Desktop sets disabled.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/d/d6ac4ac163bc8c403640983136aaff2f4fa4ae0a.jpeg) ![The themes list has a Breakpoint group with Mobile, Tablet, and Desktop themes, each containing two active sets.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/cb17a80b93711079b0f31af5f468b26ccd98cffe.jpeg) Essentially, each theme is telling Penpot to enable and disable combinations of specific token sets. When the token names are the same across multiple sets (like the breakpoint sets), Penpot uses the value from the enabled set. This means that, if you’ve applied the `dimension.viewport.width` token to the Viewport board’s width property, the width property will update according to the token value in the currently enabled theme. With these themes set up, you can use the theme menu at the top of the Tokens tab to switch between breakpoints. Well, that did become blog post length 😅 I really hope this all makes sense. Please let me know if you have any further questions! ---
**Author:** ![Gwix](https://avatars.discourse-cdn.com/v4/letter/g/b2d939/32.png) [@Gwix](https://community.penpot.app/u/Gwix)\ **Post date:** [May 20, 2026, 5:05pm UTC](https://community.penpot.app/t/responsive-type-scale/10590/4 "2026-05-20T17:05:52Z")
Thank you so much Laura, this is EXACTLY what I needed, and more. I’m going to implement most of these principles in my typography library. I’m not certain when (my tasks priorities have changed), but that’s the way to go for sure!