Share
Cada característica concebible de la tipografía puede ser referida por su nombre. Ya sea que esté hablando del tipo de letra en sí, o de la disposición del tipo dentro de un diseño, hay un enorme glosario de términos que puede ayudarlo a describir las cosas correctamente. Echemos un vistazo a los elementos de la tipografía que son importantes para usted, como diseñador web..
Hay dos aspectos esenciales de la tipografía que conciernen directamente a los diseñadores web:
Por lo tanto, es muy importante que pueda articular (a los clientes o miembros del equipo) sus opiniones y decisiones tipográficas. No nos vamos a preocupar por las minucias de las terminales de pelota y los títulos, pero en lugar de eso, vamos a discutir la anatomía de la tipografía como importa para los diseñadores web..
Ciertas propiedades tipográficas fundamentales pueden ser manipuladas con CSS. Por ejemplo, quizás lo más importante, el Familia tipográfica.
A menudo oirá una discusión sobre la definición de fuente versus tipo de letra, así que es importante que sepas la diferencia. Una fuente es la colección empaquetada de formularios de letras; Tradicionalmente los bloques físicos utilizados en la impresión, hoy en día también incluyen archivos digitales. Es el mecanismo de entrega.
Una tipografía es lo que crea el diseñador; el diseño. Siempre me ha gustado la comparación con la música; Usted compra un CD (bueno, vamos a volver hace un par de años) como el mecanismo de entrega para escuchar la música. En realidad no estás escuchando el CD. Es una situación similar a la selección de fuentes para hacer uso de los tipos de letra que entregan.
A través de CSS podemos determinar nuestras familias de fuentes preferidas, en orden de clasificación. Esto es lo que llamamos el pila de fuentes.
También podemos manipular peso de fuente a través de hojas de estilo. El peso es la forma en que describimos el grosor relativo del golpe de un personaje.
Muchas fuentes se producen con una variedad de pesos, que se describen más simplemente como ligero, regular, libro, extra negrita, con una gama de variantes además. Más específicamente, podemos determinar el peso de un tipo de letra utilizando la escala TrueType, que va de 100 a 900 (400 es lo que comúnmente llamamos regular).
Las fuentes se deberían producir idealmente con variantes de peso reales, numéricas o nombradas, para poder controlarlas a través de CSS: font-weight: 300;, font-weight: negrita;. Cuando una variante de fuente no está disponible, los navegadores a menudo tendrán la oportunidad de representar el peso ellos mismos, pero los resultados pueden ser menos que óptimos.
Mayúsculas y minúscula Consulte las letras mayúsculas y minúsculas. El termino caso se origina en los cajones utilizados en la impresión tipográfica (mayúsculas con mayúsculas, minúsculas ... se obtiene la imagen).
Podemos anular el caso (si quisiéramos) mediante CSS usando text-transform: mayúsculas; por ejemplo.
Si bien estamos en el tema del caso de los caracteres, cuando se usa mayúsculas, a veces (especialmente en tamaños más pequeños) se recomienda aumentar el espacio entre los caracteres para mejorar la legibilidad. En términos de CSS nos referimos a esto como espaciado de letras y puede expresarse como un valor positivo o negativo, generalmente medido en centésimas de una em.
En términos tradicionales, nos referimos al espacio entre letras como rastreo. El seguimiento afecta la densidad general de caracteres dentro de una línea o bloque de texto determinado. El término se origina (como ocurre con muchos términos tipográficos) en la era pasada de la composición tipográfica, específicamente montaje de fototipos, en el que los personajes fueron proyectados en película a través de una lente. El espacio alrededor de cada personaje se alteraría moviendo un prisma a lo largo de una pista, por lo tanto rastreo.
La propiedad CSS espaciado de palabras También te puede ayudar aquí. Como era de esperar, la alteración del valor del espaciado entre palabras hará que el espacio entre las palabras aumente y disminuya, lo que también tendrá un impacto significativo en la legibilidad.
Juegue con los valores de letras y espaciado de palabras aplicados al siguiente bloque de texto y vea por sí mismo cómo influye la legibilidad.
A menudo se confunde con el seguimiento es kerning. El kerning se refiere al ajuste del espaciado entre formas de letras específicas (no todo un grupo de caracteres), de nuevo, para mejorar la legibilidad.
UNA proporcional fuente (a diferencia de una monoespaciado La fuente, cuyo espaciado entre caracteres es uniforme) permitirá a pares específicos de personajes que necesitan ayuda adicional para sentarse visualmente uno al lado del otro..
Por ejemplo, mayúsculas V y UNA, cuando se colocan juntos, generalmente se reducirá su kerning para combatir el espacio visual adicional entre ellos.
Una vez más, tenemos que agradecer el término a la tipografía de la vieja escuela, cuando el tipo se fundió como bloques de metal. Kern se refiere a la muesca hecha en un bloque de caracteres, lo que le permitiría encajar en un bloque correspondiente. El posicionamiento de estas muescas macho / hembra evitaría que los caracteres no coincidentes se coloquen uno al lado del otro.
Dicho esto, el kerning es un proceso asociado con la composición tipográfica para la impresión y no es fácilmente aceptado por la tipografía web. Existen herramientas de JavaScript, como kerning.js, que pueden ayudar a los diseñadores a manipular su tipo en función de cada carácter, pero CSS aún no se ha actualizado..
En cuanto a CSS, hay una propuesta para la propiedad. fuente-kerning en las obras, pero incluso esto está limitado en lo que puede hacer para un diseñador tipográfico.
Configuración de la propiedad (no estándar) renderizado de texto: optimiza la legibilidad; mejorará las cosas en algunos navegadores modernos, al mejorar el kerning en pares de caracteres reconocidos. Al igual que con fuente-kerning, Esto no ofrece tanto el control como una mano amiga. También activará el uso de ligaduras donde esté disponible en una fuente, lo que me lleva muy bien a ...
Las ligaduras llevan el kerning al siguiente nivel, ofreciendo glifos de reemplazo para ciertos pares de caracteres. En algunos casos, los personajes no se combinarán muy bien, independientemente de la delicadeza de los arreglos, en cuyo caso se puede diseñar una ligadura. Un ejemplo clásico es la minúscula. F y yo.
Aquí está uno con el que estará familiarizado; reconocer esto?
El símbolo en realidad es una ligadura en origen, que estamos acostumbrados a usar en lugar de Et (que significa "y" en latín / francés).
En otros casos, las ligaduras pueden ser necesarias para ciertas rarezas lingüísticas (la ß alemana es posiblemente la más familiar de estas) y, a veces, también para fines decorativos. A estos últimos nos referimos como Ligaduras discrecionales, tal como donde un do y un t unirse.
Cuando tenga un mayor control sobre el contenido de una página web, puede usar Unicode o entidades HTML para mostrar las ligaduras. Por ejemplo fi Lo arreglaremos con el "fi" del que hablamos. Si prefieres que JavaScript te ayude, ligature.js podría hacer el truco, aunque no es a prueba de bombas..
Al usar CSS para ayudarte, puedes apoyarte en el Procesamiento de texto: optimización de la flexibilidad que mencionamos, o usted podría utilizar el propuesto fuente-variante-ligaduras que tiene una serie de valores tales como ligaduras comunes, asegurándose de que las ligaduras se muestran siempre que sea posible. El soporte del navegador está incompleto en este momento, pero ciertamente vale la pena vigilarlo..
Como veremos en un minuto, las proporciones de un tipo de letra pueden influir en la cantidad de espacio vertical entre cada línea. Por lo tanto, es aconsejable considerar la altura de la línea Específico a la fuente utilizada y ajuste según corresponda. Demasiado poco espacio vertical hace que el cuerpo de un texto quede estrecho y dificulta que el ojo regrese al principio de la siguiente línea.
Demasiado espacio y lectura se vuelven igualmente incómodos.
El uso de medidas relativas siempre es recomendable en el diseño web, especialmente en lo que respecta a la tipografía. La altura de la línea siempre debe ser una función del tamaño de fuente. Utilizando ems definir la altura de la línea significará que siempre es relativo al tamaño de fuente. Eche un vistazo a este ejemplo y vea cómo los valores cambiantes influyen en la legibilidad:
En términos tradicionales, nos referimos al espaciado entre líneas (que no debe confundirse con la altura de línea en sí) como líder, llamada así debido a las tiras físicas de metal de plomo que se utilizaron en las prensas de impresión para aumentar y disminuir el espaciado vertical.
Hoy en día, cuando se calcula la altura de la línea, medio líder Se agrega tanto la parte superior como la inferior de los caracteres. Por ejemplo, un tamaño de fuente de 36 px, con una altura de línea de 54 px (1.5 em) resultaría en 9 px de espacio añadido debajo de los caracteres y 9 px anterior. En efecto, esto centra verticalmente el texto dentro de su línea..
Avanzando con nuestra anatomía tipográfica controlada por CSS, llegamos a justificación; La alineación del texto. En nuestro diagrama, el texto está alineado a la izquierda, pero podría estar igualmente alineado a la derecha, centrado o (cuando se trata de bloques de texto mayores de una línea) justificado. El estilo a través de CSS se realiza con la propiedad de alineación de texto, por ejemplo text-align: center;.
El texto completamente justificado elimina lo que se conoce como borde irregular...
... pero puede causar un desagradable sabor posterior en forma de ríos o canales apareciendo en el cuerpo de tu texto.
En el mundo de los diseños fluidos, donde el ancho de un cuerpo de texto puede ser difícil de localizar, el texto justificado debe usarse con precaución.
La selección de tipos de letra puede ser difícil. Ya sea que esté viendo específicamente los encabezados, el texto del cuerpo, las citas de bloque, etc., hay muchos factores en juego. Veamos algunos aspectos fundamentales de la anatomía tipográfica a los que vale la pena prestar atención..
En primer lugar, estamos tratando con un serif tipo de letra, o una sans-serif? Serifs son esos trazos adicionales que terminan un trazo principal. Fuentes como Arial no tienen estos trazos, son sans-serif (otra lección de francés para ti allí ...)
Se dice que los siervos ayudan al flujo de formas de letras, uniendo palabras cohesivas, ayudando al ojo a través del texto y facilitando la lectura. A veces, sin embargo, pueden complicar una tipografía, causando fatiga en el lector y, por lo tanto, dificultando la legibilidad. El argumento ha sido de actualidad durante décadas y ninguna evidencia concreta se ha presentado con éxito, ya que cualquiera de los dos es más legible.
En cualquier caso, las fuentes a veces vienen en sabores serif y sans-serif (como el PT de ParaType, por lo que tiene el lujo de elegir lo que le parezca más conveniente)..
Habiendo mencionado legibilidad, Es justo que lo distingo rápidamente de legibilidad. Usamos la legibilidad cuando hablamos de los detalles más finos de la tipografía; La capacidad de reconocer letras y palabras individuales. La legibilidad asume un papel más funcional, relacionado con la practicidad de un lector capaz de absorber un cuerpo de texto.
La legibilidad es obviamente muy importante. Por esta razón, es prudente tomar altura x en cuenta. La altura x del tipo describe la altura (observe el x de una cara en particular), desde la base a la parte superior de los caracteres en minúscula. Los tipos de letra con una altura x relativamente grande tienden a ser más legibles, especialmente en tamaños más pequeños.
Mayor x-altura viene a expensas de la descendientes y ascendentes, Que se vuelven lógicamente más cortos en relación. Esto puede llevar a menos espacio visual entre líneas, de lo que hablamos hace un momento..
No estoy seguro de cómo he llegado tan lejos sin definir específicamente un formato de letra. carrera. Si hay un término que es útil para describir la personalidad de un tipo de letra, es ese. El trazo de cualquier forma de letra dada puede ser horizontal, vertical, diagonal, incluso curva, y dependiendo del trazo en cuestión, también puede tener un nombre más específico.
El trazo principal (generalmente vertical y pesado) dentro de una forma de letra se conoce como vástago, dejando el término carrera Para luego significar uno de prominencia secundaria. El trazo horizontal en la parte superior de una T mayúscula se denomina brazo, lo que encontrará cerrando la brecha en una A o H mayúscula es una bar, la lista continua…
Los trazos dentro de una forma de letra, en particular en los tipos de letra serif, también pueden variar en estilo y peso; una línea de pelo siendo el más fino presente.
Luego, algunos trazos, especialmente las curvas, tendrán un peso variable a lo largo de su propia longitud. Esto se conoce como modulación. Esta variación equilibra el peso total de un personaje y evita áreas particularmente pesadas donde se unen dos golpes.
Una modulación de trazo deficiente a menudo dará como resultado una forma de letra pesada y torpe en relación con otras personas en el conjunto. David Kadavy se refiere a este equilibrio como la uniformidad de la textura y es a menudo una medida de calidad en una tipografía bien ejecutada. Eche un vistazo a un cuerpo de texto, luego difumine sus ojos para obtener una impresión de la textura general.
Existen miles de términos de glosario y adjetivos para controlar si desea describir correctamente las cuestiones tipográficas. Hemos cubierto algunos de los conceptos básicos aquí y espero que al menos algunos de ellos sean nuevas adiciones a su vocabulario. Intenta incluir aleatoriamente uno en la conversación la próxima vez que te presenten a alguien nuevo. muy impresionado…
Accentsconagua