Tusind skrifttypes anatomi

Et forsøg på at oprette en fontdatabase med opentype.js

Selv år efter Avatar's frigivelse er der en ting, Ryan Gosling bare ikke kan komme over: valget af filmens logo font "Papyrus". I parodien produceret af Saturday Night Live åbner designeren af ​​logoet fontmenuen, gennemser skrifttyperne en efter en og vælger tilfældigt at gå med “Papyrus”.

Det tilsyneladende tankeløse valg af en skrifttype er et generelt problem med fontmenuer: der er enten for få eller for mange indstillinger.

På den ene side kan en begrænsning af systemskrifter, som det ses i videoen, føre til et dårligt valg, fordi der ganske enkelt ikke er noget bedre installeret.

På den anden side kan biblioteker på nettet med hundreder eller tusinder af skrifttyper være ganske overvældende og føre til et valg af paradoks.

Middag for ingen: Skriftmenuens bitre smag

Den gennemsnitlige skrifttypemenu præsenterer en liste over tilgængelige skrifttyper, sorteret efter navn, men helt uden sammenhæng ellers: Et skrifttype designet til dristige overskrifter efterfølges af en, der er designet til små brugergrænseflader, og derefter dukker et smukt script-skrifttype til bryllupsinvitationer op. Nu bliver du enten fanget i en tidskrævende proces med at rulle gennem hele listen fra start til slut, eller du vælger blot at vælge det første bedste match fra den øverste del af listen og kalde det en dag.

Dette er tydeligvis ikke en grænseflade, der er lavet til systematisk efterforskning - men uendelige overraskelser. Selvom jeg kan lide at blive overrasket, kan jeg også gerne påvirke mine odds.

Skrifttypemenuen i “Papyrus” af Saturday Night Life. Begrænset valg, forskellige stilarter, men ikke nødvendigvis de bedst mulige skrifttyper.

En systematisk tilgang til at finde skrifttyper

Der er forskellige måder at begrænse indstillingerne på. Før jeg dykker ned i at analysere fontfiler, glyfer og metadatatabeller, skal vi først se på klassificering, kuraterede lister og derefter anatomi.

1. Klassificering

Tidligt i designskolen har jeg lært om skrivningens historie og praktiseret kalligrafi for at forstå, hvordan skrivning udviklede sig, og hvordan værktøjer havde en øjeblikkelig indflydelse på design af type ansigter.

Dette førte til sofistikerede systemer til klassificering af skrifttyper baseret på deres udseende gennem historien. De enkleste klassifikationer er skrifter, serif, sans-serif, monospaced, script og display. Vi kan normalt finde disse klasser i form af filtre på ethvert fontwebsted:

Klassificeringsfiltergrænseflader. Øverst til venstre: Fontshop. Til højre: MyFonts. Nederst til venstre: Google-skrifttyper. Nederst: TypeKit.

Disse enkle filtre giver os måske stadig for mange muligheder. Det er, når der kan introduceres mere specifikke udtryk som overgangsserif, humanistisk serif eller blackletter for at differentiere skrifttyper i klasseserifen.

Undertiden er disse underkategorier tilgængelige som tags. Men nogle gange findes de bare ikke i så detaljeret. Måske er der for mange kategorier? Måske forstår brugerne ikke alle disse muligheder? Måske er der bare ingen komplette og konsistente data tilgængelige?

2. Sammenstillede lister

En anden måde at sætte orden på kaoset på er at stole på andres viden: Menneskekuraterede fontlister. Vi kan f.eks. Finde dem på Fontshop. Der kan du finde samlinger, der er baseret omkring et årti i historien som "1930", baseret på lighed som "Helvetica Alternatives" eller applikationsspecifikke lister som "Branding" eller "Newspapers".

Lignende lister kan findes på Typekit, TypeWolf eller FontsInUse. Jeg synes, disse lister er gode, og jeg opfordrer alle til at begynde at lave deres egne lister med skrifttyper, du allerede har arbejdet med eller set i applikationen. Det vil betale sig i fremtiden at have disse referencer.

