Dimensionstype med Lucas sekvenser
Forholdet mellem tekst og resten af en side er et af de vigtigste egenskaber ved ethvert design.
Rytme, vægt og tone er alle kompromitteret uden korrekt skaleret type. Men valg af tekststørrelser er ofte både en omhyggelig og frustrerende oplevelse, uden et standardiseret udgangspunkt for at informere os.
Som følge heraf finder vi ofte webdesignere, der falder tilbage på standardindstillingerne, der præsenteres af applikationer - 8pt, 10pt, 12pt, 14pt, 18pt - for en bedre løsning.
Den bedre løsning er at indstille typestørrelser ikke ved individuelle indfald, men ifølge et forudbestemt system; et system, der er let at bruge, praktisk at implementere på internettet og vigtigst af alt, fleksibelt nok til at give designere et komplet udtryk for udtryk. Cue: Lucas sekvensen.
Lucas sekvenser
Fibonacci Sequence - først optaget i Vesten i det 13. århundrede af Leonardo Fibonacci - er følgende sæt af heltal (hele tal):
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987 ... ad infinitum
Sekvensen blev opkaldt til Fibonacci ved den fremtrædende fransk matematiker François Édouard Lucas, der fremkom en lignende sekvens af hans egen, som han omtalte som Lucas Numbers:
2, 1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843 ... ad infinitum
Fibonacci Sequence og Lucas Numbers er begge specifikke variationer af den generiske Lucas Sequence.
Lucas sekvenser og heltal sekvenser generelt har været genstand for en levetid for undersøgelse for talrige veluddannede matematikere, så vi vil opsummere begrebet som følger:
- Ethvert givet nummer i sekvensen er summen af de to foregående tal som beskrevet i denne formel: n = n-1 + n-2
- De første to tal i sekvensen - kendt som frønumre - vælges vilkårligt.
Hvorfor bruge en Lucas sekvens til at indstille type?
Lucas-sekvenser, især i form af Fibonacci-sekvensen, har et nært forhold til den gyldne ratio, som gentages gennem naturen i skaller, edderkoppens webs, skyformationer og mange andre naturlige vidundere. Der er stærke beviser for, at alt, hvad vi finder synligt tiltalende, skyldes formens forhold til det gyldne forhold.
Endnu vigtigere, giver Lucas Sequences os en skalerbar ramme for indstilling af type, der er både yndefuld og rytmisk.
Bestemmelse af vores første frø nummer
Der er meget debat om den korrekte tekststørrelse for et websted. 12px er stadig den mest almindelige, men det er ikke usædvanligt at se alt fra 10px til 16px. Dette er væsentligt født på grund af manglende forståelse for, hvilke skrifttype målinger faktisk betyder. Mærkeligt, for os, der er vant til standardisering - eller i det mindste ambitioner om standardisering - er der ingen standardforanstaltning i type design; to forskellige type designere, der tegner nøjagtig det samme design i skrifttypeproduktionssoftware, vil sandsynligvis tegne det i forskellige størrelser. Variationen mellem forskellige skrifttyper er ikke overraskende alt for almindelig.
Svaret på hvor man skal begynde er infuriatingly simple; Vores standard tekststørrelse vil være 1em, hvilket betyder at vores første frø nummer vil være 1.
Der er en række vigtige fordele ved at bruge 1em som vores udgangspunkt: Som en relativ måleenhed er et em godt egnet til lydhørt design; ved at bruge ems og multipler af ems kan vi ændre størrelsen på vores hele ordningen ved at ændre basis skrifttypestørrelsen; Endelig er det en pæn konceptuel pasform med vores Lucas-sekvens og vil tjene til at minde os om den præcise heltalssekvens, hvis vi skal genoptage designet senere.
Der er intet iboende forkert ved at bruge procentsatser i stedet for ems eller endda pixels eller point, men em er mere end sandsynligt fremtiden for webdesign, så vi kan lige så godt vænne os til det.
Bestemmelse af vores andet frø nummer
Der er talrige strategier åbne for os til at bestemme vores andet frø nummer. Nogle designere har en bestemt præference og vil vælge 1.2em eller lignende. Andre designere, der nyder mystikken i den gyldne ratio, kan godt lide at bruge 1.618em.
En mere praktisk løsning er at bestemme det andet frø nummer ved hjælp af linjens højde af kroppens tekst. Men fordi linjens højde sædvanligvis dikteres af længden af linjen og linjelængden bestemmes af et net, er det mere egnet til at udskrive eller ikke-lydhurtigt webdesign. Fordi vi ser frem til fremtiden, og fremtiden er lydhør, fungerer den ikke for os.
Hvad vi er tilbage med, dels ved en elimineringsproces og dels på grund af dets hensigtsmæssighed, er typens x-højde. Eller mere specifikt forholdet mellem x-højden og resten af glyphen.
Et kendetegn ved godt design er gentagelsen af nøgleelementer, og at bære proportionerne af typen igennem til siden som helhed er en fantastisk mulighed for begge at anerkende typedesigners arbejde og indføre vores design med nogle af skrifttypens karakter.
Find vores x-højde
For at finde skrifttypens x-højde skal vi åbne noget som Photoshop eller Illustrator og tilføje nogle tekst, der indeholder en stigende (f.eks. D) og bogstavet 'x'. Hvis du bruger en bitmap editor som Photoshop, skal du sætte teksten så stor som muligt for at sikre, at du får et præcist resultat. I disse eksempler har jeg sat fonten til 500pt for at måle den.
Mål derefter højden fra stigningslinjen til basislinjen og højden fra toppen af x til basislinjen.
Selvfølgelig, hvis du er heldig nok til at få adgang til god skrifttypedesign, kan du bare åbne fontfilen, du vil bruge og aflæse x-højden og stigningshøjden.
Del nu x-højden af stigningshøjden for at finde x-højden som en procentdel af hele:
x-højde / stigende højde * 100 = andet frø nummer
I tilfælde af skrifttypen i eksemplet (som er Museo Slab) er resultatet:
253/353 = 0,71671388
eller 0,716em
Hvorfor måler vi ikke fra toppen af opstigeren til bunden af nedstigningen? Fordi tegn ikke har tendens til at have både en stigende og en descender (en lejlighedsvis undtagelse er bogstavet 'f') og følgelig er forholdene inden for de former, der består af skrifttypens design baseret på forholdet mellem x-højden og en længere stamme. Det er muligt at måle descenderen i stedet, men da karmhøjden (hovedstadenes højde) normalt er meget tæt på opstigeren, er det min præference. Hvis du finder dig selv ved at bruge et skrifttype med en mere dominerende kvalitet - kontrasten i tykkelsen af forskellige streger for eksempel - vil du måske bruge den værdi i stedet for stigeren til x-højdeforholdet.
Fastlæggelsen af, hvordan man ankommer til dit andet frø nummer er et af de centrale design beslutninger, du skal gøre, men det er ikke noget at agonize over; Vælg et nummer ud af en hat, hvis du foretrækker det, og fortsæt, de gode ting er endnu ikke kommet.
Det er værd at bemærke, at hvis du skifter ligningen rundt og deler opstigningshøjden med x-højden, vil du ende med et tal større end en. I så fald bliver din rækkefølge stejlere og lidt mere dramatisk.
Oprettelse af vores sekvens
Så har vi vores to frø numre: 1em og 0.716em, og vi har formlen n = n-1 + n-2:
1 + 0,716 = 1,716
0,716 + 1,716 = 2,432
1.716 + 2.432 = 4.148
etc.
Hvilket resulterer i følgende rækkefølge:
1, 0,716, 1,716, 2,432, 4,148, 6,58, 10,728, 17,308, 28,036 ... ad infinitum
Design bit
Hidtil har vi valgt vores vej gennem nogle grundlæggende, men nyttige matematik, og vi har ankommet til en sekvens, der giver os en række størrelser fra 1em til 28.036em og videre hvis det er nødvendigt.
Vi kan nu bruge disse værdier som vores typestørrelser i rækkefølge for at oprette en velproportioneret typeordning:
Du vil bemærke, at vi starter med p sat til 0.716 og h4 sat til 1, på trods af at det ikke er sekventielt korrekt. Årsagen er, at med hensyn til hierarki er h4 vigtigere end p. Vores Lucas sekvens må ikke diktere hierarki på siden, det dikterer skalaforholdene mellem forskellige elementer. Kun dit indhold kan diktere hierarkiet .
Fordi vi ikke er begrænset til sammenhængende værdier i vores rækkefølge og kan vælge og vælge hvilke heltal vi bruger, opnår vi altid rytme og struktur med samme rækkefølge. Selvom vi tager en meget dramatisk tilgang:
Præcis den samme Lucas-sekvens kan også bruges til at oprette en mere reserveret, forretningsmæssig ordning:
Kernen i dette system er, at stordriftsforholdene opretholdes, hierarkiet er proportionerligt, men der er en stor mængde af sort til rådighed for designeren. Her skal du tjene dine penge: ved at vælge størrelserne på skalaen for at skabe hierarki og vægt.
Fleksibilitet
Typisk er typestørrelse dikteret af mere end vægt: Tilgængelighedsproblemer opstår, hvis vi taler om et publikum med visuelle vanskeligheder; det store indhold af indhold kan kaste op begrænsninger; vi må muligvis være fleksible - bogstaveligt talt - når vi designer et fluid layout.
Heldigvis håndterer CSS denne situation med lethed. Fordi vi bruger ems til vores størrelser, kan vi indstille vores type ved hjælp af vores Lucas Sequence og derefter skala hele ved at indstille en standardstørrelse på kropstaggen, idet vi beholder rytmen i vores design, men øger eller formindsker de faktiske værdier.
Bemærk i dette billede, at p, h2 og h1 størrelserne forbliver de samme, alle trukket fra vores rækkefølge. Det er variationen på skrifttypestørrelsen af kropstegnet (0.8em til venstre og 1.4em til højre), der kaskader ned, hvilket skaber radikalt forskellige resultater.
Endelig
Som afhængig af underliggende matematik som dette system er, er det vigtigt at erkende, at design ikke kan reduceres til et sæt af ligninger. Denne metode til dimensioneringstype giver dig en struktur, som du kan arbejde med, og vil hjælpe dig med at skabe velproportionerede type ordninger, men det er som designer at bruge systemet som et værktøj, ikke som en krykke.
Noterne og skalaerne i musik, endda Jazz, kan reduceres til et sæt af ligninger, der beskriver deres forhold, men det kræver en person som John Coltrane at bringe disse relationer til liv.