Reglas tipográficas: titulares llamativos con slabText para jQuery

La tipografía en el diseño web ha sido tratada como huérfana durante mucho tiempo. Con el auge de las fuentes web, la situación cambió y, gracias a jQuery, tenemos muchos pequeños y elegantes ayudantes para hacer que nuestros sitios sean más bonitos. Los complementos más avanzados incluso introducen posibilidades que antes solo conocían los diseñadores de impresión. Hoy vamos a echar un vistazo a slabText.js. Esta herramienta dividirá los encabezados más largos en dos o más filas y configurará estas filas con una justificación completa, donde cada fila se escala individualmente, lo que garantiza que llame la atención.

slabText: clon de FitText al principio, pero no a segunda vista…

Es posible que ya haya probado FitText, un complemento muy popular que, a primera vista, parece realizar las mismas tareas que pretende slabText. La diferencia es pequeña, pero profunda. FitText solo escala los encabezados de una fila al tamaño de su contenedor.

slabText da el siguiente paso y proporciona casi la misma funcionalidad para encabezados más largos. Tomando un título más largo marcado como H1, slabText lo dividirá en filas. Luego, toma estas filas y las justifica a la izquierda ya la derecha, lo que obviamente requiere cambios en el tamaño de fuente, ya que no todas las palabras se crean de la misma manera. Al hacerlo, slabText calcula por sí mismo dónde rellenar los saltos de línea. Pensando en anuncios de eventos u otros diseños con un enfoque en información estructurada, el salto de línea automático generalmente no conducirá a los resultados esperados. No tenemos que preocuparnos por eso, ya que slabText también permite establecer manualmente el salto de línea forzado. Todo lo que necesita hacer es completar el texto entre este marcado:

Incluso puede preestablecer saltos de línea usando JavaScript. Más adelante nos referiremos al siguiente ejemplo:

var stS = "",
    stE = "",
    txt = [
        "For one night only",
        "Jackie Mittoo",
        "with special Studio One guests", 
        "Dillinger & Lone Ranger"];
    
$("#myHeader").html(stS + txt.join(stE + stS) + stE).slabText();

Si no sabe dónde podría estar el problema, echemos un vistazo a un encabezado llamativo. La primera variante se basa en el salto de línea calculado automáticamente de slabText, mientras que la segunda alternativa muestra el salto de línea forzado según la configuración manual. Creo que estarás de acuerdo en que la segunda variante es mucho más atractiva, legible, cambia el mundo, qué más:

Propuesta de slabText: no óptima en aspectos de comunicación

Usando la función punto de vistaBreakpoint, podemos definir la resolución mínima para que se invoque el complemento. Por lo general, no querrá tener un encabezado escalado si el punto de vista de su navegador está por debajo de cierta resolución, digamos de 300 a 400 píxeles de ancho. Con la definición de un punto de interrupción, slabText permanece completamente inactivo (si se invoca en el rango definido), mientras que interpreta todas las demás resoluciones de forma receptiva.

Nota importante para los usuarios de fuentes web: asegúrese de que todas las fuentes estén cargadas antes de iniciar slabText. El sitio web del producto no se adhiere a esta regla, pero intencionalmente. El desarrollador quiere que vea el encabezado intacto durante un breve período de tiempo antes de que slabText entre en vigor. Los sitios web en vivo no deberían correr el riesgo de funcionar de esa manera.

slabText está en desarrollo activo. Los últimos cambios ocurrieron hace solo unos días. slabText se puede utilizar de forma gratuita bajo una licencia MIT-/GPL.

Enlaces relacionados:

• losaText.js para jQuery – Demoseita
• Desarrollo de slabText – Github