Si estaba desarrollando sitios en 2006, es posible que haya trabajado con un diseñador como yo, que estaba en su negocio porque las fuentes no se veían exactamente igual en el navegador que en las maquetas.
Entonces, es posible que haya intentado explicarme los problemas de la compatibilidad entre navegadores y cómo los diferentes navegadores representan las fuentes de manera diferente entre sí. En respuesta, probablemente le hubiera enviado un archivo de imagen que contiene el contenido para asegurarme de que todo se vea igual en todos los navegadores. Sí, yo era uno de esos diseñadores.
Las fuentes web han recorrido un largo camino desde entonces y ahora tenemos herramientas para modificar la forma en que se representan las fuentes en los navegadores. Algunos han existido durante bastante tiempo. Recuerdo mi mente casi a punto de estallar de emoción cuando descubrí FitText.js y Lettering.js hace mucho tiempo.
Hoy en día, todavía existen muchas situaciones en las que es necesario ajustar las fuentes para garantizar la mejor legibilidad a pesar de tener todas estas herramientas sofisticadas. Vamos a cubrir algunos de ellos en esta publicación junto con métodos sobre cómo lidiar con ellos.
Conseguir que un título exacto se vea bien
A menudo me encuentro con este, especialmente cuando un diseño contiene una fuente web altamente personalizada que se ve muy bien en general, pero que puede verse extraña cuando se usa en un contexto determinado.
Tome el siguiente título usando Abril Fatface de Google Fonts:
¡Es una fuente preciosa! Sin embargo, hay un par de puntos que no me gustan de este título en particular, específicamente el espacio entre un par de letras, lo que hace que las cosas estén un poco abarrotadas:
Aquí es donde interletrado viene al rescate! El kerning se define literalmente como el espacio entre letras. Todos los archivos de fuentes, lo sepamos o no, contienen algún grado de kerning y tenemos el CSS font-kerning propiedad para eliminarlo:
.no-kern-please {
font-kerning: none;
}<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1>Es una diferencia sutil, pero que puede resultar útil si su diseñador (o su propio ojo) quiere hacerlo.
Tenga en cuenta que deshabilitar el kerning no siempre es lo mejor para usted. Como señaló James Kolce en un comentario a continuación, los tipos bien diseñados usan el kerning como herramienta y tienen una razón para hacerlo. Eliminar el kerning con CSS, mientras se abordan algunas necesidades de diseño específicas en una situación única, podría tener consecuencias no deseadas en el espaciado entre letras en la fuente en general, lo que podría hacer que el espaciado entre otras letras no sea tan bueno.
Vea el cambio de kerning de lápiz por Programar Plus(@ css-tricks) en CodePen.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 29 * | 34 | No | 79 | 7 * |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 4,4 * | 8 * |
Arreglar el espaciado deficiente entre letras en todos los ámbitos
Si alguna vez ha trabajado con una fuente web en la que el espacio entre cada letra es demasiado ancho o demasiado estrecho, entonces sabe exactamente lo dolorosa que es esta situación. Aquí hay un ejemplo usando otra hermosa fuente web de Google llamada Dorsa:
Eso podría ser una fuente de visualización decente para los titulares, pero ¿se imagina tratando de leer eso como un párrafo? No bueno.
¡Es un poco difícil leer ese contenido!
El CSS letter-spacing La propiedad puede ayudar a realizar un cambio radical en el contenido del párrafo si agregamos un par de píxeles entre cada letra:
.spaced-out {
letter-spacing: 2px;
}No iría tan lejos como para decir que esta sigue siendo la mejor fuente para texto de párrafo, pero es mucho más fácil de leer con ese espacio adicional:
Vea el Pen zKkPqK de Programar Plus(@ css-tricks) en CodePen.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 30 | 2 | 9 | 12 | 6.1 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 4.4 | 4.0-4.1 |
Muy poco o demasiado espacio entre palabras.
Esta es una derivación de la última situación, excepto que los problemas de espaciado son entre cada palabra y no entre caracteres individuales.
Aquí es donde el CSS word-spacing La propiedad es excelente y aceptada universalmente por todos los navegadores. Aquí hay un ejemplo de una prosa que usa la fuente web Prompt, que es un poco más ancha que muchas otras fuentes y se vería mejor si se redujera un poco para este caso de uso.
Vea el Pen GjJaaE de Geoff Graham (@geoffgraham) en CodePen.
Espaciado retorcido entre líneas
No todas las alturas de línea se consideran iguales. Considere la forma en que algunas fuentes se ven más grandes que otras, a pesar de que tienen las mismas asignaciones font-size valor.
Vea la Diferencia de lápiz en la altura de la línea por fuente por Programar Plus(@ css-tricks) en CodePen.
Establecer el font-size establece el cuadro delimitador para el que una fuente puede ocupar espacio. Si configuramos nuestro font-size en 20px entonces eso crea una caja que ocupa 20px de espacio vertical para que lo ocupe cada personaje.
Algunas fuentes ocuparán más espacio que otras y darán la apariencia de que una fuente es más grande que la otra, pero también de que hay más o menos espacio vertical entre líneas.
Podemos usar el line-height propiedad para ayudar a ajustar ese espacio vertical. Una regla de oro decente es algo como font-size * 1.5 = line-height (o usa un unitless line-height: 1.5;) por legibilidad, pero eso dependerá de la fuente que se utilice y de cómo ocupe el espacio vertical. Vea el plomo fundido.
Nitidez y legibilidad
No todas las fuentes se crean de la misma manera en todos los sistemas operativos. Esto se debe a que cada sistema operativo, ya sea Windows, Mac OS o cualquier otro, tendrá un proceso diferente para la cantidad de píxeles que se utilizarán al mostrar las fuentes.
Muchos de nosotros, los diseñadores web, detestamos la idea de estar en deuda con la forma en que un sistema interpreta nuestras decisiones tipográficas.
Fuente de la imagen: webtype.com
Tenemos propiedades CSS a nuestra disposición para aumentar la resolución aparente de cómo se muestran las fuentes en diferentes sistemas. Este proceso se conoce más formalmente como representación de subpíxeles porque indica al navegador que intente rellenar los píxeles faltantes donde puedan existir.
No hay escasez de #hotdrama sobre si es apropiado jugar con la representación de subpíxeles de las fuentes. A pesar de haber sido escrito hace unos años, Dmitry Fadeyev resumió muy bien su argumento contra la práctica.
El modo de suavizado no es una “solución” para la representación de subpíxeles; en la mayoría de los casos, es una desventaja. El renderizado de subpíxeles es técnicamente superior, más claro y más legible que el antialiasing porque al utilizar cada uno de los subpíxeles aumenta tres veces la resolución efectiva utilizada para suavizar la fuente. El suavizado es útil en determinadas circunstancias, como para el texto claro sobre oscuro, pero no sustituye en absoluto al renderizado de subpíxeles y, desde luego, no es una “solución”.
Pero digamos que queríamos hacerlo de todos modos. CSS nos da un cierto nivel de control sobre la nitidez y la legibilidad al usar font-smooth para completar lo que los sistemas operativos podrían dejar atrás.
El font-smooth los valores incluyen:
auto: Permite que el navegador decida el mejor caso para completar píxeles en las fuentes.never: Desactiva el sistema de suavizado automático de fuentes. Esto mostrará la fuente en su estado natural, bordes irregulares y todo.always: Indica al navegador que siempre agregue píxeles a las fuentes donde vea la oportunidad.
Nota: El font-smooth La propiedad se considera una propiedad no oficial en el momento de escribir este artículo y no se recomienda su uso en un sitio de producción. Hay prefijos de proveedores para lograr el efecto en WebKit y Mozilla, aunque no existe una implementación estándar.
Teniendo en cuenta esa nota, los siguientes prefijos de proveedores están disponibles actualmente con sus propios valores:
-webkit-font-smoothing
none: Desactiva el suavizado de fuentes en los navegadores WebKit.antialiased: Suaviza la fuente al mismo nivel que los píxeles que ya proporciona el sistema.subpixel-antialiased: Suaviza la fuente en un nivel más micro para dar el texto más nítido posible, particularmente en pantallas de alta resolución.
-moz-osx-font-smoothing
auto: Permite que el navegador decida si optimizar la suavidad de la fuente.inherit: Toma el valor de propiedad del elemento padre.unset: Lo mismo que especificarnoneen el prefijo WebKit.grayscale: Similar aantialiasedvalor en el prefijo WebKit.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 99 * | 97 * | No | 96 * | TP * |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| No | No | No | No |
Oh, espera, ¿estás usando SVG?
SVG tiene su propio nivel de soporte para las técnicas que hemos estado cubriendo en esta publicación. Tenemos el interletraje (no es probable que haga mucho) y los sospechosos habituales: espaciado entre letras y palabras. Curiosamente, también tenemos un textLength atributo que se puede usar para establecer explícitamente qué tan ancho se debe representar el texto, y estirará / aplastará el texto para acomodarlo. El atributo lengthAdjust controla si eso debería suceder solo con los caracteres o con los glifos (como la puntuación) también.
Vea el espaciado de texto SVG de lápiz por Programar Plus(@ css-tricks) en CodePen.
En conclusión
¡La tipografía en la web es difícil! Sí, tenemos un montón de control sobre cómo se muestra, renderiza y posiciona el tipo en la pantalla. Pero un gran poder conlleva una gran responsabilidad. Al menos ahora tiene algunas herramientas a su disposición para responder a los diseñadores web que están atascados en la precisión del diseño tipográfico en el navegador.