Hva Skriften Er Vertikal Rytme Og Modulær Skala?

Alle som har vært i hørevidde av meg, har sannsynligvis hørt mine ramblings om stilguider, og en stor del av det i det siste har etablert en vertikal rytme og brukt en modulær skala. Men hva fonten snakker jeg om? I denne artikkelen skal jeg gå gjennom hvorfor du bør bry deg om vertikal rytme og modulær skala, definere dem og avslutte med en demonstrasjon på hvordan du integrerer dem i ditt neste prosjekt.

Hvorfor Skal Jeg Bry Meg?

jeg ønsket å starte med dette først fordi jeg føler at det er gunstig å forstå problemet vi prøver å løse og betydningen av både vertikal rytme og modulær skala som deler av en samlet løsning. Hele grunnen til at denne artikkelen er både vertikal rytme og modulær skala, er fordi de begge bidrar til den visuelle harmonien til en side. Vertikal rytme engasjerer og guider leseren nedover siden, god vertikal rytme gjør en layout mer balansert og vakker, og innholdet mer lesbar. Modulær skala gir resonansnumre ved hjelp av kulturelt relevante, historisk behagelige forhold og oppfordrer gjennomtenkt repetisjon. Repetisjon avler kjennskap og forsterker et mønster som hjelper brukeren med å forstå innholdet og oppsettet. Før-eksemplet nedenfor bruker nettleserens standard skriftstørrelser og linjehøyder, Mens Etter-eksemplet viser hvordan dette samme innholdet endret seg ved bruk av konseptene jeg introduserer nedenfor.

før og Etter bruk av begreper vertikal rytme og modulær skala

Vertikal Rytme

Vertikal rytme er avstanden og arrangementet av tekst når brukeren går ned på siden. Vertikal Rytme . Det er bidratt av tre faktorer; skriftstørrelse, linjehøyde og vertikale marger eller polstring. Den grunnleggende enheten for vertikal plass er linjehøyde-vanligvis linjehøyden på kroppskopien, da det vil være det dominerende innholdet på en gitt side. For å illustrere, skal jeg ta eksempler fra et nylig nettsted jeg har jobbet med. I begynnelsen av prosjektet ble vi gitt design som bruker Åpen Sans 15px skrift med en linjehøyde på 25px. Så i dette eksemplet nedenfor vil den vertikale rytmebaseenheten være 25px.

Vertikal Rytme Linje Høyde eksempel

Vertikal Rytme Linje Høyde eksempel

med vår baseenhet funnet ut, må vi nå sørge for at den opprettholdes i hele kroppskopien. Et vanlig sted å miste rytmen er i margingapene som er satt mellom blokknivåelementer. Standard nettleser behandling av avsnitt er å sette inn en topp og bunn margin på 1em og kaller det en dag. Dette er ikke ideelt hvis rytmen skal opprettholdes, i vårt eksempel nedenfor vil det bety at marginene vil være 15px i stedet for 25px vi trenger. Det er også verdt å merke seg at forskjellige skrifter har forskjellige linjehøyder innebygd i dem, noe som forårsaker visuelt inkonsekvent avstand. Så marginer og linjehøyder må tilbakestilles.

et eksempel som viser hullene fra marger mellom blokknivåelementer

et eksempel som viser hullene fra marger mellom blokknivåelementer

Dette er vanlig praksis i dag, men jeg ønsket å merke seg at det er alltid best å starte ting ut på like vilkår, vi må sørge for at alle vertikale målinger inkludert linjehøyde, padding, og marginer er tilbakestilt i en cross-browser kompatibel måte. Med dette nivået spiller feltet vil vi være i stand til å sette disse verdiene etter behov og samtidig opprettholde rytmen. Jeg Har Brukt Normalen.css, god Ol’ Reset CSS Fra Eric Meyer, og selv følgende blokk med suksess. Uansett hva du velger vil avhenge av dine prosjekter behov.

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p, blockquote,th,td { margin:0; padding:0; }

