DH
David Hellmann
2015/06/24

Sass — Responsive Font Size

Responsive Typography… Gestern wollte ich zum ersten mal REM nutzen. Sollte den meisten die irgendwas mit CSS zu tun haben zumindest schon mal über den Weg gelaufen sein. Im Grunde ähnlich wie EM nur das die die Berechnung immer vom ROOT ausgeht. Dann war ich kurz irgendwas zum Thema am googeln und bin über folgenden Artikel gestoßen: R.I.P. REM, Viva CSS Reference Pixel!…

…die REM Geschichte war dann sofort wieder gestorben. Richtig überzeugt war ich eh nicht. Wenn man REM nutzt hat man zwar die Möglichkeit leicht alle Font-Sizes über die ROOT-Font-Size zu steuern aber irgendwie ist das kein Anwendungsfall den ich bisher vermisst habe. Wenn will ich bestimmte Font-Sizes steuern bei gewissen Breakpoints aber sicher nicht alle. Meist sind es ja die Headlines die Probleme bereiten. Um das hier abzukürzen. Ich wollte es irgendwie anders, für mich besser lösen. Danke an Sascha für das unterstützen! Schaut es euch einfach mal an. Fragen / Kritik gern in den Kommentaren.

Typo Mixin und Settings:

      
        // Set Font-Sizes for Elements

$responsivetypo: (

  // Default Breakpoint (Mobile First)
  'default': (
    'tiny': (
      'fs': 12px, 'lh': 1.5,
    ),
    'p': (
      'fs': 14px, 'lh': 1.5,
    ),
    'h1': (
      'fs': 35px, 'lh': 1.25,
    ),
    'h2': (
      'fs': 25px, 'lh': 1.25,
    ),
    'h3': (
      'fs': 18px, 'lh': 1.25,
    ),
    'h4': (
      'fs': 14px, 'lh': 1.25,
    ),
  ),

  // Breakpoint Small
  'small': (
    'tiny': (
      'fs': 12px, 'lh': 1.5,
    ),
    'p': (
      'fs': 16px, 'lh': 1.5,
    ),
    'h1': (
      'fs': 80px, 'lh': 1.15,
    ),
    'h2': (
      'fs': 45px, 'lh': 1.15,
    ),
    'h3': (
      'fs': 20px, 'lh': 1.15,
    ),
    'h4': (
      'fs': 16px, 'lh': 1.25,
    ),
  )
);


@mixin typo($break: 'default', $type: 'p', $map: $responsivetypo) {
  // Get the Submap
  // $submap    : map-get(map-get($map, $break), $type); // Shorthand Version

  $firstlevel   : map-get($map, $break);        // get Breakpoint
  $secondlevel  : map-get($firstlevel, $type);  // get Element

  // Generate the Declaration
  font-size     : map-get($secondlevel,'fs');   // get font-size
  line-height   : map-get($secondlevel, 'lh');  // get line-height
}

// Example for Headlines

h1, h2, h3, h4, h5, h6 {
  font-family: font('headline');
  @include typo('default', 'p');
  text-transform: uppercase;
}

h1 {
  @include typo('default', 'h1');

  @include breakpoint('small') {
    @include typo('small', 'h1');
  }
}

h2 {
  @include typo('default', 'h2');

  @include breakpoint('small') {
    @include typo('small', 'h2');
  }
}

h3 {
  @include typo('default', 'h3');

  @include breakpoint('small') {
    @include typo('small', 'h3');
  }
}

h4 {
  @include typo('default', 'h4');

  @include breakpoint('small') {
    @include typo('small', 'h4');
  }
}
Development
Tags fonts responsive sass scss
comments powered by Disqus

Maybe interesting…

UP