Tipografía

Debido a lo extenso de la respuesta anterior, vamos por la explicación de las variables compartidas originalmente, y varias adicionales, junto con sus URLs de referencia y algunos signos de ¿? en los puntos que me dejaron dudas:

Desde Google Fonts

Fuente: https://fonts.google.com/variablefonts#axis-definitions

• ital (Italic): Cambia entre romanas e itálica.
• opsz (Optical Size): Adapta el estilo a tamaños de texto específicos. En tamaños más pequeños, las letras suelen optimizarse para una mayor legibilidad. En tamaños más grandes, se optimizan para titulares, con grosores y anchos más extremos. En CSS, este eje se activa automáticamente cuando está disponible.
• slnt (Slant): Ajusta el estilo de vertical a inclinado, también conocido como un estilo "oblicuo". En raras ocasiones, la inclinación puede funcionar en lo que se denomina estilo "inclinado hacia atrás" u "oblicuo inverso".
• wght (Peso): Ajuste el estilo de más claro a más audaz en cuanto al color tipográfico, variando el grosor del trazo, el espaciado y el kerning, y otros aspectos del tipo. Esto normalmente cambia el ancho general, por lo que se puede utilizar junto con los ejes de Ancho y Grado.
• wdth (Ancho): Ajusta el estilo de más angosto a más ancho, variando las proporciones de los contadores, los trazos, el espaciado y el kerning, y otros aspectos del tipo. Esto normalmente cambia el color tipográfico de forma sutil, por lo que se puede utilizar junto con los ejes de Grosor y Grado.
• ARRR (Resolución retiniana AR): Mejoras específicas de resolución en tipografías AR/VR para optimizar la representación en las diferentes resoluciones, buscando que sean sean accesibles y fáciles de leer.
• YTAS (Altura de ascendente): Un eje paramétrico para variar la altura de los ascendentes en minúscula.
• BLED (Sangrado): Ajusta la oscuridad general en el color tipográfico de los trazos u otras formas, sin ningún cambio en el ancho general, los saltos de línea o el diseño de la página. Los valores negativos hacen que la apariencia de la fuente sea más clara, mientras que los valores positivos la hacen más oscura, de manera similar al sangrado de tinta o la ganancia de punto en el papel.
• BNCE (Rebote): Mueve los glifos hacia arriba y hacia abajo en la dimensión Y, lo que da como resultado una línea base irregular y con rebote.
• CASL (Casual): Ajusta la curvatura, el contraste y los terminales del trazo desde un estilo lineal sólido y racional hasta un estilo informal amigable y enérgico.
• XTRA (Ancho de contador): Un eje paramétrico para variar los anchos de contador en la dimensión X. ¿?
• CRSV (Cursiva): Controla la sustitución de formas cursivas a lo largo del eje Inclinado. 'Off' (0) mantiene las formas de las letras romanas, como la a y la g de dos pisos.
• YTDE (Descender Depth o Profundidad del descendente): Un eje paramétrico para variar la profundidad de los descendentes en minúscula.
• EHLT (Resaltado de bordes): Controla el grosor de los detalles del resaltado de bordes.
• ELGR (Cuadrícula de elementos): En las fuentes modulares, donde los glifos se componen utilizando múltiples copias del mismo elemento, este eje controla cuántos elementos se utilizan por unidad de cuadrícula. ¿?
• ELSH (Forma del elemento): En fuentes modulares, donde los glifos se componen utilizando varias copias del mismo elemento, este eje controla la forma del elemento
• EDPT (Profundidad de extrusión): Controla la profundidad 3D de los contornos.
• YTFI (Altura de la figura): Eje paramétrico para variar la altura de las figuras. ¿?
• FILL (Relleno): Rellena formas transparentes con formas opacas. A veces, las formas opacas interiores se vuelven transparentes para mantener formas contrastantes. Esto puede ser útil en la animación o interacción para transmitir una transición de estado. Varía de 0 (sin tratamiento) a 1 (completamente rellena).
• FLAR (Flare): A medida que el eje de destello crece, los extremos del tallo pasan de ser rectos (0%) a desarrollar una hinchazón (100%). ¿?
• GRAD (Grado): Perfecciona el estilo de más claro a más audaz en el color tipográfico, sin realizar cambios en el ancho general, los saltos de línea o el diseño de la página. El grado negativo hace que el estilo sea más claro, mientras que el grado positivo lo hace más audaz. Las unidades son las mismas que en el eje de peso.
• HEXP (Hiperexpansión): Expansión del espacio interior y exterior de los glifos.
• INFM (Informalidad): Ajusta el diseño general de formal y tradicional (0%) a informal y poco convencional (hasta 100%).
• YTLC (Altura de minúsculas): Un eje paramétrico para variar la altura de las minúsculas.
• MONO (Monoespaciado): Ajusta el estilo de Proporcional (anchos naturales, predeterminado) a Monoespaciado (ancho fijo). Con el espaciado proporcional, cada glifo ocupa una cantidad única de espacio en una línea, mientras que el monoespaciado es cuando todos los glifos tienen el mismo número total de caracteres.