med et hvilket som helst nettsted er det bundet til å være ganske mange variasjoner i tekststørrelser for elementer som overskrifter og blokk sitater, alle disse forskjellige tekststørrelsene bør også ta opp multipler av basisenheten. Ved å fortsette vårt eksempel, vil det bety at hver avledning fra avsnittets tekststørrelse fortsatt skal ta multipler på 25px. Det er her den virkelige moroa begynner, justere linjen høyde og margin av disse elementene tilsvarende. Vi vil dykke inn i flere detaljer om dette i den siste delen om hvordan du integrerer disse konseptene i prosjektene dine.

Illustrasjon av flere variasjoner i tekststørrelse

Illustrasjon av flere variasjoner i tekststørrelse

Modulær Skala

Modulær skala er en sekvens av tall som relaterer seg til hverandre på en meningsfull måte.

«en modulær skala, som en musikalsk skala, er et avtalt sett med harmoniske proporsjoner.»

-Robert Bringhurst,

Du starter med et ratio og et tall. Som Vertikal Rytme er den beste måten å sikre effektiviteten til startnummeret ditt å bruke kroppskopien. Siden dette setter skalaen, vil vi bruke skriftstørrelsen i stedet for linjens høyde. Fortsetter med samme eksempel fra før, vi vil bruke 15px som vår base nummer. Forholdet er vanskeligere å finne, mest vanlige Er Det Gyldne Forholdet (1.618) og Perfekt Fjerde (1.333). Begge er kulturelt relevante; den førstnevnte er en favoritt i klassisk gresk og Renessansematikk, arkitektur og kunst, og også funnet i naturen; sistnevnte var populær i tidlig 20.århundre musikk. En god tommelfingerregel er å vurdere hvor mye typografisk og layout variasjon du trenger. Hvis du trenger trinn for alle seks overskriftene, vil du sannsynligvis velge et forhold som gir mer subtilitet mellom trinnene.

på nettet betyr bruk av en modulær skala å velge tall fra skalaen for typestørrelser, linjehøyder, linjelengde (bredden på en kopilinje), marger, kolonnebredde og mer.

med et forhold og tall valgt, kan du multiplisere og dele dem for å få mange resonansnumre. Nedenfor er en liste over resonansnumre vi får fra å bruke 15px-basen og «golden ratio» på 1: 1.618 for multiplikasjon/divisjon, bruker jeg super nyttig modularscale.com for å gjøre disse beregningene for meg og vise meg visuelt hva den resulterende sekvensen ser ut.

et eksempel på modulær skala brukt Med Golden Ratio

et eksempel på modulær skala brukt Med Golden Ratio fra modularscale.com

Hva dette gjorde var å ta startnummeret 15 og

  • Multipliser det med det gyldne forholdet 1.618 for å få 24.27
  • så multiplisert det med 1.618 for å få 39.269, og så videre
  • det delte også 15 med 1.618 for å få 9.271
  • deretter delt det med 1.618 for å få 5.73 og så videre

til sammenligning er nedenfor den samme 15px basen og det «perfekte fjerde» forholdet 1 til 1.333 nevnt Tidligere. Som du kan se, har dette forholdet mer subtilitet mellom trinnene i det nye settet med beregninger. Fordi forholdet er mindre, er trinnene mellom skalaen tettere sammen og mer subtile.

et eksempel på modulær skala brukt Med Det Perfekte Fjerde Forholdet

et eksempel på modulær skala påført Med Det Perfekte Fjerde Forholdet fra modularscale.com

Du har også muligheten til å definere et andre basenummer og forhold for å generere det som kalles en dobbelstrenget modulær skala. Dette kombinerer to sett med resonansnumre for å gi deg flere målealternativer som fyller hullene i den første skalaen. For det andre basenummeret har jeg sett folk bruke mindre teksttekst og større tall som bredden på en kolonne i 12-kolonnegitteret de implementerer. Så lenge det er et «viktig» nummer til oppsettet, er det ikke noe feil svar. Her er det som å legge til en andre base på 95px (størrelsen på en kolonne i en 1140px bred layout) vil se ut.

et eksempel på modulær skala brukes Med Det Gylne Snitt og to base tall

