Tipografia para desarrolladores

Taimur Abdaal lidera el diseño en Retool, una forma rápida de crear herramientas internas. Están trabajando en un nuevo sistema de diseño para su plataforma, que permitirá a cualquiera crear fácilmente hermosas aplicaciones personalizadas. La tipografía será una gran parte de esto y Taimur escribió esto basándose en esa experiencia.

Es posible que hayas leído el título de esta publicación y hayas pensado: “¿Por qué un desarrollador necesita saber algo sobre tipografía?” Quiero decir, ya tienes mucho entre manos y estás tomando cientos de decisiones al día. ¿Deberías usar React o Vue? ¿npm o hilo? ¿ES6 o ES7? Lamentablemente, esto a menudo deja algo como la tipografía como una ocurrencia de último momento. Pero recordemos que el diseño web es 95% tipografía:

El 95% de la información en la web es lenguaje escrito. Es lógico decir que un diseñador web debe recibir una buena formación en la disciplina principal de dar forma a la información escrita, en otras palabras: la tipografía.

Aunque nos ocupamos del contenido todos los días, ya sea leyéndolo, escribiéndolo o diseñándolo, profundizar en la tipografía puede resultar desalentador porque está llena de jerga y subjetividad, y es poco común verla enseñada extensamente en la escuela.

Esto pretende ser una guía práctica para que los desarrolladores aprendan tipografía web. Cubriremos una variedad de temas prácticos y útiles, como cómo elegir y usar fuentes personalizadas en la web, pero más importante aún, cómo diseñar el texto para crear una experiencia de agradable. Repasaremos los principios de la tipografía y las propiedades CSS que los controlan, así como consejos útiles para obtener buenos resultados rápidamente.

¿Qué es la tipografía?

En primer lugar, la tipografía tiene que ver con la usabilidad. El tipo es la interfaz de usuario para transmitir información, y transmitir información es lo que estamos aquí para hacer en la web. Hay muchas palancas que podemos utilizar para afectar la usabilidad de la lectura de texto, y solo siendo deliberados al respecto podemos crear una experiencia agradable para nuestros usuarios.

Después (y sólo después) de la usabilidad, la tipografía tiene que ver con la emoción. ¿Las cartas complementan tu contenido o lo contradicen? ¿Amplifican la personalidad de su marca o la amortiguan? Aplicados al mismo texto, diferentes tipos harán que las personas se sientan cosas diferentes. Ser deliberados con la tipografía nos permite controlar estos sentimientos.

A pesar de lo que muchos entusiastas de la proporción áurea podrían intentar decirte, la tipografía no es una ciencia exacta. Unas buenas pautas te ayudarán a lograrlo, pero también necesitarás aplicar un poco de intuición. Por suerte, has estado leyendo textos toda tu vida (libros, revistas, Internet), ¡así que tienes mucha más intuición sin explotar de lo que crees!

¿Qué hay en una fuente?

Comencemos a familiarizarnos con la terminología básica y cómo se clasifican las fuentes.

Tipo de letra frente a fuente

Así es como tradicionalmente se han definido y diferenciado entre sí:

• Tipo de letra: El diseño de una colección de glifos (por ejemplo, letras, números, símbolos)
• Fuente: tamaño, peso o estilo específico de un tipo de letra (por ejemplo, regular, negrita, cursiva).

En esencia, un tipo de letra es como una canción y una fuente es como su archivo MP3. Verás que ambos términos se utilizan en la literatura tipográfica, por lo que vale la pena conocer la distinción. “Fuente versus tipo de letra” también es un meme en la comunidad de diseño; es posible que lo veas aparecer en Twitter, por lo que será útil estar “informado”.

CÓMO 2 PRINCIPALES EN DISEÑO GRÁFICO:
– ELIGE UNA FUENTE
– “SE LLAMA TIPO DE LETRA, NO FUENTE”
– ELIGE UN MALDITO TIPO DE LETRA
– HICISTE LA ELECCIÓN EQUIVOCADA

– Deena (@itsDeenasaur) 2 de noviembre de 2014

Es posible que haya usado fuente y tipografía indistintamente en esta historia. Envíe todas las quejas a [email protected] . https://t.co/IuHHmlaNAT

– Tristin Hopper (@TristinHopper) 14 de enero de 2019

Pero, más recientemente, básicamente puedes usar ambos términos indistintamente y la gente sabrá a qué te refieres.

Cómo se clasifican las fuentes

La división más amplia es entre tipos de letra serif y sans-serif. Es probable que te hayas encontrado con estos términos simplemente al ver algunos nombres de tipos de letra flotando (como, por ejemplo, Comic Sans).

Un “serif” es un pequeño trazo que se coloca al final de las letras y les da un aspecto tradicional. De hecho, la mayoría de los libros y periódicos están escritos en tipografías serif. Por el contrario, las tipografías sans-serif no tienen estos trazos adicionales, lo que les da un aspecto suave y moderno.

Tanto las serif como las sans-serif tienen categorías dentro de ellas. Por ejemplo, serif tiene subcategorías que incluyen didone, losa y estilo antiguo.

En lo que respecta a las sans-serif, incluye las subcategorías humanista, geométrica y grotesca.

Las fuentes monoespaciadas (sí, fuentes) son una categoría digna de mención en sí misma. Cada glifo (es decir, letra/número/símbolo) en una fuente monoespaciada tiene el mismo ancho (de ahí la terminología monoespaciada), por lo que es posible organizarlos en estructuras visuales. Es posible que estés familiarizado con el monoespacio porque lo vemos a menudo al escribir código, donde es útil alinear los corchetes y las sangrías visualmente. Es probable que el editor de código que tienes abierto en este momento utilice monoespacio.

Cómo elegir fuentes y combinaciones de fuentes

Esto es subjetivo y depende de lo que intentes hacer. Cada tipo de letra tiene su propia personalidad, por lo que tendrás que encontrar uno que se alinee con tu marca o el contenido que comunica. Los tipos de letra deben considerarse dentro del contexto en el que se aplican. ¿Buscamos formalidad? Quizás empiece con la familia serif. ¿Cálido, divertido y amigable? Eso podría ser una señal para sans-serif. Diablos, hay un momento y un lugar incluso para Comic Sans… ¡de verdad! Sólo debes saber que no hay ninguna ciencia difícil para elegir una fuente, e incluso los tipógrafos más capacitados están considerando pistas contextuales para encontrar la “correcta”.

Pero las fuentes se pueden combinar en el mismo diseño. Por ejemplo, algunos diseños utilizan un tipo de letra para los títulos y otro para el cuerpo del texto. Esta es una buena manera de conseguir una apariencia única, pero se necesita bastante trabajo para lograrlo. Al igual que los colores en una paleta, algunos tipos de letras combinan bien mientras otros chocan. E incluso un enfrentamiento intencionado puede tener sentido, una vez más, si se da el contexto adecuado.

La única forma de saber si dos fuentes son complementarias es verlas juntas. Herramientas como FontPair y TypeConnection pueden ayudar con esto. Si una fuente te llama la atención cuando navegas por la web, WhatFont es una excelente extensión del navegador para ayudarte a identificarla. Otro gran recurso es Typewolf, que le permite ver ejemplos de excelente tipografía web, incluidas diferentes combinaciones de fuentes en uso:

Si bien hay mucha subjetividad al elegir las fuentes, existen algunas consideraciones objetivas.

Peso de fuente a considerar

Algunas familias de fuentes tienen una amplia gama de pesos de fuente (Light, Book, Regular, Medium, Semi-Bold, Bold, Black), mientras que otras solo tienen un par.

Si está creando una interfaz de usuario de aplicación web compleja, es posible que necesite una variedad de pesos de fuente para establecer una jerarquía en diferentes contextos. Para algo menos complejo, digamos un blog, probablemente estarás bien con solo un par.

Las fuentes variables son una nueva e interesante tecnología que proporciona un control preciso sobre las características de una fuente. Para los pesos de fuente, esto significa que ya no hay limitaciones para usar “Light”, “Regular” y “Negrita”, sino cualquier peso intermedio. Pruebe algunas fuentes variables aquí y consulte también la publicación de Ollie Williams.

Todavía es muy pronto: no hay muchas fuentes variables disponibles en este momento y la compatibilidad con los navegadores es limitada. ¡Pero definitivamente es un espacio que vale la pena tener en cuenta!

Considere la legibilidad de una fuente

Algunos tipos de letra son más difíciles de leer que otros. Manténgase alejado de fuentes elaboradas cuando se trata de párrafos, y si debe tener texto pequeño en alguna parte, asegúrese de que su tipo de letra sea legible en esos tamaños pequeños.

De estos dos ejemplos, ¿cuál es más agradable a la vista? (Aquí hay una respuesta correcta).

Recuerde, las fuentes vienen en una variedad de estilos.