Desde GitHub: Variable Fonts

Fuente (visita recomendada): https://github.com/mrvsahan/VariableFontExample

¿Qué son las fuentes variables?

Son un formato de fuente OpenType que incluye una nueva tecnología llamada OpenType Format Variantions.

Samsa Variable Font Inspector

Samsa es una plataforma que te permite visualizar fuentes variables de forma interactiva, facilitando la comprensión de las variables y uso de estas fuentes.

Samsa también muestra información técnica como nombres, valores mínimos y máximos, y valores predeterminados de las distintas variables de estas fuente.

Beneficios

En el diseño web las fuentes variables permiten cargar un solo archivo que puede abarcar múltiples variaciones, optimizando su rendimiento, sin sacrificar flexibilidad tipográfica, ayudando a entender cómo implementar estas fuentes y ajustar sus variaciones a través de CSS.

Con Samsa podrás, además, exportar los valores de variación elegidos, útil si deseas mantener un registro de las configuraciones específicas utilizadas en un proyecto.

• Web oficial: https://lorp.github.io/samsa/src/samsa-gui.html
• Referencia en StackExchange (Visita recomendada): https://tex.stackexchange.com/questions/708304/equivalent-of-font-weight

¿Seguimos debatiendo?

Plácido Luna.

#Samsa #HerramientasTipográficas #Tipografía #FuentesVariables #GoogleFonts #VariablesTipográficas

¿Dónde puedo descargar tipografías gratuitas para mis proyectos?

Esta es una de las preguntas que frecuentemente surgen en nuestros cursos de tipografía y redes sociales.

Mi respuesta de siempre: No descargues fuentes sin antes consultar las licencias de uso de cada una de ellas.

Un buen banco de tipografías gratuitas es unos de los clásicos conocido por todos: Google Fonts. Igualmente, consulta las licencias de la plataforma y, eventualmente, las de las tipografías que descargues. El sitio es seguro, pero mejor estar atentos a este tipo de detalles, los que debemos tener incorporados como práctica habitual.

Otro banco de para la descarga de fuentes gratuitas, cuya licencia puedes consultar aquí, es Fontshare^TM con bastantes menos opciones de descargas que Google Fonts, pero con diseños tipográficos también muy refinados.

Mi consejo: Más vale ser precavido

Muchas veces puedes caer en sitios que ofrezcan tipografías para descargas gratuitas, aunque no tengan permisos para su distribución, o peor aún, con el peligro de que estas tipografías no sean realmente gratuitas.

¿Sabes de quién es la responsabilidad?

Habitualmente, excepto que algún tipo de contrato sustente, legalmente, lo contrario, tanto los derechos de autor, como las responsibilidades legales sobre la obra del diseñador, recaen sobre este.

Al respecto, te recomiendo este video, que presenta varios aspectos relacionados con las licencias de uso en el mundo de las tipografías, en el canal de Sergio Boggio: Los PELIGROS de usar TIPOGRAFÍAS GRATIS | Licencias Tipográficas.

Ahora te toca a ti

¿Conocías los peligros de utilizar tipografías con licencias ilegales o difusas? ¿Qué opinas al respecto?

Déjanos tus aportes, y sigamos aprendiendo, ¡con fundamentos!

Plácido Luna.

#LicenciasTipográficas #Legal #FuentesTipográficas #SergioBoggio #DerechosDeAutor

¿Puedo usar, libremente, las fuentes de Google Fonts en mis proyectos?

Muy relacionado con el debate anterior (¿Qué tan conveniente es usar tipografías gratuitas?), esta es otra de las preguntas que suelen surgir en clases.

De forma clara, limpia y ordenada, Google nos da la respuesta a esta pregunta, en su página oficial sobre las licencias de las tipografías que ofrece en su plataforma: https://developers.google.com/fonts/faq?hl=es-419

¿Dudas o planteos adicionales? ¿Lo discutimos?

Sigamos aprendiendo, ¡con fundamentos!

Plácido Luna.

#Tipografía #GoogleFonts #FuentesGratuitas #LicenciasTipográficas

Columnas de texto y medianiles

Criterios para determinar la cantidad de columnas, sus dimensiones y separaciones.

El escenario:

Imagina que estás diseñando una revista, libro o cualquier otra pieza de diseño editorial, y debes determinar la cantidad de columnas de texto, sus anchuras y separaciones entre ellas (anchura de los medianiles).

• ¿Con qué criterios tomarías estas decisiones?
• ¿Cuál es la cantidad y la medida óptima de una columna de texto?
• ¿Qué medida le darías a los medianiles?

¿Abrimos el debate?

Saludos y bonita jornada para ti.

Plácido Luna.

#DiseñoEditorial #ColumnasDeTexto #DesafíosTipográficos #DesafíosDeDiseño #DesafíosDeDiseñoEditorial #Medianiles

La semana pasada dictamos en un taller sobre diseño de afiches, a un grupo con conocimientos básicos de diseño. Durante la sesión, compartimos varios recursos y enlaces, relacionados tanto con el diseño de afiches, como con el diseño gráfico en general, que sirvieron de apoyo a la presentación principal utilizada durante la sesión. A continuación, te presento algunos de estos recursos y enlaces:

