typecsset icon indicating copy to clipboard operation
typecsset copied to clipboard

Add responsive typography

Open kmmathis opened this issue 12 years ago • 6 comments

Suggestion: write a function that allows you to specify $typecsset-base-font-size and $typecsset-base-line-height for any number of breakpoints.

More and more these days I'm modifying text size based on viewport, so it would be really neat to be able to do this out of the box.

I'd be more than willing to take a hack at it, just seeing if this functionality is something you'd be interested in having in the project.

kmmathis avatar Jan 15 '14 14:01 kmmathis

Here is a great example of what I'm talking about: http://typecast.com/blog/a-more-modern-scale-for-web-typography

kmmathis avatar Jan 20 '14 02:01 kmmathis

Can't you just set new values for the variable within the breakpoint?

cmdrrobin avatar Jan 30 '14 10:01 cmdrrobin

+1 - It would be nice to have a basic structure for this in the core

johjacb avatar Jan 30 '14 15:01 johjacb

+! Yes, this would be awesome!

vongoh avatar Apr 23 '14 15:04 vongoh

+1 I'd love to have that feature, too!

felixfischer avatar Nov 17 '14 14:11 felixfischer

I've done this the same way @rgruyters suggested.

@import "../third_party/typecsset/typecsset";

@media (min-width: $max-content-width) {
  $typecsset-base-font-size:      18px;
  $typecsset-base-line-height:    $base-line;

  // Heading sizes
  $typecsset-h1-size:             34px;
  $typecsset-h2-size:             30px;
  $typecsset-h3-size:             26px;
  $typecsset-h4-size:             22px;
  $typecsset-h5-size:             20px;
  $typecsset-h6-size:             18px;

  @import "../third_party/typecsset/typecsset";
}

gauntface avatar Jul 23 '15 07:07 gauntface