GoJYOo

GoJYOo.markdown

GoJYOo

A Pen by Trevor Clarke on CodePen.

License.

index.html

<h3><strong>Pain Point:</strong> How do you create fonts that look good on all screen sizes?</h2>
<h6><strong>Solution:</strong> Use a viewport width ratio for fully scaling text. Enables adaptive font sizing, so you can keep your designers happy :)</h5>
<h1>h1 Title Case</h1>
<h2>h2 Title Case</h2>
<h3>h3 Title Case</h3>
<h4>h4 Title Case</h4>
<h5>h5 Title Case</h5>
<h6>h6 Title Case</h6>

style.css

// Variables
$letter-spacing:        0.05em;
// IMPORTANT: This is based on the relationship between font-size & line-height. 
// To calculate: line-height / font-size = $goldenFontRatio
$goldenFontRatio:       1.77;

// Font Spec
// IMPORTANT: Edit only these ratios and max
// ratio is calculated based from:
//   1. The design
//   2. Viewport Width "vw" at the lowest screen size supported.
$titleCases: (
  h1: (
    ratio: 6.2, 
    max: 68.2
  ),
  h2: (
    ratio: 5.8,  
    max: 61.8px
  ),
  h3: (
    ratio: 4.7,  
    max: 46px
  ),
  h4: (
    ratio: 3.9,  
    max: 34.5px
  ),
  h5: (
    ratio: 3.6,  
    max: 30.2px
  ),
  h6: (
    ratio: 3.4,  
    max: 27.3px
  )
);

// Setup media cases based off of your grid breakpoints, also chuckle a little bit about the variable name. ;)
$screenCases: (
  xs: (
    size: 480px,
    offset: 0.75
  ),
  sm: (
    size: 768px,
    offset: 1
  ),
  md: (
    size: 1024px,
    offset: 1.25
  ),
  lg: (
    size: 1228px,
    offset: 1.5
  ),
  xl: (
    size: 1440px,
    offset: 0
  )
);

// Generator
// Using ratio sizing, with fallback for standards
// This allows for sizing of text upon each screen size to match designs no matter the width/height
@mixin generateFont($size, $weight, $style, $family){
  // adds fallbacks just in case
  font-size: $size + 0px;
  line-height: $size + 7px;

  @if unitless($size){
    font: $style $weight #{$size + 0vw}/#{$size * $goldenFontRatio + 0vw} $family;
  } @else {
    font: $style $weight #{$size}/#{$size * $goldenFontRatio} $family;
  }
}
// Minor ratio sizing for adjustments, stops at max as long as px is defined
@mixin fontSizing($size, $unit){
  // adds fallbacks just in case
  font-size: $size + $unit;
  line-height: $size * $goldenFontRatio + $unit;
}


// Font Helpers
$helvetica-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
// Useful for quick font styling within other areas
@mixin helv($size: 5.5, $style: normal) {
  @include generateFont($size, 400, $style, $helvetica-font);
}


$ii: 0;
// Loop through and generate the scaling definitions!
// This is where the magic comes together, and creates awesomesauce
@each $title, $value in $titleCases {
  $ii: $ii + 0.01;
  $ratio: map-get($value, ratio);
  $max: map-get($value, max);

  #{$title} {
    letter-spacing: $letter-spacing + $ii;
    @include helv($ratio);

    @each $view, $query in $screenCases {
      $size: map-get($query, size);
      $offset: map-get($query, offset);
      
      @media(min-width: $size){
        @if $view == xl {
          @include fontSizing($max, 0px);
        } @else {
          @include fontSizing($ratio - $offset, 0vw);
        }
      }
    }

  }

}