3. Anatomi

Den mest komplekse måde at se på skrifttyper på er at fokusere på deres designdetaljer og prøve at forstå, hvad der gør et skrifttype godt eller specielt. Heldigvis findes der bøger om typedesign, skrifttyper og typografi. De kan lære os, hvordan man laver skrifttyper, hvordan man vælger dem og hvordan man bruger dem.

En af disse bøger er “The Anatomy of Type” af Stephen Coles. Et par år efter designskolen var denne bog en opdatering, der afslører detaljer om 100 veletablerede skrifttyper. Stephen Coles bruger udtryk som x-højde, bredde, vægt, boldterminaler, serif-stil og andre til at beskrive kvaliteten af ​​skrifttyper.

“Anatomi af type” - En grafisk guide til 100 skrifttyper af Stephen Coles. En dejlig bog, hvis du vil lære om historien og designdetaljerne i populære skrifttyper.

Efter at have set på de 100 skrifttyper tænkte jeg: hvad med resten? Hvad med skrifttyperne på min computer? Og dem på nettet? Hvad er deres højde, bredde, vægt og kontrast? Hvordan finder jeg ud af det?

Inde i en fontfil: Mangel på metadata

Før jeg begyndte at kode, håbede jeg, at jeg kunne finde ud af om egenskaberne ved en skrifttype på en nem måde. I teorien leveres alle skrifttyper med en række metadatatabeller, der indeholder information om skrifttypens navn, forfatter, sprog og visuelle egenskaber. Bredde, vægt og fontfamilieklasse er de indlysende. Men også information om xheight, kappehøjde, gennemsnitlig charbredde, ascenders og efterkommere kunne findes. Et andet sæt metadata kaldet Panose beskriver endnu flere egenskaber som serif-stil, proportioner, kontrast og mange flere. Ved hjælp af apps til fontdesign som Glyphs kan enhver inspicere skrifttyper for at se disse oplysninger:

Et skærmbillede af “Font Info Panel” i fontdesign-appen “Glyphs”. Det viser grundlæggende oplysninger om familienavn, designer, url, version, dato. Brugerdefinerede indstillinger viser oplysninger om Unicode Range og Panose. Den 10-cifrede kode beskriver mange egenskaber, men disse oplysninger er ikke altid tilgængelige, da de skal defineres og måles af designeren eller producenten af ​​skrifttypefilen. På det højre skærmbillede kan man se målinger som ascender, descender, x-højde og kursiv vinkel.

Men tilgængeligheden af ​​disse oplysninger afhænger af det arbejde, der er lagt i at fremstille skrifttypen. Selvom nogle skrifttyper indeholder en masse information, er det ikke altid tilfældet, især ikke for gratis eller open source-skrifttyper, såsom dem fra Google-skrifttyper. Men selv hvis der gives oplysninger, er de ikke nødvendigvis konsistente eller komplette nok til at foretage sammenligninger baseret på dem.

Sammenligning af Panose-oplysninger tilgængelige for Roboto og Fira Sans, begge tilgængelige på Google-skrifttyper. Mens Fira Sans leverer meget, gør Roboto ikke det. Disse metadata kan naturligvis ikke bruges til at sammenligne skrifttyper ...

DIY: Parring af skrifttyper med opentype.js

Så for selv at klassificere og sammenligne skrifttyper, var jeg nødt til at se nøje på fontfiler og finde automatiske måder at udtrække oplysninger på. Skrifttyper er tilgængelige i forskellige filformater, men til sidst er de næsten altid tilgængelige som TTF (TrueType-skrifttyper).

Andre formater er OTF (OpenType), der indeholder oplysninger om yderligere funktioner, såsom ligaturer eller WOFF (Web Open Font Format), der kan komprimere skrifttypen og gemme yderligere metadata.

