Pedro Figueras: Branding, UX y UI
  • La experiencia
    • Branding
    • Diseño UX
    • Diseño UI
  • Portafolio
  • Blog
  • Contacto
julio 12, 2021 por Pedro Figueras 0

Cómo convertir tamaños de fuente de papel a pantalla

Cómo convertir tamaños de fuente de papel a pantalla
julio 12, 2021 por Pedro Figueras 0

Cuando diseñamos algún documento lo primero que tienes que preguntarte es en qué soporte se va a visualizar, ¿en papel o pantalla? De la respuesta que obtengas dependerá el tamaño del documento y sus tipografías que tendrás que usar, ya que puede variar mucho el aspecto y legibilidad del mismo.

Visualización correcta de presentaciones en pantalla

 

En papel

Imaginemos que tenemos que crear una página de contenido para imprimir en papel. Podemos elegir un formato de papel A4 y orientación vertical. También un rango de tamaños de fuente que irán desde el más pequeño de 6 pt hasta el que consideremos o se necesite en el diseño. 

Normalmente en papel tomo como mínimo de tamaño 6 pt ya que menos es complicado leer. Por tanto, partiendo de este texto pequeño que usaremos textos sin mucha relevancia construimos un rango de tamaños que pueden ser:

  • 6 pt: se puede usar en los tagline de los logos o en textos que no tengan una gran relevancia.
  • 7 pt: nombre, direcciones y teléfono; en una tarjeta de visita.
  • 10 pt: suele ser el más común usado en párrafos de texto de cualquier documento. 
  • 12 pt: títulos, por ejemplo.
  • ≥ 14 pt: títulos muy destacados o entradillas que a lo mejor queremos jugar con espacios de diseño.

Más o menos este rango de tamaños puede ser un valor seguro cuando queremos diseñar un documento para que se lea en papel perfectamente y tengamos un juego de tamaños que ordenen visualmente el documento.


EN pantalla

Pero ¿qué pasa si este mismo documento lo llevamos a pantalla? 

Por lo de pronto, al abrir el pdf, el programa correspondiente lo ajustará al tamaño de la pantalla. Normalmente al ancho, aunque no es el peor de los escenarios, se podrá leer bien, pero vamos a tener que hacer scroll vertical y si tratamos de buscar una buena experiencia de usuario puede ser un problema. 

También nos podemos encontrar que se ajuste en alto complicando la visualización ya que los tamaños de tipografías se reducirán mucho para poder ver todo el documento. Por ejemplo, si una palabra mide en papel 20 mm, al ver más pequeño el documento en pantalla se nos puede reducir a 10 mm o incluso 5 mm dependiendo de la resolución.

 

cómo solucionarlo

Como primera medida podemos decir que sería aconsejable diseñar el documento en orientación apaisada para aprovechar todo el ancho y que no haya que hacer scroll. 

Pero ¿qué podemos hacer para corregir el que las tipografías no se lean en pantalla por ser tan pequeñas? 

Para resolver este problema yo me lo planteo como una web. Es decir, uso como ancho de documento un mínimo de resolución de un portátil, 1440x900px y cambio el rango de tamaños de papel a web, en el que partimos de un tamaño mínimo de 12px. De esta forma conseguimos asegurar que en las pantallas pequeñas se visualizará perfectamente y de ahí hacia resoluciones más grandes el texto crecerá y siempre será visible. 

Como norma podría quedar en algo así:

6 pt
7-9 pt
10 pt
12 pt
≥ 14 pt
6 pt

Como he dicho antes, este es el tamaño mínimo aconsejable para usar en papel. En pantalla este límite lo debemos subir a 12 px.

7-9 pt

En pantalla usaremos 14 px para textos tales como notas, pies de foto, etc; Sería aconsejable usar este valor como mínimo siempre que el espacio lo permita.

10 pt

Usado para bloques de texto extensos, tales como párrafos, a la hora de llevarlo a pantalla lo deberíamos convertir a 16 pt.

12 pt

Aconsejable para títulos en papel, lo convertimos a 22 pt para pantalla.

≥ 14 pt

Usado para citas, título extra grandes con los que queremos jugar en diseño, los convertiremos a 28 pt, 36 pt, 48 pt, 56 pt, etc.

Espero que os haya sido útil este artítulo. Si tienes algún caso en concreto en el que te puedo ayudar, no dudes en comentarlo ;).

Artículo anterior10 marcas del motor que han actualizado su logorestyling de marcas del motorArtículo siguiente Un fallo de UX en Google Chrome que puede llevar a confusión

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

  • Branding
  • Experiencia de usuario (UX)
  • Interfaz de usuario (UI)

Etiquetas

accesibilidad branding comunicación eficiencia electrificación error Galicia identidad visual ingeniería interacción interfaz Isotipo Logotipo Manual de Identidad Visual Corporativa motor Naming Respirador restyling usabilidad visual

COMPARTE

contratipo-pedrofigueras

Contacto

+34 666 052 663
hola@pedrofigueras.com
Lun. - Vie. 8-15h

Suscríbete a mi newsletter

2021 Pedro Figueras, #experienciadigital
Política de privacidad y cookies
Política de privacidad y cookies
Utilizamos cookies propias y de terceros para fines analíticos, mejorar nuestros servicios y mostrarte publicidad relacionada con tus preferencias basada en tus hábitos de navegación. Puedes aceptar todas las cookies pulsando el botón “Acepto” o configurarlas o rechazar su uso y obtener más información clicando en los botones correspondientes.
Más informaciónAjustes de CookiesRechazoAcepto
Política de privacidad y cookies

Resumen de privacidad

Este sitio web utiliza cookies para mejorar su experiencia mientras navega por el sitio web. Fuera de estas cookies, las cookies que se clasifican como necesarias se almacenan en su navegador, ya que son esenciales para el funcionamiento de las funcionalidades básicas del sitio web. También utilizamos cookies de terceros que nos ayudan a analizar y comprender cómo utiliza este sitio web. Estas cookies se almacenarán en su navegador solo con su consentimiento. También tiene la opción de optar por no recibir estas cookies. Pero la exclusión voluntaria de algunas de estas cookies puede afectar su experiencia de navegación.
Necesarias
Siempre activado
Las cookies necesarias son absolutamente esenciales para que el sitio web funcione correctamente. Esta categoría solo incluye cookies que garantizan funcionalidades básicas y características de seguridad del sitio web. Estas cookies no almacenan ninguna información personal.
No necesarias
Las cookies que pueden no ser particularmente necesarias para que el sitio web funcione y se utilizan específicamente para recopilar datos personales del usuario a través de análisis, anuncios y otros contenidos incrustados se denominan cookies no necesarias. Es obligatorio obtener el consentimiento del usuario antes de ejecutar estas cookies en su sitio web.
GUARDAR Y ACEPTAR