Lettering.js es una librería para jQuery que nos puede ayudar a simplificar el proceso de maquetado de nuestro encabezado si decidimos hacerlo 100% tipográfico y con CSS3. Con esta alternativa podemos trabajar muy sencillo con web fonts y además trabajar con responsive design sin estar subiendo un archivo de imagen como encabezado, facilitando así el posicionamiento web.
Muchas veces ocurre que tenemos un diseño de un sitio muy sencillo y tenemos que destacar el logo o título del site con los elementos tipográficos y es ahí donde buscamos ponernos creativos para poder realzar lo simple del diseño y tener un encabezado destacado y con un gran impacto tipográfico.
Lettering.js, controla la tipografía en tu web
La implementación de esta librería es muy sencilla, por lo que si estás nuevo en el mundo del diseño web no te va a resultar complicado de utilizar.
Descarga lettering.js y busca la tipografía que vas a usar para tu gran encabezado. Para este tutorial elegí la tipografía Arizonia desde Google Fonts. Si te fijas en el link, el mismo Google te dice cómo tenés que implementar la fuente en el HTML de tu sitio.
Dentro de las etiquetas <head> pegas el siguiente enlace:
Código :
<link href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css">
Luego pegamos el link al jquery y a la librería lettering.js:
Código :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.lettering.js"></script>
¿Cómo funciona lettering.js? muy sencillo, descompone en clases diferentes cada letra, palabra o línea de la oración. Si queremos trabajar letra por letra debemos usar la opción .lettering(), si queremos modificar una palabra entera entonces es la opción .lettering('words'), y si queremos referirnos a una línea o grupo de palabras usamos la opción .lettering('lines').
Para este tutorial solo cambiaré el color de la tipografía, con el mismo métodos podés agregarle fondos, animaciones, etc...
lettering()
Con esta opción cada letra se transforma en un span.char1,span.char2, etc… inclusive los espacios.En el html:
Código :
<body> <div id="content"> <h1 class="fuente">Six Bells Chime</h1> </div> </body>
En la implementación en Javascript solo tenemos que contar qué número de caracter es la letra que queremos modificar. En este caso modificaré las letras 1, 5 y 11:
Código :
<script type="javascript">
$(document).ready(function() {
//ejemplo1: aplicar color a la primer letra de cada palabra
$(".fuente").lettering()
.children("span.char5, span.char1, span.char11").css({'color':'crimson'});
});
</script>Veamos el resultado:
lettering('words')
Con esta opción cada palabra se transforma en un span.word1, span.word2, etc…en el html:
Código :
<body> <div id="content"> <h1 class="fuente2">Six Bells Chime</h1> </div> </body>
En la implementación en Javascript solo tenemos que contar qué número de palabra corresponde en la oración. En este caso modificaré la segunda palabra (span.word2):
Código :
<script type="javascript">
$(document).ready(function() {
//ejemplo 2: aplicar color a una palabra
$(".fuente2").lettering('words')
.children("span.word2").css({'color':'crimson'});
});
</script>
.lettering(‘lines’)
Con esta opción cada palabra se transforma en un span.word1, span.word2, etc…En el html:
Código :
<body> <div id="content"> <h1 class="fuente3">Six Bells <br/>Chime</h1> </div> </body>
En la implementación en Javascript solo tenemos que contar qué número de línea es en la oración. En este caso modificaré la primer línea (span.line1):
Código :
<script type="javascript">
$(document).ready(function() {
//ejemplo3:: aplicar color a una linea
$(".fuente3").lettering('lines')
.children("span.line1").css({'color':'crimson'});
});
</script>
Implementar los estilos desde el CSS
Si no manejas Javascript, teniendo en cuenta la manera de generar las clases y etiquetas de la librería, podés implementar los cambios en el CSS directamente, y en el javascript solo implementas las opciones principales. En este ejemplo también te muestro una opción más libre de usar tipografía, en el caso que necesites recrear por ejemplo un logo o alguna firma con CSS3.
En el html:
Código :
<body> <div id="content"> <h2>SBC</h2> </div> </body>
Código :
<script type="javascript">
$(document).ready(function() {
//ejemplo4:: aplicar color a una linea
//ejemplo4: aplicar estilos en el css
$("h2").lettering();
});
</script>En el CSS:
Código :
h2>span.char3{
font-size: 400px;
left: -350px;
}
Garabato en CSS3 
Como ven con muy pocas opciones podemos generar cosas que sin esta herramientas serían un poco más complicadas. Esta librería supone que la uses con cuidado y a discreción, ya que si la usas en exceso podrías generar un peso extra al usar en la web.
Algunos consejos de uso tipográfico en la web
- No abuses de las familias tipográficas: usar demasiados estilos sobrecarga el diseño y lo vuelve menos legible.
- Usa variantes de una misma familia: si necesitás resaltar textos o sectores, busca una fuente tipográfica que presente de manera legible las variantes de bold, cursiva y que se lea bien tanto a pequeña como a gran escala.
- Opta por una tipografía legible para los párrafos de textos y si utilizas títulos cortos podés tomarte algunas libertades con tipografías más complejas.
- No importes demasiadas librerías y fuentes en el HTML, recuerda que la tendencia es la web móvil por lo que sobrecargar demasiado el HTML va a ralentizar el tiempo de carga del sitio, sobre todo si visitan tu página desde algún dispositivo móvil.
Ver proyecto en github - Ver demo del tutorial
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Juan_1 el 13 de Marzo de 2014