I disse dage kan vi, takket være Frederik De Blesers opentype.js, inspicere fontfiler ved hjælp af JavaScript i en webbrowser. Opentype.js giver os adgang til vektoroplysninger om alle de glyfer, der er inkluderet i en fontfil, og det giver også adgang til nøglemetriks og metadatatabeller.

En database med egenskaber

I det følgende afsnit vil jeg beskrive, hvordan jeg målte kontrast, x-højde, bredde og vægt af alle skrifttyper, der leveres i Google Font-biblioteket. De samme metoder kan anvendes til andre skrifttypebiblioteker, såsom Typekit eller skrifttyper fra din computer.

Slagkontrast

Kontrasten beskriver forholdet mellem tynde og tykke streger. Der er skrifttyper med lidt strejkkontrast, f.eks. pladeserifs eller mange sans serif-skrifttyper designet til brugergrænseflader, f.eks. Roboto eller San Francisco. Der er andre med meget kontrast, såsom Bodoni eller Didot. For at måle kontrasten kan vi spore konturerne af en "o" og se efter den mindste og største afstand mellem indre og ydre form.

Kontrasten til et skrifttype kan måles på den tykeste og tyndeste del af en

Det er en enkel og sammenlignelig bogstavsform, der næsten altid består af to stier. Det er en god kandidat til at estimere kontrasten til et skrifttype. (Side note: Mens tilsyneladende enkel, er formen på en "o" faktisk ret svært at tegne godt, fordi stryget skal jævnt vokse og krympe mellem tyndt og tykt.)

opentype.js giver praktiske måder at få stedsdata til at tegne tegn til et SVG-element. Jeg tegner faktisk indre og ydre stier hver for sig. Derefter brugte jeg en algoritme, der kører langs hver sti og måler afstanden på hvert punkt. Vi kan derefter beregne forholdet mellem den længste og korteste afstand og voila - vi har en sammenlignelig kontrastmåling.

x-højde

X-højden er en vigtig egenskab, der kan være en indikator for læsbarhed og opfattet størrelse på en skrifttype. Det måles normalt øverst på et lille x.

X-højden kan måles ud fra den glyph-information, som opentype.js giver.

opentype.js giver os de nødvendige målinger, nemlig yMax for enhver glyph.

Ud over den absolutte måling kan det være nyttigt at også sammenligne x-højden med højden på opstigningerne. Således kan vi få procentværdier som "x-højden er 60% af store bogstaver".

For at gøre værdierne sammenlignelige (nogle skrifttyper bruger 1000 unitsPerEm, andre 2048 unitsPerEm) er det nødvendigt at normalisere værdierne og kortlægge dem til et område fra 0–1.

Bredde / Proportion

Med denne værdi prøver jeg at forstå, hvor smal eller bred en skrifttype er. Er det temmelig kondenseret eller forlænget? En idé, jeg havde, var at måle bredden på en “M”. Men for at gøre disse sammenlignelige, skal man sætte dem i sammenhæng med den samlede størrelse eller x-højden. Nogle skrifttyper har måske også meget specielle "M" -glyfer, der ikke repræsenterer resten af ​​skrifttypen.

En anden idé er at beregne den gennemsnitlige glyph-bredde ved hjælp af et prøveord som “Hamburgefontsiv”. Selvom dette fungerer ganske godt, skal det også kræves en vis normalisering med hensyn til det generelle design og højde på skrifttypen.

En anden tilgang er at se på andelen af ​​en ”o”. Dette giver overraskende gode værdier til sammenligning af bredde på skrifttyper.

Vægt

For at måle vægten gengiver jeg små bogstaverne "o" til et HTML lærredselement, udfylder det sort og maler baggrunden hvid. Derefter måler jeg forholdet mellem sorte og hvide pixels. Et skrifttype eller en hårlinjefont vil vise meget små værdier, mens en meget tung blokeret font viser høje værdier. Dette gav mig okay resultater, men jeg vil forbedre dette ved at måle faktiske stængler af glyfer i fremtiden.

Mellemrum

Når alle glyfer i et skrifttype har samme bredde, kaldes de monospaced. Vigtigt her er, at vi ikke nødvendigvis kan se på selve glyferne for at bestemme bredden. Selv i en skrifttype med en mellemrum tager et prikketegn mindre synligt plads end en "m". Således er vi nødt til at tage højde for egenskaben for viderebredde, der beskriver den usynlige bredde omkring en glyph. Her kan vi finde ud af, at Google Fonts bruger monospaced som en stilklassificering, men ikke for at indikere den tekniske egenskab. Skrifttyper som Lekton eller Libre-stregkode er ikke opført som monospacede, men teknisk set er de det.

Lighed

Når vi først har en tabel med værdier, kan vi normalisere disse og derefter beregne afstande for at se, hvordan lignende skrifttyper er. Jeg implementerede en meget grundlæggende version af den, der ikke er forfærdelig, men som kunne være bedre med højere nøjagtighed af dataene. Vi kan også opleve ligheden forskellig end en algoritme, der behandler alle egenskaber lige. I dette tilfælde er vi muligvis nødt til at veje nogle egenskaber mere end andre.

Skrifttypen analyserer hver skrifttype, tegner skjulte SVG'er og lærredselementer til målinger og gemmer dataene i en JSON-fil.

Demo

Jeg har oprettet en grænseflade for at gøre databasen tilgængelig. Skrifttyper kan ses i et gitter af forskellig størrelse for at få et overblik over alle skrifttyper eller for at se på detaljer om et par skrifttyper.

Skrifttyper kan sorteres efter vægt, x-højde, kontrast, bredde, navn og antal stilarter. Afhængig af sorteringskriterierne vises passende glyfer.

Områdediagrammer viser fordelingen af ​​værdier og kan bruges til at filtrere bestemte værdier. Hver skrifttype har en detaljeret oversigt med et par eksempler, glyfer, metrics, Panose-information og lignende skrifttyper.

Skærmbillede af projektets websted

Udforsk datasættet
https://getflourish.github.io/anatomy-of-typefaces/
Af en eller anden grund indlæses nogle skrifttyper ikke i Safari, så jeg anbefaler at bruge Chrome.

screencast
https://vimeo.com/239318934

fund

Datasættet inviterer en til at udforske og finde ligheder og uregelmæssigheder. Indstilling af lav kontrast og serif vil returnere alle serif-skrifttypene. Lav x-højde vil give os for det meste håndskrevne eller script-skrifttyper. Meget høje værdier indikerer ofte alle kaskets skrifttyper.

Misfits
Valg af de nedre eller øvre ender af spektret vil ofte vende meget underlige design. De falder for det meste i kategori-displayet.

Grimme forskelle
Netoversigten afslører de forfærdelige forskelle i baselinjer og justeringer. Nogle skrifttyper er radikalt fra nettet. Og selv med subtile forskelle bliver det klart, at en simpel 1-til-1-skriftsubstitution er næsten umulig - med undtagelse af nogle populære skrifttyper, som alle ser ud til at dele et lignende skelet.

Gennemsnittet er godt
Det er interessant at se, at ofte anvendte skrifttyper, som vi betragter som gode, alle falder ind i en lignende undergruppe. Ved at justere filtrene kan jeg skære listen ned til mindre end halvdelen, og alle de populære skrifttyper vil stadig være der. Valg af gennemsnitsintervaller er en enkel måde at filtrere misfits og ekstremer på.

Forkede skrifttyper
Vi kan også finde skrifter, der ligner nøjagtigt det samme som andre, men med forskellige navne. Nogle af disse er gafler, der udvider tegnsættet til at understøtte yderligere sprog, f.eks. Alegreya & Sahitya.

Antal stilarter
Frem for alt er antallet af stilarter, en skrifttype har, en god indikator for dens kvalitet - mindst så længe designere stadig har brug for en stor indsats for at designe forskellige vægte og stilarter. Variable skrifttyper er i horisonten, og uendelig tilpasning kan være fremtiden. Men indtil da er det godt råd at arbejde med fontfamilier, der har flere stilarter. Således er sortering af samlingen efter antal stilarter en hurtig måde at få et overblik over de bedste tilgængelige skrifttyper på.

Resumé

Dette er en kompleks måde at se font-efterforskning på. I sidste ende afhænger kvaliteten af ​​resultaterne af kvaliteten af ​​skrifttyperne og dataene omkring dem. Kun browsing af Google-skrifttyper er meget begrænsende, da deres overordnede kvalitet ikke er kendt for at være den bedste i klassen. Jeg er allerede begyndt at køre analyse på Typekit-biblioteket og i sidste ende mødte nye udfordringer med brugergrænsefladeydelsen, når jeg forhåndsvisede så mange skrifttyper. En sådan virksomhed kræver passende cache- og forindlæssestrategier. Men jeg behøver ikke gå så langt endnu.

Uden nogen AI er involveret, har jeg nu en god forståelse af, hvad der findes i fontfiler, og hvad der mangler. Jo mere og mere jeg kom ind på dette, indså jeg, hvor massivt fontteknologi er, og at jeg kun kommer ind på noget, der er blevet gjort i årtier.

Muligheder

Med et sådant datasæt kunne man gøre flere ting:

  • find tilbagevendende skrifttyper med en lignende bredde eller stil
  • juster automatisk fontstørrelser og linjehøjder baseret på x-højde
  • find fontkombinationer baseret på lighed eller forskel
  • opbyg en tilpasset fontmenu til Avatar's plakatdesigner
  • ...

Prøv appen
https://getflourish.github.io/anatomy-of-typefaces/

Se screencast
https://vimeo.com/239318934

Før jeg offentliggør det rå datasæt, vil jeg forbedre analysen og forsøge at tilføje flere egenskaber. Hvis du har nogen ideer til forbedring, tøv ikke med at give en kommentar. Tak for at have læst!

Yderligere læsning

Panose Classification Metrics Guide
Vejledningen fra 1991 beskriver detaljeret, hvordan man måler individuelle glyfer for at udlede sammenlignelige målinger. Desværre skal disse målinger udføres for hånd og kan være ret tidskrævende.

At tage robotterne til designskolen, del 1 af Jon Gold
Allerede i maj 2016 skrev Jon Gold om sin tilgang til analyse af skrifttyper i dybden og dækkede emner som regelbaseret design, kunstig intelligens og relevansen af ​​sådanne datasæt for designværktøjer.

Google-fontværktøjer
Et sæt åbne souce-værktøjer, der bruges til at analysere skrifttyper til brug på Google Font-webstedet. Du kan finde lignende algoritmer der, men også andre, der for eksempel bestemmer en kursiv vinkel på en skrifttype.

Font Bakery
Fontbageri er et sæt Python-værktøjer, der kører kontrol af TrueType-filer og Google Font-relaterede metadatafiler.

bilag

Spørgsmål: Hvorfor brugte du ikke data fra webtypetjenester?
A: Tjenester, der leverer skrifttyper som Typekit, Google-skrifttyper, Fontstand, Fontshop, MyFonts osv., Alle leverer deres eget sæt filtre med mere eller mindre fin kontrol. API'erne for disse tjenester er også forskellige i mængden af ​​information, der er tilgængelig for hver skrifttype. Normalt leveres kategorien, men andre oplysninger er enten udeladt eller ikke kompatible mellem tjenesterne.

Følgende eksempel viser, at alt, hvad vi får fra Google Fonts Web API til Roboto, er dets kategori sans-serif, varianter og undersæt. https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1

Typekit API giver mere information om bredde, x-højde, vægt, klassificering, kontrast, hovedstæder og en anbefaling.
https://gist.github.com/getflourish/8c7c9ab4ddcf422cbb77866b5cf61575

Som du kan se, i eksemplet API-resultat, er oplysningerne om en skrifttype specifikke for udbydere. For at være mere fleksibel og uafhængig begyndte jeg at lave min egen analyse.