Mittaustyyppi Lucas-sekvensseillä
Tekstin ja muun sivun välinen suhde on yksi suunnittelun tärkeimmistä ominaisuuksista.
Rytmi, korostus ja sävy ovat vaarassa ilman oikeaa skaalatyyppiä. Tekstin koon valitseminen on kuitenkin usein sekä huolellista että turhauttavaa kokemusta, eikä standardoitua lähtökohtaa ole tiedoksi.
Tästä seuraa usein, että web-suunnittelijat palaavat takaisin sovellusten - 8pt, 10pt, 12pt, 14pt, 18pt - oletusasetuksiin, koska heillä ei ole parempaa ratkaisua.
Tämä parempi ratkaisu on asettaa tyyppikokoja ei yksittäisen himo, vaan ennalta määrätyn järjestelmän mukaan; järjestelmä, joka on helppokäyttöinen, käytännöllinen toteuttaa verkossa ja mikä tärkeintä, riittävän joustava, jotta suunnittelijat voivat tarjota täydellisen ilmaisun. Cue: Lucas-sekvenssi.
Lucas-sekvenssit
Fibonacci-sekvenssi - joka on ensimmäisen kerran tallennettu 1200-luvulla lännessä Leonardo Fibonacci -ohjelmassa - on seuraava joukko kokonaislukuja (kokonaislukuja):
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987 ... ad infinitum
Järjestäjä nimetti Fibonacciille tunnetun 1800-luvun ranskalainen matemaatikko François Édouard Lucas, joka tuotti samanlaisen sekvenssin omasta, jota hän kutsui Lucas Numbersiksi:
2, 1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843 ... ad infinitum
Fibonacci-sekvenssi ja Lucas-numerot ovat molemmat spesifisiä variaatioita geneerisestä Lucas-sekvenssistä.
Lucas-sekvenssit ja kokonaislukujaksot ovat yleensä olleet opiskelijan elinikäisen tutkimuksen kohteena lukuisille suoritettu matemaatikoille, joten aiomme tiivistää käsitteen seuraavasti:
- Jokaisessa sekvenssissä annettu määrä on kahden edellisen luvun summa, kuten tässä kaavassa on kuvattu: n = n-1 + n-2
- Sarjan ensimmäiset kaksi numeroa - jotka tunnetaan nimellä siemenluvut - valitaan mielivaltaisesti.
Miksi käyttää Lucas-järjestystä tyypin asettamiseksi?
Lucas-sekvenssit, erityisesti Fibonacci-sekvenssin muodossa, ovat läheisessä suhteessa kultaiseen suhdelukuun, jota toistetaan koko luonnossa kuorineen, hämähäkin verkkoina, pilvien muodostelmina ja lukuisissa muissa luonnon ihmeissä. On vahvaa näyttöä siitä, että mikä tahansa visuaalisesti houkutteleva asia johtuu tämän muodon suhteesta kultaiseen suhdelukuun.
Vielä tärkeämpää on, että Lucas-sekvenssit tarjoavat skaalautuvan kehyksen tyypin asettamiselle, joka on sekä graceful että rytminen.
Ensimmäisen siementen numeron määrittäminen
Verkkosivustolla on paljon keskustelua oikeasta tekstin koosta. 12px on edelleen yleisin, mutta ei ole epätavallista nähdä mitään 10px: stä 16px: ään. Tämä johtuu olennaisesti puutteellisesta ymmärtämisestä siitä, mitä kirjasinmittauksia todella tarkoita. Outoa, niille, jotka olemme tottuneet standardointiin - tai ainakin standardoinnin pyrkimyksiin - ei ole standardimuotoa tyyppisuunnittelussa; kaksi eri tyyppisuunnittelua, jotka piirtävät täsmälleen samanlaisen suunnittelun fonttiohjelmistoon, todennäköisesti piirrä sen eri kokoisiin. Eri tyyppikuvioiden välinen vaihtelu on yllättävää, aivan liian yleinen.
Vastaus, mistä aloittaa, on ärsyttävän yksinkertainen; oletustekstikoko on 1em, joten ensimmäinen siemenmäärä on 1.
On olemassa useita keskeisiä etuja 1em: n käyttöön lähtökohtana: suhteellisen mittayksikönä EM sopii hyvin herkälle suunnittelulle; ems ja ems-kerrannaispalojen avulla voimme muuttaa koko järjestelmämme muuttamalla peruskirjan fontin kokoa; lopulta se on siisti käsitteellinen sovitus Lucas-sekvenssimme kanssa ja palvelee muistuttamaan meille täsmällistä kokonaislukujärjestystä, jos tarvitsemme myöhemmin uudelleen.
Ei ole mitään luonnollista vikaa prosenttiosuuksien käyttämisestä emsin sijasta tai jopa pikseleistä tai pisteistä, mutta em on enemmän kuin todennäköinen web-suunnittelun tulevaisuus, joten voimme myös tottua siihen.
Toisen siementen numeron määrittäminen
Meillä on lukuisia strategioita, joiden avulla määritämme toisen siementen numeron. Jotkut suunnittelijat ovat erityisen suosittuja ja valitsisivat 1.2em tai vastaavan. Muut suunnittelijat, jotka nauttivat kultaisen suhteen mystiikasta, saattavat haluta käyttää 1.618em.
Käytännöllisemmäksi ratkaisuksi on määritellä toinen siementen numero runkotekstin viivan korkeudella. Kuitenkin siksi, että linjan korkeus sanelee yleensä rivin pituus ja rivin pituus määritetään ruudukolla, se soveltuu paremmin tulostamiseen tai ei-reagoivaan web-suunnitteluun. Koska etsimme tulevaisuutta ja tulevaisuus on reagoiva, se ei toimi meille.
Mitä meillä on jäljellä, osittain eliminoinnilla ja osittain sopivuuden vuoksi, on tyypin x-korkeus. Tai tarkemmin sanottuna x-korkeuden suhde muuhun glyftiin.
Yksi hyvän suunnittelun ominaisuuksista on avainelementtien toistaminen, ja tyypin mittasuhteet koko sivulle ovat erinomainen tilaisuus sekä tunnustamaan tyyppisuunnittelijan työtä että täyttämään muotoilumme jotain kirjasimen luonteesta.
X -korkeuden löytäminen
Jos haluat löytää fontin x-korkeuden, meidän täytyy avata jotain Photoshop tai Illustrator ja lisätä tekstiä, joka sisältää ascender (esim. 'D') ja kirjain 'x'. Jos käytät bittikarttamuunninta, kuten Photoshopia, määritä teksti mahdollisimman suureksi, jotta saat tarkan tuloksen. Näissä esimerkeissä olen asettanut fontin 500pt: lle sen mittaamiseksi.
Seuraavaksi mitataan korkeus nousuputkesta perusviivaan ja korkeus x: n yläosasta lähtötilaan.
Tietenkin, jos sinulla on onni, että sinulla on mahdollisuus käyttää hyvää kirjasimen suunnitteluohjelmistoa, voit yksinkertaisesti avata fonttitiedoston, jota käytät ja lue x-korkeus ja nousukorkeus.
Jaa X-korkeus nousukorkeudella ja etsi x-korkeus prosentteina koko:
x-korkeus / nousukorkeus * 100 = toinen siementen numero
Jos esimerkissä on fontti (joka on Museo Slab), tulos on:
253/353 = 0,71671388
tai 0.716em
Miksi emme mittaa ylösnousun yläosasta laskeutumisen pohjalle? Koska hahmoilla ei ole taipumusta olla sekä ascender että descender (satunnaista poikkeusta lukuun ottamatta kirjain f), ja näin ollen muotoilun muodostavien muodoissa olevien suhteiden perustana on x-korkeuden ja yhden pidemmän varren välinen suhde. Sen sijaan on mahdollista mitata laskeutujia, mutta koska kapukorkeus (pääkaupunkien korkeus) on yleensä hyvin lähellä nousua, joka on minun mieltymykseni. Jos löydät itsesi käyttämällä kirjasintyyppiä, jolla on enemmän hallitseva laatu - esimerkiksi vastakkaisten päiden paksuudet - saatat haluta käyttää tätä arvoa ylösnousemuksen sijasta x-korkeussuhteeseen.
Se, miten pääset toisen siementenumerosi määrittämiseen, on yksi tärkeimmistä suunnittelupäätöksistä, joita sinun on tehtävä, mutta se ei ole mitään kummallista; valitse numero hattulta, jos haluat, ja siirry eteenpäin, hyvää tavaraa ei vielä ole.
On syytä huomata, että jos vaihdat yhtälön ympärille ja jaat pystysuoran korkeuden x-korkeudella, pääset lukemaan suuremman määrän kuin yksi. Tällöin sekvenssisi on jyrkempi ja hieman dramaattisempi.
Sarjan luominen
Joten meillä on kaksi siemenmäärää: 1em ja 0.716em ja meillä on kaava n = n-1 + n-2:
1 + 0,716 = 1,716
0,716 + 1,716 = 2,432
1,716 + 2,432 = 4,148
jne.
Mikä johtaa seuraaviin järjestyksiin:
1, 0,716, 1,716, 2,432, 4,148, 6,58, 10,728, 17,308, 28,036 ... ad infinitum
Suunnittelupiste
Toistaiseksi olemme poimineet tietäsi perus-, mutta hyödyllisen matematiikan kautta, ja olemme saavuttaneet sekvenssin, joka antaa meille erilaisia kokoja 1em-28.036em ja tarvittaessa.
Nyt voimme käyttää näitä arvoja tyyppikokojamme peräkkäin, jotta luodaan hyvin suhteutettu tyyppisuunnitelma:
Huomaat, että aloitamme p: n asetuksella 0.716 ja h4 asetetaan arvoon 1 huolimatta siitä, että tämä ei ole peräkkäin oikein. Syy on, että hierarkian h4 osalta on tärkeämpää kuin p. Lucas-sekvenssimme ei saa määrätä hierarkiaa sivulta, vaan se määrää eri elementtien skaalaussuhteet. Vain sisältösi voi määrittää hierarkian .
Koska me emme ole vain peräkkäisiä arvoja sekvenssissä ja pystyvät valitsemaan ja valitsemaan käytettävät kokonaislukut, saavutamme aina rytmin ja rakenteen samalla sekvenssillä. Vaikka käytämme hyvin dramaattista lähestymistapaa:
Täsmälleen sama Lucas-sekvenssiä voidaan käyttää myös varattua, liiketoiminnan kaltaista järjestelmää varten:
Järjestelmän ydin on, että mittakaavan suhteet säilyvät, hierarkia on oikeassa suhteessa, mutta suunnittelijalle on tarjolla valtava määrä erilaisia lajikkeita. Tässä sinun täytyy ansaita rahaa: valitsemalla asteikot asteikolla hierarkian ja painotuksen luomiseksi.
Joustavuus
Usein kirjasinlaji sanelee enemmän kuin painotus: saavutettavuusongelmat syntyvät, jos puhumme yleisöltä, jolla on visuaalisia vaikeuksia; pelkkä sisällön määrä saattaa heikentää rajoituksia; Meidän täytyy ehkä olla joustavia - kirjaimellisesti - suunniteltaessa nestesuunnittelua.
Onneksi CSS käsittelee tätä tilannetta helposti. Koska käytämme ems-kokoomme, voimme määrittää tyypillämme käyttämällä Lucas-sekvenssiä ja sitten kokoa koko, asettamalla oletuskoon koko kehon tagille säilyttämällä suunnittelumme rytmikseen, mutta lisäämällä tai vähentämällä todellista arvoa.
Huomaa tässä kuvassa, että p-, h2- ja h1-koot pysyvät samoina, kaikki piirretään sarjastamme. Se on muunnelma kehyskoodin fonttikokoon (0.8em vasemmalla ja 1.4em oikealla), joka kasaantuu alas ja tuottaa radikaalisti erilaisia tuloksia.
vihdoin
Koska tämä järjestelmä on riippuvainen taustalla olevasta matematiikasta, on tärkeää tunnustaa, ettei muotoa voida vähentää joukoksi yhtälöitä. Tämä koonmääritysmenetelmä antaa sinulle rakenteen, jolla voit työskennellä, ja auttaa sinua luomaan hyvin suhteutettuja tyyppisiä järjestelmiä, mutta se on sinulle suunnittelija käyttää järjestelmää työkaluna eikä puristuksena.
Musiikin muistiinpanoja ja asteikkoja, jopa Jazzia, voidaan vähentää joukko yhtälöitä, jotka kuvaavat heidän suhteensa, mutta John Coltranen kaltainen joku saattaa tuoda nämä suhteet elämään.