Tipografía con Tailwind - Parte I

Con el paso de los años, las tecnologías que hacen la vida del programador más fácil han ido ganando cada vez más espacio. Dada la practicidad en la que el mundo profundiza cada día, herramientas que aceleren nuestra interacción con el código, de hecho, serían consecuencia de nuestras demandas y, hoy, entre las más populares, abordaremos las Tailwind CSS.

Como no es posible cubrir todas las características y clases de Tailwind en un solo artículo, hoy aprenderemos algunas de las clases que implementan el estilo tipográfico. Digo “parte de las clases” porque dividiré este tema en más de un artículo con el fin de tratar a fondo ciertos conceptos. ¿Los conocemos?

Un poco más sobre Tailwind CSS

Por si no quedó claro en la introducción, Tailwind fue creado con la intención de ser una forma más práctica de aplicar estilos css en un proyecto determinado, siendo rápidamente adoptado por la comunidad y utilizado por muchas personas en la actualidad. Con él, en lugar de que la estilización la hagan classes repletas de atributos creado por el programador, está disponible un conjunto de clases diseñadas en el modelo atomic css, donde cada uno de ellos tiene una única función, como transformar el estilo de un texto a cursiva o alinearlo a la derecha. Este conjunto completo de clases se puede encontrar en documentación de Tailwind CSS e incluso si ninguno de ellos satisface tus necesidades, ¡también puedes crear otros nuevos que sí lo hagan!

Enfocado en el desarrollo mobile-first, todo el proceso de diseño se acelera y optimiza con Tailwind que, además de ser intuitivo, cuenta con documentación fácil de aprender y rápida de buscar: basta con introducir el nombre del atributo (p. ej. background-image o display) que proporciona el nombre de la clase que satisface la demanda y cómo utilizarla.

Implementando el Tailwind CSS

En la documentación de Tailwind CSS hay varias formas de instalarlo, dependiendo de la tecnología que esté utilizando (hay varias formas que Tailwind admite). Sigue paso a paso la instalación correspondiente pulsando el botón Get started en la pantalla principal.

Tipografía

Con la llegada de los avances en la tecnología de la información, la tipografía ya no cubre sólo la impresión de tipos de fuentes de texto y se ha convertido en el estudio, la creación, la aplicación de caracteres, estilos, formatos y disposiciones visuales de las palabras. Por eso, cuando digo que en este artículo trabajaremos clases relacionadas con la tipografía en Tailwind CSS, me refiero a clases que definen colores, tamaños, estilos, grosores y todo lo que implica estilizar textos y palabras. Entonces, ¡manos a la obra!

Font Family

El atributo font-family de css se refiere a definir una familia de fuentes que incluirá el texto de un elemento. Por defecto, tenemos tres clases que hacen estas definiciones en Tailwind:

• font-sans - Al utilizar esta clase, el texto del elemento pertence a la familia de fuentes ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol y Noto Color Emoji;
• font-serif - Esta clase trae una categoría de fuentes diferente a la anterior: ui-serif, Georgia, Cambria, Times New Roman, Times y serif;
• font-mono - Finalmente, tenemos esta clase que implementa las siguientes fuentes: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New y monospace.
  

Dejando a un lado parte de la descripción y definición, veamos la diferencia en la visualización de las tres clases:

Es importante resaltar que es posible crear nuevas clases con familias de fuentes que aún no existen en Tailwind. En Tailwind.Config de su proyecto (que estará dentro de una etiqueta de secuencia de comandos o será un archivo con el nombre mencionado) debe agregar el objeto fontFamily y, después de eso, crear un conjunto de claves y valores para la nueva clase. creada, donde la clave será el nombre de la clase y el valor será una lista con los nombres de las fuentes que forman parte de la nueva familia, como se muestra en la figura 4:

A continuación, solo es combinar la clase creada con el prefijo font-. En el ejemplo de la Figura 4, para utilizar las familias de fuentes creadas, la clase se insertaría en el elemento font-display o font-body.

Font Size

Ha llegado el momento de trabajar en el tamaño de las fuentes que estamos utilizando. Existen varias clases creadas por Tailwind con un rango de tamaños, que recomendamos ver con más profundidad en la documentación (citarlos todos aquí sólo haría que nuestros estudios fueran extensos y demandaran mucho tiempo). Mostraremos algunos de ellos en el siguiente ejemplo:

Nota: Así como para Font Family, puedes agregar nuevos tamaños de fuente si ninguna de las clases existentes satisface sus necesidades. Debes agregar el objeto fontSize y, luego de eso, crear un conjunto de clave y valor para la nueva clase a crear, donde la clave será el nombre de la clase y el valor será el tamaño de fuente que representa esta clase, como como se muestra en la figura 7:

Luego, simplemente fusione la clase creada con el prefijo text. En el ejemplo de la Figura 4, para usar el tamaño 5xl, se insertaría la clase text-5xl en el elemento.

Font Style

El Font Style de Tailwind es muy sencillo: permite aplicar o no un efecto de cursiva al elemento en cuestión. Para habilitarlo, simplemente agrega la clase italic. Para deshabilitar, utiliza la clase not-italic:

Font Weight

También puede definir el grosor del texto de un elemento. Para este aspecto, Tailwind proporciona nueve clases que van desde la escala más pequeña hasta la más grande, como veremos en el siguiente código:

Font Variant Numeric

El atributo font-variant-numeric de css engloba todas las clases que se encargan de controlar las variantes de un número. Hablar así, es realmente extraño, pero veremos cuatro de estas clases disponibles en Tailwind y entenderás la idea:

• normal-nums - es la clase por defecto cuando no utilizamos ninguna clase de variación numérica, donde no existe una variación específica para los numerales;
• proportional-nums - todos los números ahora tienen anchos completamente proporcionales;
• tabular-nums - todos los números ahora tienen anchos completamente uniformes;
• diagonal-fractions - reemplaza números separados por barras con fracciones diagonales comunes.
  

Nota: Sólo hemos cubierto cuatro de las clases principales de variantes numéricas, pero hay un total de nueve. Sin embargo, presta mucha atención al elegir el Font Family que vas a utilizar, porque algunas de ellas no tienen soporte para determinadas variantes.

Letter Spacing

El atributo de css letter-spacing define el espacio entre letras en el texto de un elemento. Todas las clases que Tailwind pone a disposición para este propósito se enumeran en la Figura 14, en orden ascendente, es decir, desde la clase con el espaciado más pequeño hasta el más grande:

Line Height

El line-height define la altura entre líneas del texto de un elemento. Como hay más de diez clases involucradas en esta función, recomiendo que leas la documentación para ver cuál de ellas satisfará tus necesidades. Aquí utilizaré tres para ejemplificar (leading-3, leading-5 y leading-10):

List Style Type

El list-style-type define el modelo de calificación que se utilizará en uno o más temas, por lo que estas calificaciones pueden no existir (usamos la clase list-none para eso), tener formato de disco (usando la clase list-disc) o ser enumerado (con la clase list-decimal). Observa:

List Style Position

Para finalizar este primer artículo sobre tipografía (y no menos importante), tenemos el list-style-position, que define si un marcador está dentro o fuera del cuerpo del texto (usamos list-inside en caso positivo y list-outside en caso negativo):

Consideraciones finales

Tailwind CSS es una herramienta muy fácil de asimilar y, a lo largo de este artículo, pudiste comprobar lo fácil que es aprender las estructuras de las clases que se ofrecen y también personalizarlas. Además, te sugiero que practiques la mayor parte de la tipografía que aprendiste en este artículo y, pronto, volveremos con una segunda parte donde aprenderemos aún más.

Si deseas realizar alguna consulta o simplemente quieres intercambiar alguna idea sobre estos y otros temas de otra manera, puedes contactarme por correo electrónico bruno.cabral.silva2018@gmail.com o en mi LinkedIn.

¡Hasta la próxima!