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

Revisit responsive typography #533

Closed
jhabdas opened this Issue Sep 16, 2016 · 1 comment

Comments

Projects
None yet
2 participants
@jhabdas
Contributor

jhabdas commented Sep 16, 2016

This theme does a great job at managing responsive font sizes. But I noticed there's a need for another breakpoint for larger viewports. To get a feel for what I mean on OS X open System Preferences and access Displays, and scale for More Space as shown here:

screen shot 2016-09-16 at 11 01 35 am

Here's an example of what the theme looks like with the More Space setting on a Retina display with a full-screen browser window:

screen shot 2016-09-16 at 11 04 14 am

As you can see things are a bit eye-straining. As a result, next time responsive typography is revisited please consider adjusting based on the guidance here:

https://ia.net/know-how/responsive-typography-the-basics
https://ia.net/know-how/100e2r

And take a peek at how iA looks at the More Space setting:

screen shot 2016-09-16 at 11 07 41 am

Cheers!

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 16, 2016

Owner

This one is actually pretty easy to fix. I purposely set type in relative units like ems and rems to globally scale font-sizes and white space up/down.

Inside of _reset.scss there's this line that bumps up the base font size from the default of 16px to 18px. Could easily add another breakpoint to go to 20px for larger screens.

I'm not at my iMac currently, but if you wanted to test this minor change and see if it improves things that would be cool.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

+  @include breakpoint($large) {
+    font-size: 20px;
+  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

If type goes to large too quick might work better on $x-large instead.

Owner

mmistakes commented Sep 16, 2016

This one is actually pretty easy to fix. I purposely set type in relative units like ems and rems to globally scale font-sizes and white space up/down.

Inside of _reset.scss there's this line that bumps up the base font size from the default of 16px to 18px. Could easily add another breakpoint to go to 20px for larger screens.

I'm not at my iMac currently, but if you wanted to test this minor change and see if it improves things that would be cool.

html {
  /* apply a natural box layout model to all elements */
  box-sizing: border-box;
  background-color: $background-color;
  font-size: 16px;

  @include breakpoint($medium) {
    font-size: 18px;
  }

+  @include breakpoint($large) {
+    font-size: 20px;
+  }

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

If type goes to large too quick might work better on $x-large instead.

jhabdas added a commit to jhabdas/minimal-mistakes that referenced this issue Sep 16, 2016

@mmistakes mmistakes closed this in a483279 Sep 19, 2016

TheCodedSelf pushed a commit to TheCodedSelf/thecodedself.github.io that referenced this issue Dec 7, 2016

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment