Responsive Font Sizing
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 - 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>
<header class="responsive-fonts"> <h1>Responsive Font</h1>
</header>
or
<h1 class="responsive-fonts"> <span>Responsive Font</span>
</h1>
<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> </p> <p> </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> </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();
})
Developer | Jakob-e |
Username | jakob-e |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 7,776 Kb |
Views | 38,456 |
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!
Name | Size |
Video wallpaper and css filters | 3,576 Kb |
Maintain aspect ratio or fit to content | 2,136 Kb |
Angular toggle password directive | 4,356 Kb |
Angular Tab Menu | 5,052 Kb |
Responsive Aspect-Ratio SCSS Mixin | 8,503 Kb |
Very Simple ViewPort Bookmarklet | 3,208 Kb |
SCSS Unit Conversion | 8,210 Kb |
Snap to base-line | 4,943 Kb |
SVG Encoding | 3,280 Kb |
Baseline, Scale and Element Queries | 8,635 Kb |
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!
Name | Username | Size |
Fullscreen audio play button | 72 | 2,148 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
The Rope | Chribbe | 2,886 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Profile box | Daniesy | 2,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!