Modifica el aspecto de las tipografías de tu web con jQuery

tipografias jquery

Lettering es un plugin jQuery desarrollado por tres grandes diseñadores (Jason Santa Maria, Frank Chimero y Naz Hamid) que vamos a poder utilizar para cambiar el aspecto visual de las tipografías de nuestro sitio, brindando el control por medio de CSS del aspecto individual de cada letra y de forma individual.

La idea detrás de este plugin es la de subdividir cada elemento tipográfico en muchos, para que nosotros podamos controlar por CSS la visualización de cada uno de ellos. Por ejemplo podemos aplicarlo de la siguiente forma:

HTML:

<h1 class="fancy_title">Some Title</h1>


JS:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
  $(".fancy_title").lettering();
});
</script>


Resultado:

<h1>
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Luego nosotros desde CSS tendremos que darle un efecto a la clase char con sus respectivos estilos individuales.

El plugin no solo divide por letras, eso lo podemos configurar tenemos la opción adicional para dividir por palabras o bien por lineas. Es realmente fácil de utilizar.

Web: Lettering

Categorizado en: