Como diseñador web, iniciar nuevos proyectos siempre es emocionante. Sin embargo, hay desafíos en los que me detengo y pierdo la concentración. Uno de estos es el diseño del contenido para los lectores, probablemente el aspecto más importante de cualquier sitio web. Con cada proyecto, este apartado terminaba convirtiéndose en un verdadero dolor de cabeza.
Arrastré este problema durante años hasta que finalmente decidí desarrollar una solución. Mi objetivo era claro: no podía seguir creando estilos de tipografía desde cero en cada proyecto. Necesitaba una solución flexible, fácil de mantener y aplicable a cualquier diseño. Al mismo tiempo, debía ser altamente personalizable sin generar dependencias.
En este artículo, te hablaré sobre Typography, mi proyecto para solucionar este problema. Veremos cómo instalarlo, aplicarlo y los beneficios que aporta para estilizar el contenido destinado a lectores.
Características
- Herencia: Se integra con tus estilos existentes sin interferencias.
- Responsive: Se adapta de forma natural sin necesidad de media queries.
- Moderno: Aprovecha características avanzadas de CSS con amplio soporte.
- Flexible: Usa una especificidad baja (10) para facilitar la personalización.
- Desacoplada: Funciona con cualquier estructura HTML sin requerir clases específicas.
Instalar
Sube e incluye el archivo main.min.css antes de cerrar la etiqueta </head>. Si no tienes servidor propio, puedes usar una CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zkreations/typography@1/main.min.css"/>Si estas trabajando en un proyecto usando npm, puedes instalar Typography como una dependencia, lo que te permite actualizarlo fácilmente:
npm install @zkreations/typographyPor último, necesitarás incluir el archivo CSS en tu proyecto en desarrollo. Esta es la ruta exacta:
node_modules/@zkreations/typography/main.min.cssModo de uso
Typography solo requiere de un contenedor con la clase typography para aplicar los estilos. Recuerda que esta destinado a ser usado en contenido legible, por lo que el código de su interior debe ser puramente semántico:
<div class="typography">
<h1>Heading</h1>
<p>This is a paragraph...</p>
</div>Personalizar
Aunque Typography no define un estilo específico a los elementos HTML, más allá de los estilos necesarios para la legibilidad, puedes personalizarlo los aspectos por defecto mediante variables CSS:
| Variable | Descripción |
|---|---|
--typo-border-color |
Color de los bordes |
--typo-caption-size |
Tamaño de fuentes para los captions |
--typo-caption-spacing |
Espaciado entre captions y el contenido |
--typo-code-background |
Fondo para el código |
--typo-code-padding |
Relleno para el código |
--typo-column-min |
Ancho mínimo de las columnas |
--typo-gallery-caption-background |
Fondo para el caption de la galería |
--typo-gallery-caption-color |
Color del caption de la galería |
--typo-gallery-caption-padding |
Relleno del caption de la galería |
--typo-gallery-min |
Ancho mínimo de la galería |
--typo-gallery-spacing |
Espaciado entre las imágenes de la galería |
--typo-heading-spacing |
Espaciado entre los encabezados y el contenido |
--typo-initial-letter |
Tamaño de la letra capital inicial |
--typo-spacing |
Espaciado entre los elementos |
--typo-spoiler-collapse-text |
Texto de colapso |
--typo-spoiler-expand-text |
Texto de expansión |
--typo-spoiler-padding |
Relleno del spoiler |
--typo-table-cell-padding |
Relleno de celdas de tabla |
Componentes
Ademas de los estilos de texto, Typography incluye algunos componentes opcionales que puedes usar para agregar nuevas funciones en el contenido destinado para lectores:
| Class | Descripción |
|---|---|
.typo-align-left |
Alinea un elemento a la izquierda con float. |
.typo-align-right |
Alinea un elemento a la derecha con float. |
.typo-align-center |
Centra un elemento. |
.typo-align-full |
Expande un elemento al 100% de ancho. |
.typo-columns |
Distribuye los elementos secundarios en columnas. |
.typo-gallery |
Distribuye imágenes en una galería. |
.typo-drop-cap |
Aplica un estilo de letra capital a un párrafo. |
.typo-spoiler |
Crea un spoiler expandible/colapsable. |
.typo-table |
Evita que las tablas se desborden. |
.typo-table-fixed |
Asegura un diseño de columna de tabla fijo. |
Anulación de estilos
La hoja de estilos utiliza una baja especificidad de 10 puntos, lo que significa que puedes anular los estilos sin importar si los aplicas antes o después de Typography:
/* Total de especificidad: 11 */
.typography blockquote {
color: #f00;
font-style: italic;
}Diseño desacoplado
Typography se basa en un principio fundamental: no depende de una estructura HTML específica. Desde su concepción, fue diseñado para estilizar elementos HTML básicos sin necesidad de intervención adicional. Además, el uso de sus componentes es opcional y se limita a un contenedor. Incluso si Typography deja de utilizarse, el contenido seguirá siendo legible y accesible.
Conclusión
Typography es una solución sencilla y ligera para estilizar el contenido legible de un sitio web. Con su enfoque en la herencia, la personalización y la compatibilidad con CSS moderno, Typography se adapta y crece junto a ti proyecto. Aunque fue creado para proyectos propios, he preferido compartirlo con la comunidad esperando que sea útil para otros diseñadores y desarrolladores.
Si te ha gustado este proyecto, puedes apoyarlo compartiéndolo o dejando una estrella en GitHub. Cualquier comentario o sugerencia es bienvenida. Muchas gracias por leer.
