Shantell Sans (2023)

 (shantellsans.com)
1 puntos por GN⁺ 2 시간 전 | 1 comentarios | Compartir por WhatsApp
  • Shantell Sans ofrece desde tipografías para uso cotidiano hasta estilos experimentales para animación, con los ejes Weight, Italic, Informality, Bounce y Spacing
  • Parte de la escritura a mano de Shantell Martin y de su experiencia con la dislexia, con el objetivo de lograr una accesibilidad divertida y juguetona, pero utilizable de forma profesional
  • Toma como referencia la universalidad y la impresión de legibilidad de Comic Sans, pero no es una derivación; organiza en una tipografía digital una escritura a mano con marcador de punta de fieltro
  • Mejora la legibilidad con métricas cercanas a Roboto, anchos de glifo y espaciado amplios, y un diseño que distingue claramente b·d·p·q e I·1
  • Se distribuye gratis a través de Google Fonts y bajo la OFL, y es compatible con más de 380 idiomas basados en Latin y Cyrillic, además de Google Docs

El punto de partida de Shantell Sans

  • Shantell Sans es una tipografía variable creada a partir de la escritura a mano de Shantell Martin, y ofrece tanto un estilo cercano y amigable para el uso diario como estilos experimentales aptos para animación
  • De niña, Shantell Martin no lograba aprobar los exámenes de ortografía y tenía que quedarse en detention, pero le gustaban las palabras y siempre ha expresado sus emociones a través de la escritura y el dibujo
  • A los 20 o 21 años descubrió que tenía dislexia, y al comenzar sus estudios de arte en Central Saint Martins sintió que muchas personas creativas también la tenían
  • Le decepcionaba que los docentes, al no detectar sus dificultades para leer y escribir, le dieran castigos en vez de apoyo, y una tipografía basada en su propia letra y en sus caracteres se convirtió en una forma de permitir que las personas lean y escriban sin importar cuál sea su relación con las palabras
  • La meta era crear una tipografía divertida y juguetona, pero también profesional y utilizable, y quería una tipografía accesible que recordara que las palabras son imágenes y pueden existir de distintas maneras para cada persona
  • Stephen Nixon le envió una plantilla con líneas para escribir a mano el alfabeto latino, números y símbolos, y a partir de esa escritura se creó la tipografía digital

Distribución pública y primeros usos

  • Shantell Sans se publicó bajo la Open Font License para que más personas pudieran acceder sin costo, y un modelo de distribución abierta como la explicación de licencias de Google Fonts aumenta su utilidad
  • Al ofrecerse gratis, puede usarse ampliamente a través de Google Fonts y otras plataformas, y una tipografía creada por una artista viva puede inspirar el trabajo tipográfico de otros artistas
  • Shantell Sans tiene un carácter muy personal porque se basa en la escritura a mano de Shantell Martin, pero publicarla abiertamente también implica soltar el control sobre algo que en esencia es propio
  • Espera que niñas, niños y jóvenes usen Shantell Sans y conozcan el trasfondo de su creación, y que pueda emplearse de formas inesperadas tanto en proyectos personales como en proyectos de diseño más grandes

  • Primeras aplicaciones

Objetivos de diseño e influencia de Comic Sans

  • Stephen Nixon cuenta que, cuando Shantell Martin le dijo que quería una “tipografía utilizable, visualmente agradable, inteligente y creativa”, pensó en sus enormes murales y en sus trazos exploratorios, semiimprovisados y juguetones
  • La frase “crear una nueva Comic Sans” fue una pista clave, y aunque tomaron como referencia la universalidad cultural y la respuesta emocional que genera Comic Sans, no era un proyecto para derivarla directamente ni para hacer una nueva versión
  • Comic Sans fue diseñada por Vincent Connare en 1994 para Microsoft Bob, y su presencia preinstalada en los sistemas operativos Windows y Mac hizo que se usara ampliamente
  • Comic Sans se ha usado en contextos muy diversos, desde las etiquetas de quinta generación en adelante de Ty Beanie Babies hasta el anuncio de CERN de 2012 sobre el bosón de Higgs

  • Cinco criterios

    • Debía resultar atractiva para usuarios cotidianos, no ser una tipografía solo para entusiastas de la tipografía
    • Debía ser fácil de usar para escribir en distintos tipos de comunicación
    • Debía ser utilizable y accesible para una amplia variedad de personas
    • Debía tener buena legibilidad y ser fácil de leer
    • Debía hacer algo nuevo, en lugar de repetir un terreno ya existente