La Bauhaus y el Estilo Tipográfico Internacional

• Escuela de la Bauhaus: https://es.wikipedia.org/wiki/Escuela_de_la_Bauhaus
• El Estilo Tipográfico Internacional (Escuela Suiza): https://es.wikipedia.org/wiki/Estilo_Tipogr%C3%A1fico_Internacional

Dos grandes diseñadores gráficos

• David Carson
• https://davidcarsondesign.com/
• https://graffica.info/quien-es-david-carson/
• Neville Brody
• https://es.wikipedia.org/wiki/Neville_Brody
• https://www.copyrightbookshop.be/en/shop/the-graphic-language-of-neville-brody-3/

Algunas referencias sobre diseño de afiches

• Diseño Carteles (web)
• Diseñadores y diseños de referencia: https://xn--diseocarteles-lkb.com/imagenes-poster/
• Diseñadores: https://xn--diseocarteles-lkb.com/imagenes-poster/disenadores/
• Artículo sobre el cartel publicitario: https://xn--diseocarteles-lkb.com/carteles-publicitarios/
• Barreira. Arte+Diseño
• 10 carteles icónicos...: https://barreira.edu.es/10-carteles-diseno-grafico-ilustracion/
• Rolling Stone en español
• Afiches de cine: https://es.rollingstone.com/grandes-posteres-cinematograficos-de-todos-los-tiempos/
• Concursos internacionales de diseño de afiches:
• PosterTerritory: https://www.posterterritory.com/poster-competitions/
• InfoDesigners: https://www.infodesigners.eu/poster-competitions/1

Tipografía

También tratamos aspectos relacionados con la tipografía. Además de las tradicionales que solemos usar frecuentemente, casi todas ellas basadas en la clasificación tipográfica de Vox-ATypI, hablamos sobre la clasificación surgida del libro de Robert Bringhurst, The elements of Typographic Style. Esta clasificación, basada en aspectos históricos, permite comprender aspectos estilísticos importantes al momento de crear maridajes tipográficos. Complementamos este tema con el trabajo Psico Typo de Jessica Aharonov.

• Wikipedia
• Clasificación de Vox-ATypI: https://es.wikipedia.org/wiki/Clasificaci%C3%B3n_Vox-ATypI
• Robert Brinhurst: https://es.wikipedia.org/wiki/Robert_Bringhurst
• The Elements of Typographic Style: https://es.wikipedia.org/wiki/The_Elements_of_Typographic_Style
• ISUU | Una guía práctica para el entendimiento de la psicología en la tipografía
• Psico Typo, de Jessica Aharonov: https://issuu.com/ar0design/docs/psico_typo

Diagramación y composición

Como cierre, para ayudar al grupo a tomar decisiones racionales sobre la diagramación y posterior composición de sus piezas gráficas, trabajamos sobre:

• La regla de los tercios: https://es.wikipedia.org/wiki/Regla_de_los_tercios
• La simetría dinámica, la proporción áurea y su creación gráfica a partir de la Serie de Fibonacci:
• Serie de Fibonacci: https://es.wikipedia.org/wiki/Sucesi%C3%B3n_de_Fibonacci
• Aplicación a la imagen: https://ismjh.com/TrabajosAcademicos/Composicion_Imagen_Cinematografica.pdf
• Los rectángulos raíz: https://en.wikipedia.org/wiki/Dynamic_rectangle
• El diagrama de Villard de Honnecourt: https://www.flickr.com/photos/vidagrafica/6501633377
• La harmonic armature de 14/16 líneas:
• https://community.adobe.com/t5/lightroom-classic-ideas/p-add-a-14-line-grid-harmonic-armature-overlay-for-the-crop-tool/idi-p/13480810
• https://michaellynnadams.com/harmonic-symmetry/

La cabecera, y los gráficos que acompañan a esta publicación, corresponden a algunos de estos sistemas y estructuras generadas durante la clase.

Espero que la información te resulte de utilidad.

Bonita jornada para ti.

Plácido Luna

¡Aprende con fundamentos! | https://www.formaciongrafica.net/

#diseñoGráfico #diseñoDeAfiches #diseñoDeCartel #cartel #referentesDelDiseño #davidCarson #nevilleBrody #concursosDeDiseño #clasificacionesTipográficas #tipografía #voxATypI #robertBringhurs #theElementsOfTypographicStyle #Bauhaus #estiloTipográficoInternacional #escuelaSuiza #talleresDeDiseño #recursosDeClases #tallerDeAfiches

Introducción a la historia y medidas tipográficas

Comparto este enlace a un artículo sobre las unidades tipográficas de medida y su historia, publicado hace algún tiempo aquí: https://www.formaciongrafica.net/blog/tutoriales-online/tipografia/unidades-tipograficas-de-medida/

¡Saludos y bonita jornada para ti!

Plácido.

#Tipografía #UnidadesTipográficas #MedidasTipográficas #Cícero #Punto #Pica