Webdesign kom forældet, dagen webfonter trådte i vid udbredelse. Før dette punkt er det argumentabelt, at vi var mindre designere end ingeniører.
Den entusiasme, som vi har grebet på skrifttypeindstillinger i webdesign, har imidlertid ført til en forvirrende række valgmuligheder. så meget, at mange designere vælger den mindste modstands vej, hvorved ønsket om enkel implementering dikterer deres typografi.
Hvis du ved hvad du leder efter, er alle mulighederne enkle. I denne artikel vil vi sætte dig i stand med den viden, du har brug for til at træffe velinformerede beslutninger, når du vælger mellem skriftteknologi.
Vi skal illustrere disse muligheder ved at fokusere på den bedste måde at levere et heltid klassisk skrifttype på, Garamond.
Efter at have fremhævet webfonts dyder, vil den første mulighed vi overvejer, slet ikke bruge nogen webfonter. Font stacking er en CSS-teknik, hvor du angiver et antal fallbacks, der starter med dit første valg og slutter med en catch-all-løsning.
Der er masser af skrifttype stabling ressourcer online, men en af mine favoritter er cssfontstack.com, Det er et godt udgangspunkt for en fontstabel, men vær opmærksom på, at du oftest end ikke har brug for at bringe nogle ekspertise til at bære.
Ifølge cssfontstack.com er Garamond tilgængelig som system skrifttype på 49,91% af Mac og 86,47% af Windows-maskiner. Det er ret godt, men ikke godt nok. Her er den foreslåede skrifttypestabel, der dækker alle baser:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Spørgsmålet er, hvordan kan vi forbedre dette?
Nå ved vi, at der er mange versioner af Garamond til rådighed, så vi kan tilføje i en variation i den anden slot som et mindre kompromis.
For det andet er jeg uenig om, at enten Baskerville eller Times er passende erstatninger for Garamond, så lad os tabe dem. Hoefler Text fungerer godt i stedet for Garamond, så det kan blive. Vi er nødt til at tilføje serif som en endelig catch-all, men da de fleste systemer bruger Times som deres standard serif, lad os spilleplads i langt bedre Georgia for alle, der glider gennem revnerne.
Vores sidste ændrede skrifttypestabel ser sådan ud:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;De fleste seere vil se Garamond, et par andre vil se et rimeligt kompromis, og et lille mindretal vil bare få deres standard serif font.
Font stacking er gratis, langt den hurtigste løsning, og afhængigt af dit valgte skrifttype kan det være meget effektivt; for Garamond er der et godt argument for at kalde dette 'job done'.
Der er dog et stort problem med skrifttype stabling, især med et skrifttype som Garamond: der er så mange piratversioner i omløb, at det er umuligt at vide, hvilken skrifttype der hedder "Garamond" på brugerens system, ikke kun kan vi ikke være sikre designet er i overensstemmelse med vores forventninger, kan skriftstørrelsen være radikalt forskellig fra versionen i vores design. (Teknisk set er der intet, der forhindrer, at en kopi af Arial bliver omdøbt til "Garamond", i hvilket tilfælde vores skrifttypestabel ville bruge det.)
Font stacking er derfor en fantastisk backup, og bør overvejes til brug sammen med alle nedenstående løsninger, men det er mindre end ideel som en primær løsning.
Google Fonts er for mange designere det punkt, hvor de slutter deres søgning. For et samlet beløb på $ 0 kan du nemt indlæse webfonter til dit websted ved hjælp af CSS.
Den eneste ulempe er, at antallet af skrifttyper, der tilbydes, er ekstremt begrænset. Skrifttyper som Roboto og PT Sans skylder deres popularitet lige så meget til deres ledige tilgængelighed på Google Fonts, hvad angår deres designkvaliteter.
I øjeblikket er den eneste variation af Garamond tilgængelig på Google Fonts EB Garamond, et forsøg på at åbne source Garamond skrifttypen. Men fejlen med denne version er, at der kun er en vægt og stil til rådighed; Der er ingen fed eller kursiv. Designeren Georg Duffner har generøst lavet sit arbejde i gang på Bitbucket men det er ikke produktionsklar.
Google Fonts er en fantastisk budgetløsning og ideel til situationer, hvor du kan lægge regningen i stedet for din klient. At kunne specificere dine skrifttyper i CSS er så simpelt som muligt.
Den store fejl med Google Fonts er, at på trods af deres markedsføring er der meget lidt valg. Hvis du leder efter en webfont af Open Sans, så er du på det rigtige sted, men hvis du vil have en skrifttype som Garamond, som næsten ikke er uklar, er det en udvaskning.
Self-hosting er en enorm underappreciated tilgang til webfonter. Dens nøgleattraktion er evnen til at sætte ind skrifttyper, en mulighed, der er så attraktiv, at næsten alle streamingtjenester forsøger at efterligne det.
Hvis du har en desktop kopi af Garamond på dit system, skal du åbne den og du får et forvirrende antal tegn. Subsetting af en skrifttype er processen med at slette ikke-essentielle tegn, hvilket resulterer i en mindre filstørrelse og hurtigere levering.
Naturligvis vil de tegn du har brug for afhænge af det websted, du bygger: hvis du bygger en turistguide til Dubrovnik, har du sandsynligvis brug for serbiske cyrilliske tegn; hvis du reproducerer de indsamlede værker af shakespeare, er det usandsynligt, at du har brug for et @ symbol.
For at dele en skrifttype skal du bruge skrifttypedigeringssoftware. Der er mange muligheder tilgængelige fra gratis FontForge til præmien FontLab Studio. For at fremstille en delversion af skrifttypen skal du blot vælge en glyph, du ikke vil have, og slette den, og gem filen i din projektmappe. (Pas på ikke at overskrive din originale skrifttype fil!)
Den fulde .ttf-fil til Adobe Garamond Pro er 606Kb. Stripping det ned til grundlæggende latinske tegn og tegnsætning reducerer det til 56Kb. Multiplicér det på tværs af flere vægte og stilarter, og du sparer et par Mb i downloads til dine brugere.
De fleste skrifttypefiler, du har installeret, vil være TrueType (.ttf) med en smattering af OpenType (.otf). Du kan gemme disse til din server og angive dem i dit CSS.
Støtte til .ttf og .otf filformater er udbredt på tværs af alle moderne browsere undtagen IE (selv den nyeste version) og nogle mobile browsere (herunder gamle versioner af iOS Safari).
For at øge din dækning skal du bruge flere yderligere formater. .eot fungerer for IE, .woff vil fungere for de fleste browsere og er W3Cs foretrukne format, .svg vil arbejde på gamle browsere. Der er en række webtjenester, der genererer disse formater for dig fra din .ttf-fil, et af de mest populære væsener Font egern er.
Ulempen med at konvertere skrifttyper til brug online er to gange: For det første er du næsten bestemt ikke licenseret til at gøre det; og for det andet er desktop skrifttyper næsten altid optimeret til print, de gør simpelthen ikke godt på skærmen.
Font støberier har endelig vågnet op for, at der er et stort marked for webfonter. Som følge heraf har de ikke kun strammet deres licens, men de arbejder på at optimere deres back-kataloger til skærme.
Støberier, der leverer dedikerede webfonter, giver alle de nødvendige formater, kvalitetskontrolleret og klar til upload til din server. Desuden er du stadig fri til at dele en fil, og du er ikke afhængig af en tredjeparts serverens oppetid.
Der er mange steder, du kan købe webfonter, to af de vigtigste aktører på feltet er FontShop.com og MyFonts.com .
Tilbage til vores Garamond-quandary, kan vi se, at MyFonts har en række forskellige versioner af Garamond på tilbud. Vi kan licensere Adobe Garamond i flere vægte, begrænset til 250.000 sidevisninger, for omkring $ 180.
FontShop har også en række webfont versioner af Garamond til rådighed. URW Garamond Web giver enhver vægt og stil, vi eventuelt kunne ønske, alle med en generøs 500.000 sidevisninger pr. måned. Derudover har FontShop en dedikeret subsetter at optimere dine skinnende nye skriftlige indkøb. Desværre betaler du en præmie for alt dette, omkring $ 680 for den fulde skrifttype familie.
Self-hosting muliggør subsetting. Det sikrer, at du holder styr på din skriftlevering, og du undgår enhver form for afhængighed af tredjeparts servere.
Hvad mere er, hvis du køber en professionel webfont, kan du forvente, at kvaliteten er ekstremt høj.
Self-hosting appellerer også til os, der foretrækker at "eje" vores skrifttyper snarere end at leje dem. Selvfølgelig er der i juridisk henseende meget lidt ejerskab overhovedet, men et engangsgebyr sidder mere komfortabelt, at et abonnement for mange mennesker.
Den eneste ulempe ved selv-hosting er den betydelige pris. Ikke kun skal du betale for skrifttypen, men du skal muligvis faktor hosting og båndbredde omkostninger i dine tal.
Ligesom Google Fonts leverer webfont-tjenester skrifttyper til vores browsere via simpel CSS. I modsætning til Google Fonts er der et stort udvalg at vælge imellem.
Der er en række forskellige leverandører at vælge imellem, og jeg kan især lide Hoefler & Frere-Jones ' cloud.typography service. Men som med mange mindre leverandører er deres anvendelighed helt afhængig af tilgængeligheden af det skrifttype, du leder efter. Den nærmeste skrifttype Hoefler & Frere-Jones kan levere er Hoefler Text, men hvis vi betaler en præmie, skal vi ikke kompromittere.
Den største spiller i webfont streaming er Adobe Typekit . Kvaliteten af deres skrifttyper er meget høj, implementeringen er enkel, og vigtigst af alt har de et stort katalog at vælge imellem.
Typekit giver en række abonnementer fra $ 24,99 om året for 50.000 visninger om måneden til $ 99,99 om året for 1.000.000 visninger om måneden. Men hvis du er et Creative Cloud-medlem, er porteføljeplanen inkluderet i dit abonnement; hvilket betyder, at for de fleste webdesignere er Typekit en gratis løsning.
En hurtig søgning fortæller os, at der er flere versioner af Garamond, herunder Adobes egen, tilgængelig på Typekit. Og der er også en meget begrænset subsetting-funktion, der giver os mulighed for at reducere filstørrelsen lidt.
Webfont streaming tjenester giver en stor varity af fremragende kvalitets skrifttyper, der er nemme at tilføje til dit websted.
I tilfælde af Typekit, hvis du allerede er medlem af Creative Cloud, så gør fri adgang det til en endnu mere tiltalende løsning. Men hvis du ikke er medlem, så står du over for et valg mellem at betale et stort abonnement og binde dig til Adobe.
Mit principielle problem med enhver streaming-tjeneste er, at du er helt afhængig af en tredjepartsserverens ydeevne. Hvis deres server går ned, det gør også en væsentlig del af din branding.
Som med så mange ting er svaret: det afhænger af dit projekt. Men der er nogle beslutninger, vi kan tage ud fra vores Garamond-test:
Font stacking er en gratis backup, det giver en on-brand løsning, hvis og når fontfiler forsvinder eller streaming tjenester kører langsomt. Det skal altid implementeres på et hvilket som helst sted, men stole på det, selv for noget så almindeligt som Garamond er potentielt farligt.
Hvis den skrifttype, du leder efter, er tilgængelig til at streame gratis, enten via Google Fonts, eller hvis du f.eks. Har et Creative Cloud-abonnement, er dette et godt valg. Da jeg har et Creative Cloud-abonnement, vil jeg blive fristet ned på denne rute, selvom manglen på reel subsetting ville være et problem.
Hvis du har budgettet, er selvbetjening en professionel webfont det bedste valg. Den forholdsvis beskedne omkostning - sammenlignet med lagerfotografering - er let berettiget af de kraftige hastighedsforøgelser, der giver lavere leverancer.
I en industri, hvor vi redigerer JavaScript-filer for at spare et par Kb, rager hundredvis af gange det pågældende beløb fra en enkelt fil, der ikke er en brainer.
Fremhævet billede / miniaturebillede, download billede via Shutterstock.