Share
Posiblemente la pregunta tipográfica más obvia en manos de un diseñador es "¿qué tipo de letra debo usar?" La segunda pregunta, una que rara vez recibe el tipo de atención que debería, es "¿a qué tamaño debo configurar mi tipo?" Establecer una escala modular es la mejor manera de determinar los tamaños tipográficos, de hecho, puede ayudar a establecer medidas y proporciones en todo el diseño de la página..
Durante esta sesión hemos examinado la jerarquía; Cómo el tamaño y otros factores pueden influir en la relación visual de los elementos tipográficos. También hemos analizado recientemente el ritmo vertical, la consistencia visual del espaciado y los elementos en una página. Luego tenemos el problema de establecer una cuadrícula de línea de base, que se relaciona con el establecimiento del ritmo vertical. Incluso hemos hablado de usar ems como unidad de medida., dos veces de hecho. Todos estos aspectos de la tipografía están unidos por la presencia fundamental de tamaño, Entonces, ¿cómo decide exactamente qué tan grandes deben ser sus elementos tipográficos??
El término escala modular se refiere a una serie de valores armoniosos. Al ser una escala, cada valor es un factor de los otros y podría verse algo como esto:
Aplicando esta escala a algunos CSS tipográficos básicos, podríamos obtener:
h1 font-size: 36px h2 font-size: 24px h3 font-size: 18px h4 font-size: 14px p font-size: 11px small font-size: 9px
Es posible que reconozca estos valores como parte de la escala modular clásica, ilustrada por Robert Bringhust en The Elements of Typographic Style..
Una escala modular, como una escala musical, es un conjunto preestablecido de proporciones armoniosas.
Robert Bringhurst
Al adherirse a esta escala y configurar sus diferentes partes y piezas tipográficas a los valores mostrados, asumirán una belleza inherente; Proporciones que han trabajado para los diseñadores tipográficos durante siglos..
Así es, siglos..
De hecho, los orígenes de establecer una escala tipográfica provienen tanto de una necesidad práctica como de un juicio estético. En los tempranos días de la composición tipográfica de metales de fundición, cuando cada forma de letra se fundía como un bloque de metal (llamado una especie) no era práctico, demasiado costoso, fabricar y almacenar conjuntos de caracteres completos de cada tipo de letra, en todos los diversos pesos, en todas las formas tamaños.
Por lo tanto, los tipógrafos se establecieron, a lo largo del tiempo, en una gama de tamaños utilizables que trabajaron en armonía.
Configuremos una escala simple, para usar en nuestros propios proyectos..
Necesitamos comenzar en algún lugar, entonces comenzaremos con un número base significativo; Nuestro tamaño de fuente base. Tengo la costumbre de comenzar con lo que el navegador indique como predeterminado, así que usaremos 16px como nuestra base. Tim Brown recomienda comenzar con el tamaño de fuente en el que su tipo de letra se muestre más nítidamente: la mayoría de las veces, será 16px para las fuentes diseñadas teniendo en cuenta la web.
(Lo siento, esa era la única cita que podía pensar en contener proporción.)
Entonces, ahora necesitamos establecer una relación, un valor por el cual multiplicaremos y dividiremos exponencialmente nuestro valor base. Esta relación puede ser lo que quieras; Si tienes alguna escala que tenga belleza específica en tus ojos, está bien..
Podría, por ejemplo, ir a la sección dorada 1: 1.61803398875. Esta relación tiene sus raíces en la trama misma del mundo que nos rodea, y ha sido utilizada por diseñadores y arquitectos para estructurar la armonía estética desde ... para siempre.
Para ilustrar lo que está pasando fácilmente, usaremos 1: 2 (el musical entre ustedes, que no soy yo, por cierto, reconocerá esto como una octava). Comenzando con 16, obtenemos lo siguiente:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Y esto puede continuar exponencialmente. Para establecer nuestra escala hacia abajo, dividimos:
16/2 = 8 8/2 = 4 4/2 = 2
Esto nos da los inicios de nuestra escala:
Lo cual podemos aplicar a nuestro simple CSS tipográfico así:
h1 font-size: 256px h2 font-size: 128px h3 font-size: 64px h4 font-size: 32px p font-size: 16px small font-size: 8px
Gran trabajo hasta ahora!
Esta escala es bastante extrema. Funciona, pero para las mediciones en una página web es bastante implacable. Para permitirnos más flexibilidad, brindémonos más opciones agregando una segunda dimensión a la escala, un proceso descrito por Tim Brown en su artículo A List Apart Tipografía más significativa.
Elige otro número. Cualquier número, siempre que tenga algún significado para su diseño. Ya hemos usado 16 porque es nuestro tamaño de fuente base, así que complementémoslo al agregar 95, el ancho de una sola columna que usaré en este diseño ficticio de 1.140 píxeles de ancho.
Propina: Puede haber muchos aspectos de su diseño que tengan importancia; Medidas y dimensiones que resuenan a lo largo del trazado. Experimente con los valores que elija, le sorprenderá saber qué proporciones sensación Correcto.Aplicando la relación de 1: 2 a 95, obtenemos la siguiente escala:
11.875 / 2 = 5.938 23.75 / 2 = 11.875 47.5 / 2 = 23.75 95/2 = 47.5 95 * 1 = 95 95 * 2 = 190 190 * 2 = 380 380 * 2 = 760
Así que ahora tenemos dos escalas, ambas basadas en la misma proporción, que por lo tanto coexisten bastante bien:
De hecho, podemos combinarlos, para darnos una escala como esta:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Esto llena los huecos para nosotros, haciendo que nuestra escala se vea mucho más completa..
Ya hemos mencionado cómo podemos aplicar nuestra escala a elementos tipográficos básicos, así que vamos a actualizar esa.
h1 font-size: 64px h2 font-size: 47.5px h3 font-size: 32px h4 font-size: 23.75px p font-size: 16px small font-size: 8px
Ahí vamos, no tan intensos. Nuestra escala también puede prestarse a otras características tipográficas, como la altura de línea y, por lo tanto, toda la cuadrícula de línea de base:
p font-size: 16px; altura de línea: 23.75px; margen: 0 0 16px 0;
Y podemos mejorar todo esto utilizando ems también, haciendo que las relaciones y las proporciones sean más nítidas:
cuerpo font-size: 100%; p font-size: 1em; línea de altura: 1.484; margen: 0 0 1em 0;
Si está luchando con los cálculos en este punto, diríjase a la escala modular de Tim Brown. Su calculadora producirá automáticamente los valores de píxel y em..
Para referencia, esto es lo que parece nuestra escala en términos de ems (en otras palabras, en relación con el tamaño de fuente base):
64 47.5 32 23.75 16 11.875 8 5.938 4 2.969 2 1.484 1 0.742 0.5 0.371 0.25 0.186 0.125 0.093
Habiendo abordado los elementos básicos de nuestra página, vamos a centrar nuestra atención en alguna estructura. Una simple pila de doce columnas se presenta fácilmente:
.columna-1 ancho: 95px; * .column-2 width: 190px; * .column-3 width: 285px; .column-4 ancho: 380px; * .column-5 width: 475px; .column-6 width: 570px; .column-7 width: 665px; .column-8 ancho: 760px; * .column-9 width: 855px; .column-10 ancho: 950px; .column-11 ancho: 1045px; .column-12 ancho: 1140px; / * en una cuadrícula fluida, estos se convertirían a valores% * /
Reconocerá los valores con un asterisco junto a ellos como parte de nuestra escala modular.
Cada columna también tendrá que flotar, además, para formar los canales, podemos agregar algo de relleno a cada uno de 1em (16px, que también se incluye en nuestra escala).
/ * aplicar un modelo de diseño de caja natural a todos los elementos * / *, *: antes, *: después de -moz-box-sizing: border-box; -webkit-box-dimensionamiento: cuadro de borde; tamaño de caja: caja de borde; .column float: left; relleno: 0 1em;
Muy rápidamente hemos sentado las bases para una cuadrícula sólida, más una tipografía, todas basadas en una escala armoniosa.
Combinar grillas con tipografía puede ser un negocio complejo; ¡Calcular la armonía puede parecer muy poco intuitivo a veces! Sin embargo, una vez que haya comenzado con algunas bases básicas, descubrirá que no puede diseñar una página web sin algún tipo de significado para las relaciones en sus páginas..
Lo que hemos hecho hasta ahora es un buen comienzo, pero todavía hay mucho más por hacer y muchos ajustes. La cuadrícula de línea de base, por ejemplo, puede ser un poco incómoda de construir a partir de este punto, por lo que es posible que algunos de los valores iniciales no funcionen. Además, es probable que queramos que nuestra cuadrícula sea flexible, por lo que las columnas no retendrían los valores fijos que usamos originalmente. Por esta razón, es posible que nuestros valores horizontales no siempre funcionen con nuestras medidas verticales.
Existen escalas y rejillas establecidas, probadas y probadas a través de los siglos. ¿Por qué no tratar de aplicar algunos de ellos a tu propio trabajo? ¿Alguna vez ha aplicado una escala modular deliberada a su trabajo? Si no es así, ¿cómo decide sobre su tamaño tipográfico? ¿Hay algún problema específico que encuentres con las escalas? Escuchemos tus pensamientos en los comentarios.!
Accentsconagua