Diseño y desarrollo basados en Latin

  • Atractivo cotidiano

    • Para lograr un atractivo cotidiano, se tomó como base la escritura a mano con marcador de punta de fieltro, como Comic Sans, y el punto de partida fue la letra de Shantell Martin
    • Se conservaron algunas características de la escritura a mano, pero la impresión general se simplificó para ajustarse a una forma digital

  • Facilidad de uso en muchos contextos

    • Para alinearse con las proporciones habituales y las expectativas estilísticas de las tipografías modernas, se ajustaron las métricas tipográficas —como cap-height, x-height y la altura base de línea— para acercarlas a tipografías de uso extendido como Roboto
    • Para mantener la legibilidad y conservar coherencia visual con la letra de Shantell, se usaron anchos de glifo y espaciado entre letras un poco más amplios de lo normal
    • Fue diseñada para ser fácil de usar en entornos cotidianos como sitios web, apps y presentaciones, para mostrar personalidad en tamaños grandes y seguir funcionando en texto corrido pequeño

  • Soporte de idiomas y distribución

    • Shantell Sans sigue y supera ligeramente los glyphsets Latin Plus y Cyrillic Plus de Google Fonts, y da soporte a más de 380 idiomas que usan los sistemas de escritura Latin y Cyrillic
    • Su cobertura abarca idiomas basados en Latin y Cyrillic de Europa, América y Asia Central
    • Gracias al soporte de Google Fonts y a su publicación bajo licencia OFL, pudo distribuirse como una tipografía de código abierto de uso gratuito

  • Distinción clara entre letras

    • b, d, p, q y n, u fueron diseñadas para diferenciarse entre sí mediante contrastes de forma simples y remates colocados con cuidado
    • Como Shantell Martin a veces escribe la I mayúscula y el número 1 como una sola línea recta, se añadió serif a la I mayúscula y una bandera al 1 para distinguirlos
    • Como corresponde a una tipografía basada en escritura a mano, a y g usan formas de un solo piso, como las que aprenden las niñas y los niños en la escuela, para mantener una sensación cercana y familiar

  • Ejes variables y funciones OpenType

    • Además de una buena gama de pesos, debía ofrecer un rango amplio de estilos como tipografía variable para diseñadores y desarrolladores que quisieran explorar funciones tipográficas modernas
    • Para llevar al sistema tipográfico la atmósfera libre y orgánica del trabajo de Shantell Martin como ejes experimentales, se crearon cinco ejes variables: Weight, Italic, Informality, Bounce y Spacing
    • También incluye funciones OpenType como tabular vs proportional figures, fractions y localized forms para necesidades tipográficas más finas
    • Tomando como referencia el detalle artesanal de tipografías basadas en escritura a mano como Inkwell, Cortado y Studio Lettering, se evitó simplemente crear otra tipografía de marcador de fieltro autotraceada

