He creado esta pequeña librería CSS para facilitarme la configuración del texto al momento de desarrollar páginas web o blogs a la que nombré «textCSS» (¿cómo más?).

El código está en Github para que cualquiera que quiera lo pueda ver, usar, adaptar y mejorar libremente.

Notas sobre el código

textCSS es el resultado de una pequeña investigación que hice sobre tipografía en la web, leyendo libros, artículos y haciendo algunas pruebas; con el fin de obtener texto legible que responda a diferentes tamaños de pantalla.

Web safe font-stack

El font-stack que utilicé es un conjunto de las mejores y más populares fuentes de cada sistema operativo, asegurándome así que mi página siempre tendrá una buena fuente en cualquier dispositivo.

Es el mismo que utilizan en Medium con un muy buen resultado. De echo, Medium me sirvió mucho de inspiración para crear textCSS

html {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Oxygen-Sans,
               Ubuntu,
               Cantarell,
               "Helvetica Neue",
               sans-serif;
}

También utilicé un stack aparte de fuentes web safe monoespaciadas para el texto de código.

pre, code {
  font-family: Consolas,
               Monaco,
               'Andale Mono',
               'Ubuntu Mono',
               monospace;
}

Tamaños de fuente

El texto inicia con un tamaño de 150% en el html (24px con la fuente inicial a 16px) para pantallas grandes. El resto del texto usa medidas relativas a este tamaño, haciendo que todo el texto se escale con solo cambiar este valor inicial.

Este tamaño puede parecer muy grande al principio, pero es porque uno no está acostumbrado a ver este tipo de tamaños en páginas. La realidad es que este tamaño es cómodo para pantallas grandes ya que el usuario normalmente las utiliza a una mayor distancia de la que utiliza, por ejemplo, un celular.

En pantallas medianas el tamaño de fuente disminuye a 125% (20px con fuente inicial de 16px) y en pantallas pequeñas tipo smartphone, el texto se reduce al 100% (16px con la fuente inicial a 16px).

Ritmo vertical

Para componer un buen ritmo vertical se necesita crear un sistema de lineas base. esto se logra configurando el alto de linea para que siempre tenga el mismo valor o múltiplos de ese valor.

En el caso de textCSS este valor es 1.5, o bien, 1.5 veces el valor del tamaño base de la fuente.

Por ejemplo: si el tamaño del texto base es de 24px el alto de linea será de 36px (1.5*24).

Si en algún caso como en el de un título o un subtitulo (que comúnmente son más grandes que el texto base) el texto sobrepasa el alto de la linea base, se utiliza un múltiplo del tamaño del alto linea base. Por ejemplo: para un subtitulo de tamaño 60px se necesita que el alto de linea para este subtitulo sea de 72px o sea, dos lineas de 36px. Fácil ¿no?.

Para guiarme mejor y asegurarme de que mi linea base no se rompía creé un patrón de fondo con CSS dándole el aspecto de cuaderno de colegio a la página de pruebas.

body {
  background-color: #fff;
  background-size: 100% 1.5em;
  background-image: -webkit-linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-image: -moz-linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-image: linear-gradient(to bottom,rgba(0,170,255,.3) 1px,transparent 1px);
  background-position: left top;
  background-repeat: repeat;
}

Qué sigue

• Estoy planeando utilizar tipografía fluida (fuild type) para que el texto se escale con la página y no en ciertos puntos como lo hace actualmente.
• También quiero hacer que la linea que subraya los enlaces se vea que está debajo del texto para mejorar la legibilidad.