A Pen by Naszvadi Gábor.

9/26/2013 - 7:53 PM

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,600,700);
@import url(http://fonts.googleapis.com/css?family=Bangers);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);

      
      

// =========================================
// ResponsiveFonts 
// =========================================
// Config
$base-width:960 !default;  // Width @ 100% layout or 1:1
$min-width:320  !default;  // Minimum width
$max-width:1200 !default;  // Maximum width

$ResponsiveFonts-init:false !default;          // only run once
@mixin ResponsiveFonts($args...){
  @if($ResponsiveFonts-init==false){
    $ResponsiveFonts-init:true;
	  $s:floor($min-width*100/$base-width);      // loop start counter
	  $e:ceil($max-width*100/$base-width);       // loop end counter 
	  $r:$base-width/100;                        // ratio (pixel in percent of basewidth)
	  $l:();                                     // list to hold passed selectors
	  @for $i from 1 through length($args){
	    $l:append($l,unquote(nth($args,$i)),comma);  
	  }
	  $l:if(length($l)==0,unquote('.responsive-fonts'),$l);
	  @for $i from $s through $e {
	    $p:percentage($i/$base-width)*$r;        // font-size percentage 
	    $t:if($i==$s,max,min);                   // media query type min/max
	    $w:round(if($i==$s,($r*$i)+($r - 1)*1px,$r*$i*1px)); // media query width 
	    @media (#{$t}-width:$w){                 // build mediaquery
	      #{$l}{ font-size:$p;}                  // percentual font-size
	    }
	  }
  }
}




$yellow-1:#ffce00;
$yellow-2:#ffc200;
$yellow-3:#ffbb00;


%clearfix {&:after {content:'';display: table;clear: both;}}
%rounded {
  -webkit-border-radius: 0.8em;
          border-radius: 0.8em;
  background-clip: padding-box;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
  margin:0; padding:0; text-decoration:none; outline:none
}
article,header,figure,img {display:block; }
html { font-size:100%; line-height:100%;}
pre  { margin:1em 0;}
.responsive-fonts { font-size:100%;}
.responsive-fonts span { font:400 4.9em 'Raleway', sans-serif;}

html{ background:$yellow-1;}
article { padding:3% 6%; margin:0 auto; min-width:$min-width * 1px; max-width:$max-width * 1px;  }
figure    { position:relative; margin:3rem 0 0; }
figcaption{ position:absolute; top:32%; font:3em 'Bangers', cursive; }
img       { width:100%; }
pre       { white-space:pre-wrap;}
h1        { text-transform:uppercase; } 
h2        { font:500 1.618rem/2.291 'Raleway', sans-serif; margin-bottom:2.291rem - 1.618rem;}
h3        { font:400 1.416rem/1.618 'Raleway', sans-serif; margin-bottom:1.618rem - 1.416rem;}
p,dt,dd,li{ font:300 1rem 'Lato', sans-serif; line-height:1.416rem; margin-bottom:1.416 - 1rem;}

dl        { margin:1.618em; @extend %clearfix; } 
dt, dd    { float:left; }
dt        { clear:left; width:100px; font-weight:400; }
ul        {list-style:none;}
li        {padding-left:1rem;}

.em span  { font-size:2em; }
.rem span { font-size:2rem; }
.pct span { font-size:200%; }
.px span  { font-size:32px; }

.done    { text-decoration:line-through; }

// Add media queries 
// Note! only the first @include will be effective
$base-width:960; // Width @ 100% layout or 1:1
$min-width:320;  // Minimum width
$max-width:1200; // Maximum width
@include ResponsiveFonts();      // default 
//@include ResponsiveFonts(html);  // Scale all em, rem and %
//@include ResponsiveFonts(body);  // Scale all em and % (rems are relative to body)
//@include ResponsiveFonts('.rfs');// I'm lazy don't want .responsive-font-size
//@include ResponsiveFonts('.foo','.bar'); // Other selectors just add


// CSS GEnerator
fieldset,pre { @extend %clearfix; border:0; padding:3% 5%; background:$yellow-2; @extend %rounded; }
label,a,button  { font:400 1em 'Lato', sans-serif; line-height:1.416rem; margin-bottom:1.416 - 1rem;}
label    { text-indent:5%; width:100%; float:left; clear:left; margin:0.2rem;}
input,textarea    { font-size:100%; padding:1%; width:75%; float:left; margin-right:-100%; margin-left:20%;  }
textarea {font-size:0.5em}
a { color:#333; 
    &:hover { background:#333; color:$yellow-1;}
  }
//a        { display:block; padding:0.2rem; font-size:1.416rem; color:#fff; text-decoration:none; display:none; }
textarea { resize: none;  }
button   { width:75%;  background:#231f20; color:#fff; padding:0.8em; float:left; border:1px solid #e3a600;  margin:1% 0 0; margin-right:-100%; margin-left:20%;}
@media (max-width:640px){
  label { font-size:1.5em; text-indent:0;}
  input,button,textarea { width:100%; margin:1% 0 0;}
}

::-webkit-selection { background:#fff0b2;  }
   ::-moz-selection { background:#fff0b2; }
        ::selection { background:#fff0b2;  }

script.js

$('textarea').hide()
$('textarea').on('blur',function(){$('textarea').slideUp()})
$('button').on('click',function(){
  var css='',
      bw=parseInt($('#bw').val().replace(/[^\d.]/g,''),10),
      min=parseInt($('#min').val().replace(/[^\d.]/g,''),10),
      max=parseInt($('#max').val().replace(/[^\d.]/g,''),10),
      elm=$('#elm').val(),
	    s=Math.floor(min*100/bw),      // loop start counter
	    e=Math.ceil(max*100/bw),       // loop end counter 
	    r=bw/100;                      // ratio (pixel in percent of basewidth)
  for(var i=s;i<e;++i){
    var p=Math.round((i/bw)*r*10000)/100,
        t=i==s?'max':'min',
        w=Math.round(i==s?r*i+r-1:r*i)+'px';
    css+='@media ('+t+'-width:'+w+'){'+elm+'{font-size:'+p+'%;}}\n'; 
  };
  
  $('textarea').text(css).height('100em').slideDown().focus().select();
  
})

index.html

<div>
<article>
  
  <h1 class="responsive-fonts">
    <span>Responsive Fonts</span>
  </h1>  

<figure class="responsive-fonts">
  <img src="http://a.fod4.com/images/user_photos/1335039/b892600c3e15fb4dd218c3fe081d8b52_fullsize.jpg" />
  <figcaption>Please Resize<br>Responsively</figcaption>
</figure> 
<fieldset class="responsive-fonts">
  <label>base-width:<input type="text" id="bw" value="960"/></label>
  <label>min-width:<input type="text" id="min" value="320"/></label>
  <label>max-width:<input type="text" id="max" value="1200"/></label>
  <label>selectors:<input type="text" id="elm" value=".responsive-fonts"/></label>  
  <label><button>Generate CSS</button></label>
  <label><textarea></textarea><label>
    </fieldset>    
  
  
  <h2>Beta version warning!!!</h2>
  <p>Responsive font sizing is based on a set of SCSS generated media queries – setting a percentual font-size in relation to the viewport width. </p>
  <pre>

<strong>HTML</strong>
&lt;header class="responsive-fonts"&gt;
  &lt;h1&gt;Responsive Font&lt;/h1&gt;
&lt;/header&gt;

or

&lt;h1 class="responsive-fonts"&gt;
  &lt;span&gt;Responsive Font&lt;/span&gt;
&lt;/h1&gt;

<strong>SCSS</strong>
  1) Set viewport breakpoints (pixels) 
  $base-width:960; // Design 1:1 
  $min-width:320;  // Lowest scaling point
  $max-width:1600; // Highest scaling point
    
  2) Create media queries
  @include ResponsiveFonts();

  3) Style your font 
     Note! if adding the class to a text element
     you must add an inline element eg. span
       
  h1, 
  h1.responsive-fonts span { font-size:2em; }

    </pre> 
    <p>Note! CSS output 4-10 KB - a little more than     most js versions... if you dont count loading jQuery ;)</p>
    <p>Note! ie8 needs respond.js </p>
    <p>Note! if applied to the HTML tag everything (em,rem,%) becomes responsive</p>
    <p>Note! if applied to the BODY tag everything (em,%) becomes responsive</p>  
    <p>Note! to avoid @include order problems add html or body before the target element<br>
       @include ResponsiveFonts('body .responsive-fonts'); 
    </p>  
    
  <div class="responsive-fonts em"><span>font-size:2em   </span></div>
  <div class="responsive-fonts pct"><span>font-size:200% </span></div>
  <div class="responsive-fonts rem"><span>font-size:2rem </span></div>
  <div class="responsive-fonts px"><span>font-size:32px  </span></div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
  
  <pre>
<strong>// SCSS Mixin v.1.0 - beta</strong>
// =========================================
// ResponsiveFonts 
// =========================================
// Config
$base-width:960 !default;  // Width @ 100% layout or 1:1
$min-width:320  !default;  // Minimum width
$max-width:2560 !default;  // Maximum width

// Tip!
// Setting a percentual min/max can be done like this:
// $min-width:$base-width * 0.5; // 50%;
// $max-width:$base-width * 1.5; // 150%;

// only run once
$ResponsiveFonts-init:false !default;          
@mixin ResponsiveFonts($args...){
  @if($ResponsiveFonts-init==false){
    $ResponsiveFonts-init:true;

    // loop start counter
    $s:floor($min-width*100/$base-width);      
 
    // loop end counter 
    $e:ceil($max-width*100/$base-width);       

    // ratio (pixel per percent of base-width)
    // It is a bit like the <a href="http://dev.w3.org/csswg/css-values/#viewport-relative-lengths" target="_blank">vw unit</a>
    $r:$base-width/100;            
            
   // list to hold passed selectors
    $l:();                                  
    @for $i from 1 through length($args){
      $l:append($l,unquote(nth($args,$i)),comma);  
    }
    $l:if(length($l)==0,unquote('.responsive-font-size'),$l);

    @for $i from $s through $e {
      // font-size percentage 
      $p:percentage($i/$base-width)*$r;        

      // media query type min/max
      $t:if($i==$s,max,min);      

      // media query width             
      $w:round(if($i==$s,($r*$i)+($r - 1)*1px+$r*1px,$r*$i*1px)); 

      // build media query
      @media (#{$t}-width:$w){                 
        #{$l}{ font-size:$p;}                  
      }
    }
  }
}

// Include examples 
// Note! only the first will work  
@include ResponsiveFonts();      // default 
@include ResponsiveFonts(html);  // Scale all em, rem and %
@include ResponsiveFonts(body);  // Scale all em and % (rems are relative to body)
@include ResponsiveFonts('.rf'); // I'm lazy don't want .responsive-fonts
@include ResponsiveFonts('.foo','.bar'); // Other selectors just add



Thank you for visiting 
and please comment :)
Jakob E


 
  </pre>
  <p>
    <strong>2DO's</strong>
  </p>  
    <ul>
      <li class="done">Add min width</li>
      <li class="done">Add max width</li>
      <li class="done">Create the damn mixin</li>
      <li class="done">Allow selector list html, body, class, id, article,...</li>
      <li class="done">Update the damn mixin</li>
      <li class="done">Be nice – make a js version for the non-SCSS'ers</li>
      <li>Write LESS mixin</li>
      <li>Move project to <a href="http://www.responsivefonts.com" target="_blank">responsivefonts.com</a></li>
      <li>Character limits - learn about <a href="http://simplefocus.com/flowtype/" target="_blank">flowtype</a> - thanks Nick <br>- maybe adding a min/max scale could solve this</li>
      <li>Nice things up</li>
      <li>Add config control min>max etc.</li>
      <li>Allow various units em, rem, cm,...</li>
      <li>Update the damn mixin again</li>
      <li>Begin work on baseline</li>
      <li>Make framework</li>
      <li>Buy bigger boat </li>
    </ul>
    <p>&nbsp;</p>
    <p><strong>Log:</strong></p>
    <ul>
       <li>2013.09.22 - Markup example updated</li>
       <li>2013.09.19 - Generator missing "}" bug fixed</li>
       <li>2013.09.19 - CSS generator added</li>
       <li>2013.09.19 - SCSS @mixin beta 1.0</li>
       <li>2013.09.19 - Just playing</li>
    <li>
  </ul>  
</article>
</div>

Responsive-Font-Sizing.markdown

Rendered
Source

Responsive Font Sizing

Responsive CSS font sizing generator including SCSS @mixin.

In short it creates a list of media queries creating relation between page width and font size – making em and percent based fonts scalable .

No js needed... If you don't care about ie8 ;)

Thanks for visiting Jakob E

A Pen by Naszvadi Gábor on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by Naszvadi Gábor.

Responsive Font Sizing