Just like FitText.js but with svg and no jQuery
A Pen by Jason Weaver on CodePen.
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// Toolkit (v2.0.0.alpha.7) | |
// ---- | |
@import "toolkit"; | |
.wrapperclass { | |
@include intrinsic-ratio(4/3, 50%, 'img, figure') | |
} |
Just like FitText.js but with svg and no jQuery
A Pen by Jason Weaver on CodePen.
.one | |
.two | |
.three | |
.four |
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// Copied and Pasted from Harry Roberts Beutons - | |
// http://github.com/csswizardry/beautons/blob/master/beautons.css | |
// Base |
<div class="wrapperclass"> | |
<span> 16:9 </span> | |
</div> |
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// @mixin fixed-ratiobox(); | |
// stealed from https://github.com/Team-Sass/toolkit/blob/master/compass/stylesheets/toolkit/_intrinsic-ratio.scss | |
// | |
// usage: | |
// @include fixed-ratiobox(4/3, 50%, 'img, figure'); |
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// @mixin x-rem() | |
// | |
// mixin for easy use of rem with px as fallback | |
// usage: @include x-rem(14px); | |
// usage: @include x-rem(14px, font-size); |
// ---- | |
// Sass (v3.3.0) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
%icon { | |
font-family: 'zenicons'; | |
speak: none; | |
font-style: normal; |
// ---- | |
// Sass (v3.3.2) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// ============================================================================= | |
// Modernizr mixin | |
// | |
// Table of contents: | |
// 1. Modernizr mixin |
This text is set in JAF Bernina Sans, backed up by a Verdana stack. It uses a Sass map to scope font-size and line-height measurements to those specific typefaces, as Robin Rendle described. (Em units and max-widths, too.) See the variables and mixins in this other Pen.
Look at this Pen's own CSS and you'll see what I really wanted to explore. The paragraph element uses Verdana (and its associated measurements) by default, and only uses Bernina (and its associated measurements) if Bernina has loaded properly. The wf-active class is via Typekit font events. Progressive enhancement FTW.
When the composition widens and reaches a breakpoint, its size gets bumped up — again, considering Verdana by default and Bernina only if Bernina is present.
Tim B