et eksempel på modulær skala brukt Med Golden Ratio og to base tall fra modularscale.com

Flott! Nå har vi mange flere alternativer å jobbe med!

Historieleksjon

en metallsortering illustrasjon
en type sak, hvor metallsorter ble lagret i små skuffer

opprinnelsen til å etablere en typografisk skala kom så mye fra praktisk behov som estetisk vurdering. Tilbake når utskrift ble gjort via boktrykk, bevegelig type ble komponert for hånd for hver side ved hjelp av støpt metall sorterer (øverst til høyre). Det var upraktisk å produsere og lagre hele tegnsett av hver skrifttype i alle mulige størrelser. Over tid slo typesetters seg på et brukbart utvalg av størrelser som fungerte harmonisk sammen.

Bonusbokstaver ble organisert og lagret i små skuffer (nederst til høyre) i et typekoffert. Store bokstaver ble tradisjonelt lagret i en egen skuff, eller sak plassert over saken holder de andre bokstavene. Dette er opprinnelsen til begrepene «store bokstaver» og » små bokstaver.»

Likheter Og Forskjeller

la Oss nå raskt gå over noen likheter Og forskjeller Mellom Vertikal Rytme Og Modulær Skala

som nevnt i begynnelsen inneholder denne artikkelen både vertikal rytme og modulær skala fordi begge er sammenhengende og bidrar til den visuelle harmonien til en side. Både vertikal rytme og modulær skala bruker oftest den primære kroppskopien for deres startbasenumre.

hvor de skiller seg mest er i sin søknad – vertikal rytme er bare opptatt av typografi hvor modulær skala gir et sett med resonansnumre som skal brukes til typografi, kolonner, linjelengder, etc. En annen viktig forskjell er hvor streng de er ment å bli fulgt. Med vertikal rytme jo mer konsekvent du følger mønsteret jo bedre blir rytmen. På den annen side er modulær skala mer et verktøy som kan improviseres etter behov. Sitatet nedenfor er i referanse til matematikk involvert Med Modulær Skala.

«Matematikk er ingen erstatning for en erfaren designer øye, men det kan gi både hint og begrensninger for beslutningstaking.»

-Tim Brown,

Integrasjon

Forhåpentligvis har jeg nå overbevist deg om at disse metodene er gunstige og verdt tiden din til å implementere fordi jeg har to biter av dårlige nyheter.

For det første er en gjennomgripende antagelse: «jeg kan koble et par tall til en generator, og alt fungerer bare!»Mens det er elektroniske verktøy som hjelper med mye matte og gjetning, vil det fortsatt være noen prøving og feiling. Hvert prosjekt er forskjellig, så en perfekt levedyktig løsning for en er ikke nødvendigvis å passe for en annen.

For Det Andre har alle materialer jeg har funnet på nettet relatert til disse emnene kommet fra design-eller design-dev-tankegangen der personen som bestemmer modulær skala og vertikal rytme, er den som til slutt har ansvaret for å ta de typografiske beslutningene. I vårt tilfelle oftere enn ikke vi er overlevert design som må konverteres Fra Skisse / PSD til web.

Men det er håp! På mine siste prosjekter har jeg lykkes med å ta det som ble levert av et designteam og kunne jobbe dem i en rytme og skala som passer til retningslinjene nevnt så langt, samtidig som jeg opprettholder integriteten til designet. Trikset er å få beregningene så nært som mulig og sette opp en eksempelside som tydelig illustrerer fordelene før du når ut til designteamet FOR AT OK skal gå videre med endringene. I min erfaring har de vært enda større type nerder enn meg og verdsatt den ekstra innsatsen som er involvert.

snakket denne artikkelen til deg? Er du svimmel med utsiktene til math-inspirert ensartethet og konsistens i design arbeid? I tillegg til komplette ende-til-ende-løsninger som nettsted-og mobiloverhalinger, har vi de beste designerne på hvert prosjekt, noe som sikrer konsistens og gjør kundenes drømmer til virkelighet. Se vårt siste bidrag til builtinchicago.com på ansette designere og våre åpne design stillinger.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.