Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Improve line-height readability #35387

Merged

Conversation

oliviertassinari
Copy link
Member

A nitpick, a quick follow-up on https://groups.google.com/a/mui.com/g/design/c/S5t9m6klH7o.

The idea of this change is to bring a bit more space between each line of the docs. Right now, if you compare our line height of Tailwind CSS, https://mintlify.com/docs/quickstart or https://stripe.com/docs/billing/subscriptions/overview it seems that the new value match closer, and might be more enjoyable to read.

For the blog, maybe it makes sense to have a bit more line height?

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation design This is about UI or UX design, please involve a designer labels Dec 7, 2022
@@ -143,7 +143,6 @@ const Root = styled('div')(
marginBottom: theme.spacing(3),
},
'& .markdown-body': {
fontSize: theme.typography.pxToRem(16),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate with the default value.

@@ -10,6 +10,7 @@ import {
const Root = styled('div')(
({ theme }) => ({
...lightTheme.typography.body1,
lineHeight: 1.625,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the default is 1.5, 24 pixels, this is 26 pixels.

@mui-bot
Copy link

mui-bot commented Dec 7, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-35387--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 3a11558

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely reads better, sweet improvement! I'm not particularly bothered by the chosen value but it does feel like an isolated one rather than a point on a scale. cc @gerdadesign something to consider adding to the branding theme in a systematized way!

@oliviertassinari oliviertassinari enabled auto-merge (squash) December 11, 2022 11:37
@oliviertassinari oliviertassinari merged commit 731e9b5 into mui:master Dec 11, 2022
@oliviertassinari oliviertassinari deleted the improve-docs-line-height branch December 11, 2022 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants