Share
Muligens er det mest åpenbare typografiske spørsmålet i designernes hender "hvilke skrifttyper skal jeg bruke?" Det andre spørsmålet, som sjelden får den typen oppmerksomhet det burde, er "i hvilke størrelser skal jeg sette min type?" Etablering av en modulær skala er den beste måten å bestemme typografiske størrelser på, det kan faktisk bidra til å legge ut mål og proporsjoner over hele sidelayoutet ditt.
Under denne sesjonen har vi sett på hierarkiet; hvordan størrelsen og andre faktorer kan påvirke det visuelle forholdet mellom typografiske elementer. Vi har også nylig sett på vertikal rytme, visuell konsistens av avstand og elementer på en side. Da har vi spørsmålet om å sette et grunnlinje, som knytter seg til å etablere vertikal rytme. Vi har til og med snakket om å bruke ems som en måleenhet, to ganger faktisk. Alle disse aspektene av typografi er bundet sammen av den grunnleggende tilstedeværelsen av størrelse, så hvordan bestemmer du akkurat hvor stor din typografiske elementer skal være?
Begrepet Modular Scale refererer til en rekke harmoniske verdier. Å være en skala, er hver verdi en faktor av de andre, og det kan se slik ut:
Ved å bruke denne skalaen til noen grunnleggende typografiske CSS kan vi få:
h1 font size: 36px h2 font-size: 24px h3 fontstørrelse: 18px h4 fontstørrelse: 14px p font-size: 11px liten font-size: 9px
Du kan kanskje gjenkjenne disse verdiene som en del av den klassiske modulskalaen, illustrert av Robert Bringhust i The Elements of Typographic Style.
En modulær skala, som en musikalsk skala, er et prearranged sett med harmoniske proporsjoner.
Robert Bringhurst
Ved å følge denne skalaen og sette dine forskjellige typografiske biter og biter til de viste verdiene, vil de ta en iboende skjønnhet; proporsjoner som har jobbet for typografiske designere i århundrer.
Det er riktig, århundrer.
Faktisk kom opprinnelsen til å etablere en typografisk skala like mye fra et praktisk behov som en estetisk vurdering. I de heady dager med støping av metallstøperi, da hver bokstavform ble kastet som en metallblokk (kalt en slags) var det upraktisk, for dyrt å produsere og lagre hele tegnsett av hver skrifttype, i alle de forskjellige vekter, i alle mulige størrelser.
Typesettere slo seg derfor over tid i et brukbart utvalg av størrelser som fungerte harmonisk sammen.
La oss sette opp en enkel skala, for bruk i våre egne prosjekter.
Vi må starte et sted, så vi begynner med et betydelig basenummer; vår font skriftstørrelse. Jeg er vant til å starte på hva nettleseren dikterer som standard, så vi bruker 16px som base. Tim Brown anbefaler at du starter med skrifttypestørrelsen som skrivetypen din er mest sprø på. Oftere enn ikke, det vil være 16px for skrifter designet med nettet i tankene.
Beklager, det var det eneste sitatet jeg kunne tenke på å inneholde forhold.)
Så nå må vi etablere et forhold, en verdi som vi eksponensielt vil multiplisere og dele vår grunnverdi. Dette forholdet kan være hva du vil, hvis du har noen skala som har bestemt skjønnhet i øynene dine, er det greit.
Du kan for eksempel gå for den gyldne delen 1: 1.61803398875. Dette forholdet har sine røtter i selve stoffet i verden rundt oss, og har blitt brukt av designere og arkitekter til å strukturere estetisk harmoni siden ... for alltid.
For å illustrere hva som skjer lett, skal vi bruke 1: 2 (den musikalske blant dere, som ikke er meg forresten, vil gjenkjenne dette som en oktav). Fra og med 16, får vi følgende:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Og dette kan fortsette eksponentielt. For å etablere skalaen nedover deler vi:
16/2 = 8 8/2 = 4 4/2 = 2
Dette gir oss begynnelsen på skalaen vår:
som vi kan søke på vår enkle typografiske CSS slik:
h1 fontstørrelse: 256px h2 font-size: 128px h3 fontstørrelse: 64px h4 fontstørrelse: 32px p fontstørrelse: 16px liten fontstørrelse: 8px
Flott arbeid så langt!
Denne skalaen er ganske ekstrem. Det fungerer, men for målinger på en nettside er det ganske uforgivende. For å gi oss mer fleksibilitet, la oss gi oss flere alternativer ved å legge til en andre dimensjon i skalaen, en prosess skissert av Tim Brown i sin A List Apart-artikkel Mer Betydende Typografi.
Velg et annet nummer. Et hvilket som helst nummer, så lenge det har noen betydning for designen din. Vi har allerede brukt 16 fordi det er vår grunnleggende skriftstørrelse, så la oss komplimentere at ved å legge til 95, vil bredden på en enkelt kolonne jeg bruke i dette fiktive 1.140px breddeoppsettet.
Tips: Det kan være mange aspekter av ditt design som har betydning; målinger og dimensjoner som resonerer gjennom hele oppsettet. Eksperimenter med verdiene du velger, kan du bli overrasket over hvilke proporsjoner føle Ikke sant.Ved å bruke forholdet 1: 2 til 95 får vi følgende skala:
11,875 / 2 = 5,938 23,75 / 2 = 11,875 47,5 / 2 = 23,75 95/2 = 47,5 95 * 1 = 95 95 * 2 = 190 190 * 2 = 380 380 * 2 = 760
Så nå har vi to skalaer, begge basert på samme forhold, som derfor sameksisterer ganske pent:
Faktisk kan vi kombinere dem, for å gi oss en skala slik:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Dette fyller hullene for oss, og gjør skalaen vår langt mer komplett.
Vi har allerede nevnt hvordan vi kan bruke skalaen vår til grunnleggende typografiske elementer, så la oss oppdatere det.
h1 fontstørrelse: 64px h2 font-size: 47.5px h3 fontstørrelse: 32px h4 fontstørrelse: 23.75px p fontstørrelse: 16px liten fontstørrelse: 8px
Der går vi, ikke helt så intense. Våre skalaer kan også låne seg til andre typografiske funksjoner, for eksempel linjehøyde og dermed hele grunnlinjen:
p skriftstørrelse: 16px; linjehøyde: 23.75px; margin: 0 0 16px 0;
Og vi kan kan forbedre dette alt ved å bruke ems også, slik at forholdene og proporsjonene blir mer nøyaktige:
kropp font-size: 100%; p font-size: 1em; linjehøyde: 1.484; margin: 0 0 1em 0;
Hvis du sliter med beregningene på dette punktet, går du over til Tim Browns Modular Scale. Kalkulatoren vil automatisk koble ut piksel- og em-verdiene for deg.
For referanse, her er hva vår skala ser ut som ems (med andre ord, i forhold til basestørrelsen):
64 47,5 32 23.75 16 11.875 8 5.938 4 2.969 2 1.484 1 0.742 0.5 0.371 0.25 0.186 0.125 0.093
Etter å ha taklet de grunnleggende elementene på siden vår, la oss gjøre oppmerksom på noen struktur. En enkel stabel med tolv kolonner er lett lagt ut:
.kolonne 1 bredde: 95px; * .column-2 width: 190px; * .column-3 width: 285px; .column-4 width: 380px; * .column-5 width: 475px; .column-6 width: 570px; .column-7 width: 665px; . kolonne-8 bredde: 760px; * .column-9 width: 855px; .column-10 width: 950px; .column-11 width: 1045px; .column-12 width: 1140px; / * i et fluidnett, vil disse konverteres til% verdier * /
Du vil gjenkjenne verdiene med en stjerne ved siden av dem som i vår modulære skala.
Hver kolonne må flyte også, pluss, for å danne takrenner, kan vi legge til noe polstring til hver av 1em (16px, som også inneholder i vår skala.)
/ * Bruk en naturlig boksoppsettmodell til alle elementene * / *, *: før, *: etter -moz-boks-størrelse: border-box; -webkit-boks-størrelse: border-box; boks-størrelse: border-box; .column float: left; polstring: 0 1em;
Svært raskt har vi lagt grunnlaget for et solidt rutenett, pluss typografi, alt basert på en harmonisk skala.
Kombinere grids med typografi kan være en komplisert virksomhet; Beregning av harmoni kan virke veldig uintensiv til tider! Når du har begynt med noen grunnleggende grunninger, finner du at du ikke kan opprette en nettside uten noen form for betydning for forholdene på sidene dine.
Det vi har gjort så langt er en god start, men det er fortsatt mye mer å gjøre og masse finjustering. Grunnlinjen, for eksempel, kan være litt vanskelig å bygge fra dette punktet, slik at du kanskje finner noen av de opprinnelige verdiene ikke fungerer. I tillegg vil vi trolig at vårt nett skal være fleksibelt, slik at kolonnene ikke vil beholde de faste verdiene vi opprinnelig brukte. Av denne grunn kan du finne at våre horisontale verdier ikke alltid fungerer med våre vertikale målinger.
Det er etablert skalaer og rister, testet og testet gjennom tidene. Hvorfor ikke prøve å bruke noen av dem til ditt eget arbeid? Har du noen gang brukt en bevisst modulær skala til arbeidet ditt? Hvis ikke, hvordan bestemmer du for din typografiske størrelsesorden? Er det noen spesifikke problemer du møter med skalaer? La oss høre dine tanker i kommentarene!
Accentsconagua