Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Uso general

Nuestra tipografía base es Nunito Sans, la cual es una fuente gratuita disponible en Google Fonts. En el archivo a la derecha se muestran los tamaños de los encabezados, párrafos y otros usos.

Macrotipografía

Formato, justificación, tamaño de letra, interlineado

Microtipografía

Configuración de los tipos de letra en sí y los espacios entre caracteres y palabras

A continuación se detallan otros factores que hay que tener en cuenta en lo referente a la tipografía responsiva:

El tamaño de la fuente no solo debe adaptarse al tamaño de la pantalla, sino que también ha de tener en cuenta la distancia normal que hay entre esta y el usuario. Seguramente dicha distancia será menor para la pantalla de un smartphone que para grandes monitores de un equipo de mesa. El tamaño de la fuente también depende de la resolución de la pantalla.

El interlineado debería ajustarse siempre a la pantalla –el interlineado justo para una buena legibilidad depende, entre otras cosas, de la longitud de las líneas.

El diseño de la página ha de dejar, asimismo, suficientes espacios tipográficos o áreas sin escritura en el fondo, ya que esto también repercute en la legibilidad de un texto.

No hay que olvidar, por otro lado, que el color de la fuente debería ser algo más intenso y el contraste algo más alto para una mejor visualización en pantallas pequeñas. Al contrario que las pantallas grandes, los dispositivos móviles no se usan siempre en espacios cerrados, sino precisamente en movimiento y en espacios abiertos, donde no siempre se pueden controlar las condiciones atmosféricas de luz. Por ello, una letra más saturada logrará que sea legible aún en situaciones de extrema claridad o de oscuridad y con reflejos.

Responsivo

Code Block
html {
  font-size: 100%; // Generalmente 16 pixels
}
h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
}

Iframe
marginwidth0
srchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FOyzFk4aIgtOuASyfA9QnYv%2FDesign-System%3Fnode-id%3D61%253A217
width100%
frameborderhide
marginheight0
aligntop
height600px