RWD-fokus: Responsiv typografi, del 1

Responsive Web Design (RWD) fortsetter å utvikle seg mens de holder tritt med den konstante ankomsten av nye nettbrett, smarttelefoner og andre mobile dingser.

Et av områdene som er inkludert i RWD er responsiv typografi, og spesielt hvordan nettfonter gjengis på forskjellige enheter med hensyn til skjermoppløsninger og størrelser. De siste vurderingene i RWD inkluderer breakpoints, mediesøk, layoutgitter og lerretbytter i engros avhengig av enheten, men hva med skrifter og typografi?

Å adressere nettfonter som en del av en responsiv typografistrategi betyr at vi må ta en ny tilnærming fra den tradisjonelle arbeidsdesignprosessen. I etterkant av arbeidsflyten som er beskrevet i dette stykke, vil jeg inkludere en demonstrasjon av hvert trinn ved å bruke en eksempelartikkel med tittelen "Take Great Photographs with Camera - 7 Tips" fra Article Geek for det tekstlige innholdet.

Responsiv arbeidsflyt

Hjertet i responsiv typografiutvikling er basert på nylig aksepterte arbeidsflytprosesser for responsiv webdesign, som vanligvis er oppdelt i ti trinn som beskrevet i Responsive Design Workflow: Mobilism 2012 presentasjonen av Stephen Hay. Viljami Salminen har destillert mange av de samme prinsippene til "Prototyping Responsive Typography"; både Hays presentasjon og Salminens stykke er inspirasjoner til denne artikkelen.

proto~~POS=TRUNC

Den første fasen av den responsive typografiprosessen begynner med å legge til en del av det nye innholdet som skal utformes i responsivt format. Ved å bruke bare tekstinnholdet og et kontrollert sett med skrifter og skriftstiler, oppfordres du til å se typografien slik den vises i nettleseren uten andre visuelle avledninger eller distraksjoner. Den typografiske prototypen fungerer som en enkelt webside som består av rent tekstlig innhold sammen med font- og typestiler og skalering på en isolert måte.

Få innholdet først

Før du kan ta noen avgjørelser om skrifttype og typografiske stiler, må du ta sikkerhetskopi bare litt og forstå det tekstlige innholdet som vises på nettstedet. Innholdet skal drive designet, og ikke omvendt. Dette er et stort skifte i mange tradisjonelle webdesignprosesser der en-størrelse-til-passer-tilnærming, som har fungert i det siste, ikke lenger er passende. Ikke bare det tekstlige innholdet, men språket, flyten, emnet og emnet må forstås fullt ut før noen stilarter eller typesett blir vurdert. For eksempel vil ikke Comic Sans-fonten fungere bra med mest alvorlige emneemner, og på samme måte vil et letthjertet emne ikke vises godt ved å bruke en skrift som Baskerville, som ofte anses å være verdens " alvorligste "font, ofte brukt til gjenoppta skriving. Eksemplet på rå tekstinnhold fra artikkelen for demonstrasjonen vises i figur B :

Design i tekst

Flere verktøy er tilgjengelige som tillater online testing og design med tekst, mens flere tillater endringer i sanntid og gjennomgang i sanntid, inkludert Googles nettfonter, Typekit av Adobe, Web Font Specimen av Nice Web Type, Typecast og FontFriend av Soma Design som lar deg designe i nettleseren som vist i figur C nedenfor.

Figur C

Å designe i teksten betyr at du kan ta utkastet eller originalt innhold og leke deg rundt med forskjellige iterasjoner fra skrifttypen og fontbiblioteket. Begynn med et bredt omfang, og begynn deretter å begrense valgprosessen. Begynn først med fontklassifiseringer som inkluderer de vanlige kategoriene som:

  • Sans Serif, Serif, Slab Serif, Script, Blackletter, Mono, Hand eller dekorativ
  • Fontvekt, som er slagets tykkelse (lett, vanlig, tung)
  • Skriftbredde, som er bredden på bokstavformene (kondensert, vanlig, utvidet)
  • x-høyde, som er forholdet mellom små og store høyder på store bokstaver (lav, vanlig, høy)
  • Kontrast er rasjonen av tynne slag til tykke slag (lav, regelmessig, høy)
  • Standard store og små bokstaver, bare deksler (alle deksler eller småhetter)
  • Tallstil (store og små bokstaver)

Og da kan det hende du må vurdere språkstøtte for å sikre det minste tegnet som er nødvendig for hvert språk du innrykker for å legge til fontundergruppen.

For denne delen av demonstrasjonen bruker jeg en kombinasjon av Google Web Font og Web Font Specimen. Ved hjelp av Google Web Fonts har jeg innsnevret søkefonten etter en Serif med en litt tynn tykkelse, en rett skrå kant og litt bredere bredde, noe som resulterte i åtte alternativer for fontfamilier som vist i figur D :

For demonstrasjonen testet jeg deretter tre av skrifttypene fra denne listen Linden Hill, Neutron og Port Lligat Slab ved å legge til lenkehenvisningskoden som vises nedenfor til testfilen for Web Font Specimen.

Og så vil vi kalle skriftstilen én etter én ved å bruke CSS-kodebiten:

 @ font-face { 
 font-family: 'Neuton', serif; 
 } 
Når jeg studerer de forskjellige fontvalgene fra biblioteket, har jeg gått foran og brukt Neuton-font i testfilen for Web Font Specimen som vist i figur E. Den viser tittelen, bylinjen og de to første avsnittene i eksemplet på artikkelteksten.

Figur E

Deretter byttet jeg ut Neutron- fonten med Linden Hill- font for å se hvordan den ble vist som vist i figur F :

Variasjonene er små, men jeg liker det andre valget av prøvene som ble testet i prøvefilen.

Neste gang

I del 2 av dette emnet vil vi fortsette med arbeidsflyten ved å begrense og velge skrifttyper; vi vil bruke en modulær skala ved hjelp av flere online verktøy for å konvertere piksler til Ems; og vi sjekker og angir standard linjehøyde. Til slutt får vi se den fullførte demonstrasjonen.

© Copyright 2021 | mobilegn.com