Definición de formas y ejes experimentales

  • Shantell Martin eligió un marcador de punta de fieltro de grosor medio, el Staedtler Lumocolor M, y escribió pangrams en mayúsculas y minúsculas, números, signos de puntuación, símbolos y algunas palabras con caracteres acentuados
  • Los escaneos se trazaron siguiendo la línea central del trazo del lápiz y luego se expandieron hacia trazos Light y ExtraBold
  • Como la escritura original tenía más variación de tamaño y ritmo que una tipografía de lectura habitual, se normalizaron y ajustaron con cierta consistencia la altura, el ancho y el espaciado de los caracteres
  • Se conservaron rasgos como que el trazo horizontal de t y f no sobresalga hacia la izquierda del trazo vertical principal, que A y R comiencen desde la parte superior izquierda, que P sea un bucle simple que empieza abajo a la izquierda, y que M y W sean ondas continuas
  • La dirección final buscó preservar un poco de la aspereza y el contraste que hacen interesante la letra de Shantell, al mismo tiempo que hacía el grosor un poco más uniforme y aplicaba terminales semicirculares suaves
  • Ese equilibrio mantiene la sensación de escritura con marcador y a la vez permite que la forma digital se vea accesible y cálida

  • Bounce e Informality

    • A partir de la tipografía base ya normalizada, se crearon estilos adicionales que reintroducen las irregularidades observadas en las muestras manuscritas escaneadas
    • Esas irregularidades no eran completamente aleatorias, sino que tenían rasgos repetitivos: los caracteres con muchos trazos horizontales tendían a verse más altos, mientras que los que tenían muchos trazos verticales tendían a verse más anchos y bajos
    • Para que la tipografía no se volviera demasiado caótica y perdiera utilidad, hacía falta un equilibrio entre añadir más personalidad y mantener una apariencia que siguiera siendo “tipográfica”
    • Separando la fuente dibujada a mano de la fuente preparada para build, se crearon los ejes Bounce e Informality de la tipografía final
    • El estilo Bounce se generó con un script que mueve los glifos hacia arriba y hacia abajo, mientras que el estilo Informal se generó interpolando entre la fuente principal “normalizada” y una fuente principal “irregular”
    • Todas las fuentes incluían múltiples glifos alternativos para letras, números y símbolos principales, y la tipografía final rota esos alternativos de forma seudoaleatoria para que parezca una escritura a mano llena de energía
    • Al ser ejes variables, el efecto puede ajustarse desde algo sutil hasta algo muy marcado, y permite usar con facilidad tipografía animada con un diseño cohesivo dentro del propio sistema tipográfico

  • Google Fonts y expansión open source

    • Como Shantell Martin estaba interesada en una publicación open source, se discutió si Google Fonts podía apoyar una expansión orientada a una base de usuarios más amplia
    • Con el apoyo de Google Fonts, se creó el conjunto completo de estilos Italic, ampliando así la variedad estilística
    • También se añadió el eje experimental Spacing, que puede ser útil cuando el software no ofrece por defecto soporte para ajustar el espaciado entre letras
    • El sistema Latin se amplió con caracteres vietnamitas y más símbolos de moneda, y la incorporación de Cyrillic permitió dar soporte a un conjunto completamente nuevo de idiomas

Diseño de los caracteres cirílicos de Shantell Sans

  • Cyrillic es un sistema de escritura usado en muchos idiomas de Eurasia, como búlgaro, serbio, ruso, bielorruso, ucraniano, tártaro y baskir
  • El proceso de diseño de Cyrillic es relativamente similar al del diseño Latin, pero puede volverse más difícil cuando se trata de formas no tradicionales inspiradas en la escritura de una persona específica
  • Trabajar en otro sistema de escritura para una tipografía manuscrita se parece a traducir poesía: hay que mantener el tono propio mientras se usa la estructura del idioma de destino
  • Cyrillic tiene formas upright o “printed”, italic y cursive, y algunas formas italic y cursive tienen una estructura distinta de las formas printed habituales
  • La escritura de Shantell Martin mezcla formas cursive y printed, pero como ella solo escribe en Latin, hubo que decidir qué letras cirílicas trasladar como cursive y cuáles como printed
  • Se le pidió a Shantell Martin que escribiera algunas frases en ruso para ver cómo abordaba formas desconocidas, y se le dieron ejemplos de distintas formas para una misma letra, haciéndola escribir varias palabras varias veces
  • También se consultó con diseñadores de tipografía Cyrillic como Maria Doreuli, Krista Radoeva y Alexei Vanyashin, y en general coincidían en lo que se sentía correcto o incorrecto
  • En búlgaro y serbio hay formas convencionales que difieren del Cyrillic básico; por ejemplo, la t búlgara suele tener una forma parecida a la m de Latin, lo que en este estilo podía confundirse con la m cirílica y por eso requirió ajustes
  • Caracteres como el nje serbio debían verse naturales para lectores nativos tanto en mayúscula como en minúscula, y para el serbio también se consultó a Jovana Jocić
  • El trabajo en Cyrillic implicó muchos desafíos de diseño, pero la expectativa es que resulte útil no solo en composición en Latin, sino también en textos tipográficos de varios idiomas Cyrillic

