Perfectly responsive headlines with CSS and Javascript

Titulares tipográficos perfectamente receptivos con CSS y JavaScript

Al avanzar con todas sus nuevas estrategias para diseño web adaptable no olvides una de las partes más importantes: los títulos tipográficos. Manténgase por delante de la mayoría de los diseñadores web prestando mucha atención a cómo se reproducen los titulares en la página en diferentes tamaños. Eso significa ser muy intencional sobre el tamaño y los saltos de línea para el tipo. Estas son algunas de las opciones actuales para crear titulares grandes en todos los tamaños: algunos de la vieja escuela y menos versátiles y otros que le darán un resultado atractivo en todos los tamaños.

1. Usa una imagen: no recomendado

Realmente podría hacer bastante con solo una imagen con un ancho del 100% y una altura que se deja en automático o configurada en automático. El problema es que esto le quita el control a las personas que ingresan a su sitio para copiar o resaltar el texto, dificulta la accesibilidad o las personas con problemas de visión para acceder a su texto y también hace que el texto sea menos accesible para los motores de búsqueda.

¡Es tu titular! Desea que Google y otros motores de búsqueda vean cuánto énfasis está poniendo en ese texto con una etiqueta

envuelta en texto real, no en una imagen.

2. Use consultas de medios: (@media junto con em y rem para el tamaño de fuente).

Las consultas de medios con em y rem sufren porque el tamaño del texto no es 100% fluido. La mayoría de los diseñadores que veo están usando el método de consulta de medios, y tiene sus inconvenientes. Sin embargo, si hace esto, debe escribir una consulta de medios para cada tamaño si desea que el texto se adapte al navegador, pero en el medio no tiene un cambio incremental.

/** Por ejemplo, esta es la forma en que muchos diseñadores web actualmente hacen que sus titulares respondan **/

h1 {font-size: 37px;}
@media screen and (min-width: 768px and max-width: 1080px) {

h1 {tamaño de fuente: 29px}

}

Pantalla @media y (ancho mínimo: 500 px) y (ancho máximo: 768 px) {

h1 {tamaño de fuente: 21px}

}
}

Pantalla @media y (ancho máximo: 500 px) {

h1 {tamaño de fuente: 19px}

}
}
Pero ¿qué pasa con una mejor manera? ¿Uno que no requiera que escriba una nueva consulta de medios para cada tamaño?

3. Use unidades de ventana gráfica CSS: (vw, vh, vmax y vmin)

Para tener un poco menos de control que las opciones de Javascript, pero solo utilizando las nuevas convenciones de CSS, estas son increíbles. Para IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ (en otras palabras, la mayoría de los navegadores modernos), esta versión de CSS realmente puede hacer el truco;

h1 { font-size: 36px; /* Some in between fallback that isn't horrible */; font-size: 5.4vw;}

Algunas de las características de estos complementos de Javascript no están ahí, pero para la mayoría de los navegadores más nuevos, esto hace el trabajo. Si tiene titulares que generalmente mantiene en una sola línea, esto es perfecto sin el peso de Javascript. Pero, ¿qué hay de justificar el texto para que llegue al borde del contenedor y se nivele en cada línea? Es un titular después de todo.

Ahí es donde entra Javascript, y estos complementos de JS pueden hacer algunos cálculos por usted.

4. Texto grande: complemento JS

Aquí está uno de los complementos JS más simples de zach leat. Como puedes ver en este violín JS le permite implementar rápidamente algo como unidades CSS Viewport pero también con justificación. Para BigText necesita agregar divs alrededor de cada línea y envolverlos en un div con un id=”bigtext”.

Por supuesto cada uno de estos; BigText, FitText y SlabText requerirán que cargue el JS donde sea que esté cargando su JS en el sitio. Cada uno de estos debe cargar antes de cualquier cosa que oculte los elementos que está tratando de cambiar de tamaño, como controles deslizantes u otros archivos JS de esa naturaleza.

5. FitText – Complemento JS

Según los autores de FitText, Paravel; “Si su texto está cambiando de tamaño mal, puede modificar algo en el archivo Javascript llamado “The Compressor”, que funciona un poco como un amplificador de guitarra. El valor predeterminado es `1`. FitText ahora le permite especificar dos valores de píxeles opcionales: `minFontSize` y `maxFontSize`”. FitText es excelente para situaciones en las que desea preservar la jerarquía entre sus líneas. Asegúrese de que su contenedor tenga un ancho para que FitText pueda funcionar, para que sepa a qué tamaño debe ajustar el texto.

6. SlabText – Complemento JS

Esto es el favorito de muchos diseñadores, debido a la cantidad de control posible y las características muy elegantes. Una vez más, con el complemento SlabText JS, puede envolver ciertos grupos de palabras para asegurarse de que todas esas palabras permanezcan en una línea y que el texto esté justificado en cualquier tamaño y sea ideal para títulos más largos. Sara Soueidan creó un buen CodePen para demostrar la excelencia de esto, para que pueda verlo en acción.

Puede incluirlo o descargarlo de GitHub en esta ubicación:

http://freqdec.github.io/slabText/js/jquery.slabtext.min.js

Y activar así:
€("h1").slabText({
// Don't slabtext the headers if the viewport is under 380px
"viewportBreakpoint":380
});

Consulte una publicación más detallada sobre cómo implementar esto, pruébelo ahora y vea lo fácil que podría ser.

Los titulares necesitan amor en la web y no siempre reciben la atención que merecen, incluso sabiendo que establecen el tono visual para tantos sitios. Si les prestas atención y les das un poco de amor con uno de estos métodos, es solo una forma más de diferenciar los diseños de tu sitio web de otros sitios.

El autor

Tim Brown es diseñador web y comercializador de SEO Minneapolis y que es particularmente apasionado por la tipografía en lo que se refiere a diseño web.

(dpe)

#Titulares #tipográficos #perfectamente #receptivos #con #CSS #JavaScript

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *