Responsive Font Sizing

Developer
Size
7,776 Kb
Views
38,456

How do I make an 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 . . What is a responsive font sizing? How do you make a responsive font sizing? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Responsive Font Sizing Previews

Responsive Font Sizing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Font Sizing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Font Sizing - Script Codes CSS Codes

@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);
dl:after, fieldset:after, pre:after { content: ''; display: table; clear: both;
}
fieldset, pre { -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: #ffce00;
}
article { padding: 3% 6%; margin: 0 auto; min-width: 320px; max-width: 1200px;
}
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: 0.673rem;
}
h3 { font: 400 1.416rem/1.618 'Raleway', sans-serif; margin-bottom: 0.202rem;
}
p, dt, dd, li { font: 300 1rem 'Lato', sans-serif; line-height: 1.416rem; margin-bottom: 0.416rem;
}
dl { margin: 1.618em;
}
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;
}
@media (max-width: 325px) { html { font-size: 33%; }
}
@media (min-width: 326px) { html { font-size: 34%; }
}
@media (min-width: 336px) { html { font-size: 35%; }
}
@media (min-width: 346px) { html { font-size: 36%; }
}
@media (min-width: 355px) { html { font-size: 37%; }
}
@media (min-width: 365px) { html { font-size: 38%; }
}
@media (min-width: 374px) { html { font-size: 39%; }
}
@media (min-width: 384px) { html { font-size: 40%; }
}
@media (min-width: 394px) { html { font-size: 41%; }
}
@media (min-width: 403px) { html { font-size: 42%; }
}
@media (min-width: 413px) { html { font-size: 43%; }
}
@media (min-width: 422px) { html { font-size: 44%; }
}
@media (min-width: 432px) { html { font-size: 45%; }
}
@media (min-width: 442px) { html { font-size: 46%; }
}
@media (min-width: 451px) { html { font-size: 47%; }
}
@media (min-width: 461px) { html { font-size: 48%; }
}
@media (min-width: 470px) { html { font-size: 49%; }
}
@media (min-width: 480px) { html { font-size: 50%; }
}
@media (min-width: 490px) { html { font-size: 51%; }
}
@media (min-width: 499px) { html { font-size: 52%; }
}
@media (min-width: 509px) { html { font-size: 53%; }
}
@media (min-width: 518px) { html { font-size: 54%; }
}
@media (min-width: 528px) { html { font-size: 55%; }
}
@media (min-width: 538px) { html { font-size: 56%; }
}
@media (min-width: 547px) { html { font-size: 57%; }
}
@media (min-width: 557px) { html { font-size: 58%; }
}
@media (min-width: 566px) { html { font-size: 59%; }
}
@media (min-width: 576px) { html { font-size: 60%; }
}
@media (min-width: 586px) { html { font-size: 61%; }
}
@media (min-width: 595px) { html { font-size: 62%; }
}
@media (min-width: 605px) { html { font-size: 63%; }
}
@media (min-width: 614px) { html { font-size: 64%; }
}
@media (min-width: 624px) { html { font-size: 65%; }
}
@media (min-width: 634px) { html { font-size: 66%; }
}
@media (min-width: 643px) { html { font-size: 67%; }
}
@media (min-width: 653px) { html { font-size: 68%; }
}
@media (min-width: 662px) { html { font-size: 69%; }
}
@media (min-width: 672px) { html { font-size: 70%; }
}
@media (min-width: 682px) { html { font-size: 71%; }
}
@media (min-width: 691px) { html { font-size: 72%; }
}
@media (min-width: 701px) { html { font-size: 73%; }
}
@media (min-width: 710px) { html { font-size: 74%; }
}
@media (min-width: 720px) { html { font-size: 75%; }
}
@media (min-width: 730px) { html { font-size: 76%; }
}
@media (min-width: 739px) { html { font-size: 77%; }
}
@media (min-width: 749px) { html { font-size: 78%; }
}
@media (min-width: 758px) { html { font-size: 79%; }
}
@media (min-width: 768px) { html { font-size: 80%; }
}
@media (min-width: 778px) { html { font-size: 81%; }
}
@media (min-width: 787px) { html { font-size: 82%; }
}
@media (min-width: 797px) { html { font-size: 83%; }
}
@media (min-width: 806px) { html { font-size: 84%; }
}
@media (min-width: 816px) { html { font-size: 85%; }
}
@media (min-width: 826px) { html { font-size: 86%; }
}
@media (min-width: 835px) { html { font-size: 87%; }
}
@media (min-width: 845px) { html { font-size: 88%; }
}
@media (min-width: 854px) { html { font-size: 89%; }
}
@media (min-width: 864px) { html { font-size: 90%; }
}
@media (min-width: 874px) { html { font-size: 91%; }
}
@media (min-width: 883px) { html { font-size: 92%; }
}
@media (min-width: 893px) { html { font-size: 93%; }
}
@media (min-width: 902px) { html { font-size: 94%; }
}
@media (min-width: 912px) { html { font-size: 95%; }
}
@media (min-width: 922px) { html { font-size: 96%; }
}
@media (min-width: 931px) { html { font-size: 97%; }
}
@media (min-width: 941px) { html { font-size: 98%; }
}
@media (min-width: 950px) { html { font-size: 99%; }
}
@media (min-width: 960px) { html { font-size: 100%; }
}
@media (min-width: 970px) { html { font-size: 101%; }
}
@media (min-width: 979px) { html { font-size: 102%; }
}
@media (min-width: 989px) { html { font-size: 103%; }
}
@media (min-width: 998px) { html { font-size: 104%; }
}
@media (min-width: 1008px) { html { font-size: 105%; }
}
@media (min-width: 1018px) { html { font-size: 106%; }
}
@media (min-width: 1027px) { html { font-size: 107%; }
}
@media (min-width: 1037px) { html { font-size: 108%; }
}
@media (min-width: 1046px) { html { font-size: 109%; }
}
@media (min-width: 1056px) { html { font-size: 110%; }
}
@media (min-width: 1066px) { html { font-size: 111%; }
}
@media (min-width: 1075px) { html { font-size: 112%; }
}
@media (min-width: 1085px) { html { font-size: 113%; }
}
@media (min-width: 1094px) { html { font-size: 114%; }
}
@media (min-width: 1104px) { html { font-size: 115%; }
}
@media (min-width: 1114px) { html { font-size: 116%; }
}
@media (min-width: 1123px) { html { font-size: 117%; }
}
@media (min-width: 1133px) { html { font-size: 118%; }
}
@media (min-width: 1142px) { html { font-size: 119%; }
}
@media (min-width: 1152px) { html { font-size: 120%; }
}
@media (min-width: 1162px) { html { font-size: 121%; }
}
@media (min-width: 1171px) { html { font-size: 122%; }
}
@media (min-width: 1181px) { html { font-size: 123%; }
}
@media (min-width: 1190px) { html { font-size: 124%; }
}
@media (min-width: 1200px) { html { font-size: 125%; }
}
fieldset, pre { border: 0; padding: 3% 5%; background: #ffc200;
}
label, a, button { font: 400 1em 'Lato', sans-serif; line-height: 1.416rem; margin-bottom: 0.416rem;
}
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;
}
a:hover { background: #333; color: #ffce00;
}
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;
}

Responsive Font Sizing - Script Codes JS Codes

$('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();
})
Responsive Font Sizing - Script Codes
Responsive Font Sizing - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded July 04, 2022
Rating 4.5
Size 7,776 Kb
Views 38,456
Do you need developer help for Responsive Font Sizing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!