Poner una fuente en negrita no es tan simple como agregar un contorno al texto, y la cursiva es más que letras inclinadas. Las buenas fuentes tienen estilos específicos de negrita y cursiva, sin los cuales el navegador intenta “falsificarlas”:

Estos estilos falsos tienden a reducir la legibilidad y romper la cohesión visual del texto porque el navegador solo puede hacer lo que tiene a su alcance. Si puede, utilice fuentes que ofrezcan estilos de negrita y cursiva auténticos.

Otras cosas que vale la pena considerar

Lo que hemos visto hasta ahora son las características y funciones de alto nivel de las fuentes que pueden ayudarnos a decidir cuál elegir para un diseño o contexto en particular. Hay muchas otras cosas que se pueden (y probablemente se deberían) tener en cuenta, entre ellas:

• Compatibilidad con idiomas: algunas fuentes tienen glifos para caracteres extranjeros, lo que puede ser un requisito para un proyecto dirigido a una audiencia multilingüe o que contenga contenido multilingüe.
• Ligaduras: algunas fuentes (normalmente serif) tienen glifos para reemplazar caracteres que de otro modo serían incómodos, como ffi y ffl, que son varios caracteres en un solo glifo.
• Tamaño del archivo: eres desarrollador, así que sé que te preocupas por el rendimiento. Algunas fuentes vienen en archivos más grandes que otras y pueden hacer que un sitio se vea afectado en los tiempos de carga.

Usar fuentes en la World Wide Web

Hace apenas 10 años, existían dos formas complejas de utilizar fuentes personalizadas en la web:

• SiFR: Incorporar un widget Flash (¿recuerdas esa cosa?) para renderizar texto.
• cufon: convertir la fuente a un formato propietario y utilizar un motor de renderizado de JavaScript específico para generar el texto utilizando VML en un HTML canvas.

Hoy en día, todo lo que necesitamos es uno simple: @font-face. Le permite especificar la URL de un archivo de fuente, que luego el navegador descarga y utiliza en su sitio.

Puede utilizar la @font-facedeclaración para definir su fuente personalizada:

