# 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:** 1\ **Showing post:** 3
**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! --- _[View the full topic](https://community.penpot.app/t/responsive-type-scale/10590)._