Tipografía responsiva

readme.md

FlowType.JS

Pequeña descripción

1. Objetivo y descripción
2. Dependencias
3. Puesta en marcha
4. Referencias
5. Créditos y autor

Objetivo y descripción

El objetivo de este plugin es hacer la tipografía completamente responsiva con pocas líneas de código. Se basa en font-size de CSS, lo que lo hace muy eficiente e incluso con grandes cantidades de text.

Dependencias

• FlowType.JS
• jQuery

Puesta en marcha

1. Descargar la librería de FlowType.JS aquí
2. Importa el archivo flowtype.js en el head de tu HTML junto con jQuery
3. Prepara tu CSS de la siguiente manera:
   
   

   body {<br/>
   &nbsp;&nbsp;&nbsp;font-size: 18px;<br/>
   }<br/>
   h1,h2,h3,h4,h5,h6,p {<br/>
   &nbsp;&nbsp;&nbsp;line-height: 1.45;<br/>
   }<br/>
   h1 { font-size: 4em; }<br/>
   h2 { font-size: 3em; }<br/>
   h3 { etc...

4. Antes de cerrar tu tag body, incluye este script dónde puedes editar las opciones de FlowType.JS:
   
   

$('body').flowtype({<br/>
 &nbsp;&nbsp;&nbsp;minimum   : 500,<br/>
 &nbsp;&nbsp;&nbsp;maximum   : 1200,<br/>
 &nbsp;&nbsp;&nbsp;minFont   : 12,<br/>
 &nbsp;&nbsp;&nbsp;maxFont   : 40,<br/>
 &nbsp;&nbsp;&nbsp;fontRatio : 30<br/>
});

Referencias

• Homepage FlowType.JS:
  • FlowType.JS
• Ejemplo con mucho texto:
  • Text Heavy Page

Créditos y autor

• Autor del snippet: Diego Cordero @diegocordero
• Los snippets pertenecen a KamikazeLab