@font-face {  font-family: 'MyWebFont';  src: url('webfont.eot'); /* IE9 Compat Modes */  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

Y luego referirse a él como normal, mediante el font-familyatributo:

body {  font-family: 'MyWebFont', Fallback, sans-serif;}

Aunque @font-faceestá a años luz de los enfoques de la vieja escuela para las fuentes web personalizadas, hay mucho que considerar en lo que respecta a la compatibilidad con el navegador. A continuación se ofrece una guía para obtener la cantidad adecuada de compatibilidad con varios navegadores.

El impacto de las fuentes en el rendimiento

El rendimiento es el único inconveniente de utilizar fuentes personalizadas en la web. Las fuentes son recursos relativamente grandes (a menudo de cientos de kilobytes de tamaño) y tendrán un efecto adverso en la velocidad de cualquier sitio.

A continuación se ofrecen algunos consejos para suavizar el golpe:

• Utilice la compresión GZIP en sus archivos de fuentes web.
• Deshabilite las funciones de fuente que no necesita, por ejemplo, sugerencias o kerning.
• Elimina los glifos que no necesitas, por ejemplo, caracteres de idiomas extranjeros.

Una herramienta que puede ayudarte a adaptar un archivo de fuente a tus necesidades es Transfonter. Solo asegúrate de tener los derechos para cualquier fuente que quieras usar en tu sitio porque, bueno, es lo correcto.

Algunos servicios alojarán fuentes web por usted

Otra forma importante de deshacerse del peso del uso de fuentes web personalizadas es utilizar un servicio que las aloje y las proporcione por usted. El beneficio aquí es que los terceros almacenan los archivos en una CDN rápida, los optimizan y los entregan en su sitio a través de un fragmento de JavaScript que se coloca en el encabezado del documento. En resumen: le quita muchas molestias.

¿Qué tan fácil es usar un servicio alojado? Tenga en cuenta que para usar cualquier cosa en Google Fonts solo se necesita un solo elemento linken el encabezado HTML:

html  head    link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"  style    body {      font-family: 'Roboto', sans-serif;    }  /style/head!-- Rest of the document --

Este ejemplo fue tomado de Google Fonts, el servicio de fuentes alojado más popular. Es de uso gratuito y, al momento de escribir este artículo, tiene un catálogo de 915 familias de fuentes. La calidad de estos puede ser impredecible. Algunos son verdaderamente de primera categoría: hermoso diseño, muchos pesos, verdadera negrita/cursiva y funciones avanzadas como ligaduras. Otros, normalmente los diseños más novedosos, son básicos y pueden no ser adecuados para proyectos serios con necesidades cambiantes.

Adobe Fonts también es muy popular. Viene incluido en la oferta Creative Cloud de Adobe, cuyo precio inicial es de 20,99 dólares al mes. En el momento de redactar este artículo, cuenta con un catálogo de 1.636 familias de fuentes. Por lo general, se trata de fuentes de alta calidad por las que tendría que pagar, pero con Adobe Fonts, puede acceder a todas ellas en un modelo de Netflix con todo incluido.

Aquí hay algunas otras opciones:

• Adobe Edge Web Fonts : esta es la versión gratuita de Adobe Fonts. Adobe se asoció con Google en esto, por lo que hay mucha superposición con la biblioteca de Google Fonts. Tiene 503 familias de fuentes en total.
• Fontspring : se trata de una biblioteca enorme con más de 14 000 familias de fuentes, pero con un modelo de licencia individual. Esto implica pagar más por adelantado, a partir de unos 20 USD por fuente individual (y por peso o estilo), pero sin costes recurrentes. Además, es autoservicio: tendrás que alojar los archivos tú mismo.
• MyFonts de Monotype : esta es la principal fundición tipográfica. Similar a Fontspring: biblioteca masiva de familias de fuentes con un modelo de licencia individual.
• Fonts.com : es similar a Fontspring. Tiene opciones de pago por uso o por única vez (según las visitas a la página).
• Cloud.typography de HoeflerCo : se trata de una importante fundición tipográfica. Más de 1000 familias de fuentes (todas de HoeflerCo), con opciones de fuentes web alojadas (suscripción, a partir de 99 USD al año) o autoalojadas (licencia individual). La ventaja es que tienes acceso a una biblioteca de fuentes que no puedes encontrar en ningún otro lugar.
• Fontstand : este servicio te permite “alquilar” fuentes individuales a bajo precio por mes (a partir de 10 dólares al mes), que podrás adquirir automáticamente después de 12 meses. Hasta la fecha, cuenta con 1500 familias y un servicio de fuentes web alojado.

CSS y tipografía

Bien, pasemos a la intersección del diseño y el desarrollo. Hemos cubierto muchos de los términos y conceptos fundamentales de la tipografía, pero ahora podemos centrar nuestra atención en las posibilidades que tenemos para manipular y diseñar el tipo, específicamente con CSS.

Ajuste del tamaño de fuente

Cambiar el tamaño de una fuente es algo que inevitablemente surge en un proyecto típico. El tamaño es importante porque crea una jerarquía, guiando implícitamente al usuario a través de la página. Por eso, en esta sección, veremos dos funciones CSS que están disponibles en nuestro conjunto de herramientas para ajustar los tamaños de fuente y crear una mejor jerarquía de contenido.

Los tamaños se pueden expresar en diferentes unidades de medida.

¿Sabías que existen 15 unidades de tamaño diferentes en CSS? Es una locura, ¿verdad? La mayoría de nosotros probablemente conozcamos y nos sintamos cómodos trabajando con píxeles ( px), pero hay muchas otras formas de definir el tamaño de una fuente.

Algunas de ellas son unidades relativas y otras son absolutas. El tamaño real de un elemento expresado en unidades relativas depende de otras partes de la página, mientras que el tamaño real de un elemento expresado en unidades absolutas es siempre el mismo. Y, como era de esperar, esa diferencia es importante porque cumplen funciones diferentes, según las necesidades del diseño.

De las 15 unidades que tenemos disponibles, nos fijaremos de forma selectiva en dos en concreto: pxy em. Estas no solo son quizás las dos unidades más utilizadas para definir tamaños de fuente, sino que también demuestran perfectamente la diferencia entre tamaño absoluto y relativo.

En primer lugar, pxes una unidad absoluta y en realidad no tiene mucho que ver con los píxeles (se considera una medida angular), pero está definida para que una línea de ancho 1pxparezca nítida y visible, sin importar la resolución de la pantalla. El pxvalor corresponde, aproximadamente, a un poco más que la distancia desde el ascendente más alto (por ejemplo, la parte superior de la letra A) hasta el descendente más bajo (por ejemplo, la parte inferior de la letra p) en la fuente. Algunas fuentes tienen letras más altas que otras, por lo que 16pxuna fuente puede parecer notablemente “más grande” que 16pxotra. ¡Otra consideración más a tener en cuenta a la hora de elegir una fuente!

Curiosamente, en el ámbito de la tipografía, la pxunidad es una unidad que se debe entender, pero no utilizar. El verdadero propósito de pxlas unidades es servir como base de un sistema tipográfico basado en unidades relativas. En otras palabras, es un valor absoluto al que una unidad relativa puede apuntar para definir su propio tamaño en relación con ese valor.

Lo que nos lleva a em, una unidad relativa. El texto con un tamaño de fuente 2emsería dos veces más grande que el font-sizede su elemento principal. Cada dispositivo tiene su propio valor predeterminado font-sizepara el bodyelemento. Por ejemplo, los navegadores de escritorio suelen utilizar de forma predeterminada 16px. Otros dispositivos (por ejemplo, teléfonos móviles y televisores) pueden tener diferentes valores predeterminados optimizados para sus factores de forma.

El emte permite razonar sobre tu tipografía de manera intuitiva: “Quiero que este título sea el doble de grande que el texto del párrafo” corresponde directamente a 2em. También es fácil de mantener: si necesitas una consulta de medios para hacer que todo sea más grande en dispositivos móviles, es una simple cuestión de aumentar un font-sizeatributo. El manejo de emunidades también te permite establecer otros elementos tipográficos en relación con font-size, como veremos más adelante.

Hay elementos HTML semánticos a los que CSS puede apuntar para ajustar el tamaño

Estás convencido de la idea de em, pero ¿cuántas emunidades debería tener cada elemento? Necesitarás una variedad de tamaños de texto para establecer una jerarquía entre los diferentes elementos de tu página. La mayoría de las veces, verás jerarquías de seis niveles de profundidad, que corresponden a los elementos de encabezado HTML, h1a través de h6.

La escala de tamaño adecuada depende del caso de uso. Como guía, muchas personas optan por utilizar una escala modular, es decir, una escala basada en una proporción constante para los elementos de texto sucesivos en la jerarquía.

Modular Scales es una herramienta de Tim Brown, quien popularizó este enfoque, que facilita la visualización de diferentes escalas de tamaño.

Cómo ajustar el espaciado vertical y la alineación de una fuente

El tamaño físico de una fuente es una forma muy común en la que usamos CSS para darle estilo a una fuente, pero el espaciado vertical es otra forma increíblemente poderosa en la que CSS puede ayudar a mejorar la legibilidad del contenido.

Use line-height para definir qué tan alto debe ser una línea de texto

La altura de la línea es uno de los factores más importantes que afectan la legibilidad. Está controlado por la line-heightpropiedad, que se expresa mejor como un número sin unidades que corresponde a un múltiplo del tamaño de fuente definido.

Digamos que estamos trabajando con un tamaño de fuente calculado de 16px(especificado en el CSS como emunidades, por supuesto), un line-heightde 1.2haría que cada línea fuera 19.2pxmás alta. (Recuerde que px en realidad no son píxeles, por lo que los decimales son válidos).

La mayoría de los navegadores utilizan de forma predeterminada un line-height de 1.2, pero el problema es que suele ser demasiado ajustado; probablemente quieras algo más parecido 1.5porque proporciona un poco más de espacio para tus ojos al leer.

Aquí hay algunas pautas generales para definir una buena altura de línea:

• Aumento line-heightpara fuentes gruesas
• Aumentar line-heightcuando las fuentes son de color oscuro
• Aumento line-heightpara contenido de formato largo

Las fuentes no pueden bailar, pero aún tienen ritmo.

El ritmo describe cómo el texto fluye verticalmente en una página. Al igual que la música, cierta consistencia y estructura generalmente conducen a un buen “ritmo”. Como la mayoría de las técnicas de diseño, el ritmo no es una ciencia exacta, pero existen algunas pautas sensatas que dan buenos resultados.

Una escuela de pensamiento prescribe el uso de la altura de la línea del párrafo como unidad de referencia a partir de la cual se derivan todos los demás espacios. Esto incluye espacios entre párrafos y títulos y relleno entre el texto y otros elementos de la página.

Con este sistema, puede establecer la altura de la línea de un título al doble de la altura de la línea de los párrafos y dejar un espacio de una línea entre el título y el párrafo. Convenientemente, puede usar las mismas emunidades para definir márgenes y relleno, por lo que realmente no hay necesidad de codificar nada.

Lea más sobre el ritmo aquí.

Forma horizontal

Con suerte, ya estará convencido de que el espaciado vertical es un factor importante para mejorar la legibilidad que podemos controlar en CSS. Igualmente importante es el espaciado horizontal de los caracteres individuales y el ancho total del contenido.

CSS puede controlar el espacio entre letras

El espaciado entre letras es uno de los factores más importantes que afectan la legibilidad. Está controlado por la letter-spacingpropiedad CSS, que se expresa mejor (de nuevo) en emunidades para mantener todo relativo. El espaciado entre letras (el término tipográfico para “espaciado entre letras”) depende completamente de la fuente: algunas fuentes se verán bien de manera predeterminada, mientras que otras pueden necesitar algunos ajustes.

En general, sólo debe preocuparse por el espaciado entre letras para elementos de texto que son particularmente grandes o pequeños porque la mayoría de las fuentes están bien espaciadas en un tamaño de párrafo típico.

En el caso de textos más grandes, como encabezados y títulos, a menudo conviene reducir el espacio entre las letras. Y un poco de espacio es de gran ayuda. Por ejemplo, -0.02emes un decimal diminuto, pero un buen punto de partida, que se puede modificar hasta que quede perfecto a simple vista. La única ocasión en la que debería pensar en aumentar el espacio entre las letras es cuando se trata de textos estilísticamente inusuales, como títulos en mayúsculas e incluso algunas secuencias numéricas.

Algunos pares de letras específicos, como AV, pueden verse mal espaciados sin un pequeño ajuste manual. Las fuentes bien diseñadas generalmente especifican un espaciado personalizado para dichos pares y configurar la font-kerningpropiedad en normalle permite habilitar esto. Los navegadores desactivan esto en textos más pequeños de forma predeterminada. Aquí hay un poco más sobre el espaciado entre letras, así como sobre otras herramientas CSS que tenemos para controlar el espaciado entre fuentes en general.

La longitud de una línea de texto es más importante de lo que crees

Es desagradable para nuestros ojos moverse largas distancias mientras leemos, por lo que el ancho de las líneas debe ser deliberado. El consenso general es que un buen ancho está entre 60 y 70 caracteres por línea. Si descubre que una línea de texto (especialmente para contenido extenso) se encuentra drásticamente fuera de este rango, entonces comience a ajustarlo.

Se chtrata de una unidad CSS poco conocida que no hemos tratado antes, pero que puede resultar útil para controlar la longitud de la línea. Es una unidad relativa, definida como el ancho del 0carácter en la fuente del elemento. Debido a que los caracteres estrechos como ly ison relativamente frecuentes, establecer el ancho de un contenedor de texto en algo como 50chdebería dar como resultado líneas de entre 60 y 70 caracteres.

p {  width: 50ch;}

CSS puede suavizar fuentes que de otro modo quedarían nítidas

-webkit-font-smoothinges una ingeniosa propiedad CSS que controla cómo se suavizan las fuentes. Esta es una forma elegante de decir que puede dibujar tonos de gris alrededor de píxeles que de otro modo serían cuadrados para crear una apariencia más suave. Sin embargo, tenga en cuenta el -webkitprefijo allí, porque indica que la propiedad sólo es compatible con los navegadores WebKit, por ejemplo, Safari.

La configuración predeterminada es subpixel-antialiased, pero vale la pena ver cómo se ve su tipo cuando está configurado en solo antialiased. Puede mejorar la apariencia de muchas fuentes, especialmente para texto sobre fondos que no son blancos.

En tamaños de fuente pequeños, esto debe usarse con precaución: reduce el contraste y afecta la legibilidad. También debes asegurarte de realizar ajustes letter-spacingal usar esto, ya que un mayor suavizado aumentará el espacio entre las letras.

Terminando

¡Uf! Cubrimos mucho terreno en un espacio relativamente corto. Aún así, esta no es de ninguna manera una guía exhaustiva, sino más bien algo que espero te anime a tomar más control sobre la tipografía en tus proyectos futuros ya buscar un conocimiento aún más profundo del tema. Para eso, compiló una lista de recursos adicionales para ayudarte a subir de nivel desde aquí.

---

Aprendiendo sobre tipografía

• Los elementos del estilo tipográfico aplicados a la web.
• La tipografía práctica de Butterick
• Mejor tipo de web

Inspiración tipográfica

• tipo lobo
• Fuentes en uso
• ¡Ay ay!

Identificación de fuentes

Qué fuente

identificador

Qué fuente

Tipografia en CSS

• Referencia CSS
• Guía de trucos CSS para tipografía