A la hora de hacer una página web, además de que ésta tenga unos contenidos buenos, ha de ser agradable a la vista. Generalmente usamos imágenes y otros artefactos para conseguirlo... eso es obvio, pero muchas veces fallamos en lo sutil o subconsciente. Una de esas piedras en el camino, es el ritmo.El ritmo se consigue haciendo que las proporciones de lo que aparece en pantalla se distribuya de forma armoniosa. Casi todos conocemos las ventajas de usar frameworks de columnas, con lo que estaríamos consiguiendo un ritmo horizontal de forma automáticamente, pero se suele olvidar el ritmo vertical.
El objetivo final es hacer que las cosas se ajusten a una "rejilla imaginaria" cuadriculada. Con las columnas se ajusta todo de forma automática a las líneas verticales de la "rejilla", pero para ajustar las líneas a las líneas horizontales de la "rejilla" hay que hacer algunos cálculos sobre el tamaño de la línea.
Para conseguir el ritmo vertical, hay tres parámetros a tener en cuenta:
- Tamaño de letra, que se consigue mediante la propiedad font-size
- Alto de la línea o leading como se define en tipografía, que se corresponde con la propiedad line-height
- Margen o relleno. Es decir, margin y padding respectivamente
Sigamos con un poco de tipografía básica. Existen muchas medidas tipográticas, pero en este caso la que nos interesa es la denominada "cuadrado de la M", "em square" , "em size" o simplemente "em". Esa medida se corresponde con el tamaño de la M mayúscula en el tipo de letra que corresponda y es importante porque es la letra más ancha y más alta del alfabeto (occidental) y podemos definirla como tamaño unidad tal y como pasa en los CSS.
Obviamente, nuestro em-size no puede ser igual al line-height porque si no tendríamos un montón de líneas apelotonadas donde cada parte superior de cada letra de cada línea se uniría con la parte inferior de la línea de arriba y las partes inferiores de las letras que bajan como j, g, p, etc o descending (otro palabro tipográfico) estarían superpuestas sobre la línea inferior. Vamos, un galimatías.
La pregunta que realmente nos va a definir nuestro ritmo es "¿qué tamaño tiene que tener nuestra fuente para que se vea armoniosa para un alto de línea xxx?".
Hay varias aproximanciones, pero yo soy partidario de dos.
La proporción áurea
Es un número misterioso, presente en la naturaleza hasta la saciedad. Wikipedia!.
Aplicado a nuestro problema da unos resultados de
- line-height = font-size * 1.62
- márgenes de los párrafos = line-height del párrafo * 1.62 / 2
- Margen superiror de los encabezados = line-height de los encabezados * 1.62
Si hay que dividir en tres partes, se hace lo de arriba, se coge la mayor y se vuelve a aplicar el criterio de 62% y 38%, y así sucesivamente.
La pega de este método es que no nos mantiene un alto de línea uniforme ya que todos ellos son un factor del número áureo.
La ventaja es que el cerebro humano está "programado" para identificar que las cosas que están en esa proporción son bellas y armoniosas, igual que pasa por ejemplo con las formas redondeadas, que son más fáciles de procesar "computacionalmente" hablando para el cerebro y por eso Apple le quita las esquinas a todo y tiene toda una legión de seguidores.
Para más detalles, éste enlace.
Método de alto línea fijo
Éste cubre la pega del método anterior de modo que a partir de un alto de línea que definimos nosotros, se calcularía qué combinacioens de tamaño de letra y alto de línea habría que usar para que se mantenga todo ajustado a las líneas horizontales de nuestra "rejilla". La cosa está en que el alto de la línea es un tipo de salto cuántico de modo que si la fuente más pequeña que el alto de línea, se ajusta a la línea, y si es más grande, coge más de una línea.
Se parte de un alto de línea y una lista de tamaños de fuente que se desean usar. Como todos somos vagos, lo mejor es usar una calculadora como la que está en esta página. Se elige el tipo de letra, el tamaño de fuente "base", el alto de línea que se quiere y los tamaños de fuente destino y se da a calcular. "Fási, fási".
la regla de oro en tipografía para la web es que TODOS los font-size, line-height, padding y margin han de ser especificados en em's o en porcentajes de em's para que en el caso de que se reescale el texto, se mantengan las proporciones. Si se hace bien desde el principio, luego no hay follones.
Para entrar en más profundidades en éste método, la "biblia" es éste post que pese a ser del año 2006, sigue siendo la referencia para hablar de ritmo vertical.
Un ejemplo en que se ve lo que se quiere conseguir, que todas las líneas tengan el mismo alto y que es el resultado de la calculadora de antes es el siguiente.
body { font-size: 12px; font-family: Georgia, serif; }
p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; }
p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; }
/* 24px - The quick brown fox jumps over the lazy dog */
.class-for-24px { font-size: 2em; /* 24px */ line-height: 1.5em; /* 36px */ margin-top: 0.75em; margin-bottom: 0em; }
/* 22px - The quick brown fox jumps over the lazy dog */
.class-for-22px { font-size: 1.8333em; /* 22px */ line-height: 1.6364em; /* 36px */ margin-top: 0.8182em; margin-bottom: 0em; }
/* 20px - The quick brown fox jumps over the lazy dog */
.class-for-20px { font-size: 1.6667em; /* 20px */ line-height: 1.8em; /* 36px */ margin-top: 0.9em; margin-bottom: 0em; }
/* 18px - The quick brown fox jumps over the lazy dog */
.class-for-18px { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ margin-top: 1em; margin-bottom: 0em; }
/* 16px - The quick brown fox jumps over the lazy dog */
.class-for-16px { font-size: 1.3333em; /* 16px */ line-height: 1.125em; /* 18px */ margin-top: 1.125em; margin-bottom: 0em; }
/* 14px - The quick brown fox jumps over the lazy dog */
.class-for-14px { font-size: 1.1667em; /* 14px */ line-height: 1.2857em; /* 18px */ margin-top: 1.2857em; margin-bottom: 0em; }
No hay comentarios:
Publicar un comentario