Design a responsive type scale/ramp
But right now our type scale is only intended for viewing in mid-sized desktops. We should create variations for not only smaller viewport sizes, but also larger.
(What’s the solution? Why is it like that? What are the benefits?)
(One or more images showing the UX pattern. They don’t have to be in GitLab.)
(When do you use this pattern? And how?)
Dos and dont's
(Use this table to add images and text describing what’s ok and not ok.)
No related patterns
Links / references
- Boostrap 4 Breakpoints
- Apple iOS
- Material Design
- Microsoft UWP: They use a scaling algorithm to ensure the same font size looks legible no matter the screen size.
- BBC GEL
- Buzzfeed Solid
- Shopify Polaris
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
- Ensure that you have broken things down into atoms, molecules, and organisms.
- Check that you have not created a duplicate of an existing pattern.
- Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
- Make sure that typography is using text styles. When applicable used shared styles for colors.
- QA check by another UXer
- Add changes to the pattern library
- Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue.
- Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)