Compass extenstion / Sass mixin for inflating web type by generating media queries with progressively larger font sizes.
Example on my personal site.
From the command line:
gem install fittext
(depending on your ruby setup you may need to run sudo gem install fittext
)
Installing into your project:
# Edit config.rb and add:
require "fittext"
# Import the extension into your sass or scss file
@import "fittext"
@include fittext($min-media, $max-media, $min-font-size, $max-font-size, $media-increment, $font-increment, $ratio, $round)
The smallest, and first media query generated
Largest, and final media query generated (unless $max-font-size
is reached first)
$min-font-size
sets font size for the first media query, $max-font-size
for the max.
Set increase between media queries. $media-increment: 150px
would generate:
@media screen and (min-width: 300px) { ... }
@media screen and (min-width: 450px) { ... }
@media screen and (min-width: 600px) { ... }
Sets increase amount of font size for each media queries.
An extra value to get font sizes to increase non-linearly. Default 1
.
Boolean. Rounds font size with ceil()
. Default false
.
h1
font-size: 6em // For browsers that don't support media queries.
@include fittext($min-media: 200px, $max-media: 1400px, $min-font-size: 5em, $max-font-size: 50em, $media-increment: 100, $font-increment: 1.5, $ratio: 1, $round: false)