Cómo usarla y enlaces de referencia

  • Shantell Sans on Google Fonts: disponible en Google Fonts
  • open-source repo: descarga de la versión más reciente
  • También puede usarse en Google Docs, Slides y otros productos de Workspace

  • Cómo agregarla en Google Workspace

    • Abre el menú de fuentes en el documento y haz clic en “More Fonts”
    • En el panel emergente que se abre, busca “Shantell Sans”
    • Haz clic en la familia tipográfica para agregarla al menú de fuentes
    • Google Material Design Blog: versión resumida disponible

Lecturas relacionadas

1 comentarios

 
GN⁺ 2 시간 전
Comentarios de Hacker News

  • Al ver la muestra multilingüe más o menos a la mitad del artículo, noté que los glifos cirílicos de esta tipografía son excelentes
    Cuando pruebo tipografías nuevas, normalmente los caracteres cirílicos no están tan bien logrados como los latinos; las excepciones suelen ser tipografías de fundidoras del ámbito cirílico, como ParaType
    En el último tercio del artículo explican en detalle cómo lograron esto
    https://www.paratype.com/fonts/pt/yefimov-sans?tab=gallery

  • El slider de formalidad con el que se puede jugar en la página de Google Fonts enlazada en el artículo es un ejemplo realmente genial del uso de ejes en tipografías variables que he visto recientemente
    Se siente como ver a Metafont ser reevaluado lenta pero constantemente
    https://fonts.google.com/specimen/Shantell+Sans

    • Dash de Typotheque también tiene un eje variable casi idéntico, y ahí lo llaman “Speed”: https://www.typotheque.com/fonts/dash-casual
      Por alguna razón, tienes que hacer clic en la casilla “Variable” para ver todo el rango variable
    • Eso es lo más genial. Además hasta tiene un “slider de bounce”
      Vivimos en tiempos increíbles... me pregunto si hay más tipografías con este tipo de ajustes especiales
      Sigo esperando la tecnología que haga posible una tipografía manuscrita con verdadera aleatoriedad
    • No conozco bien Metafont, ¿te refieres a esto? https://ctan.org/pkg/metafont?lang=en
    • Espera, ¿eso significa que si la haces más informal, los glifos individuales de una misma letra podrían verse distintos incluso dentro de la misma oración?

  • La tipografía es excelente. Pero técnicamente siento que le falta ir un paso más allá con glifos variables
    La sensación de leer escritura a mano se pierde cuando las letras siempre tienen la misma forma
    Si se pudieran incluir 5 o 6 pequeñas variaciones para cada letra y alternarlas aleatoriamente, sería increíble

  • Me sorprende que esta sea la primera vez que veo una tipografía así. He trabajado con bastantes tipografías del estilo Comic Sans, y esta es por mucho la tipografía más hermosa que he visto hasta ahora

  • La similitud con Comic Sans es tan evidente que lo primero que hice en el artículo fue buscar “comic” con Ctrl-F
    Mi primera idea fue ver hasta qué punto habían llevado el concepto
    También es interesante cómo se distribuyen las menciones a Comic Sans en el texto: aparecen varias veces alrededor del 30%, como reconociendo claramente la genealogía, y luego casi desaparecen
    Esta tipografía realmente fue más lejos, y es hermosa

  • ¿Sería raro querer una versión monoespaciada de esta tipografía? Se ve realmente genial y muy bien diseñada

  • A mi hija con dislexia le gustó muchísimo. En los ejemplos claramente prefiere esta tipografía sobre Roboto

    • Yo no tengo dislexia, pero incluso en los ejemplos con Roboto la diferencia de legibilidad me pareció muy clara
      Para ese punto ya me había acostumbrado a Shantell Sans, así que Roboto casi se sentía difícil de leer

  • Vaya, es tan fea que hasta cuesta explicar qué tan fea es

  • Apenas la vi y ya se convirtió en mi tipografía manuscrita favorita. Gran trabajo

  • Parece una hermosa obra de arte creada por la interacción humano-computadora
    Incluso puede usarse perfectamente en contextos donde Comic Sans podría parecer una especie de burla