RWD-painopiste: Responsiivinen typografia, osa 2

Ensimmäinen reagoivaan typografiaan liittyvä segmenttini kattoi reagoivan työnkulun ja prototyyppimenetelmän avulla sisällön ja tekstin käytön alkuperäisenä oppaana reagoivan verkkosivustosuunnittelun kehittämisessä. Tässä toisessa ja viimeisessä kappaleessa tarkastelen lopullista kaventamista ja kirjasintyyppien valintaa, soveltaen modulaarista asteikkoa käyttämällä useita online-työkaluja pikselien muuntamiseksi Emsiksi, ja lopuksi tarkistamme ja asetamme oletusviivakorkeuden lopputuloksen saavuttamiseksi. mielenosoituksen näkymä.

Valitse kirjasintyypit

Kun olet testannut useita fonttilajityyppejä ja niihin liittyviä fonttipinoja, kun olet katsellut niitä verkkosivustosi mallisisällön kanssa, voit kaventaa tavallisten tunnisteiden ja elementtien, kuten otsikoiden, standardiprototyypin kenttää.

...

ja kappaleet

. Ominaisuudet, joita haluat etsiä, sisältävät kirjasintyylin, muodon, luettavuuden ja käyttötarkoituksen. Haluat myös varmistaa, että kirjasintyyppi näyttää hyvältä useissa laitteissa, käyttöjärjestelmissä ja selainyhdistelmissä.

Valitse modulaarinen asteikko

Modulaarinen asteikko, sellaisena kuin Tim Brown on sen määrittänyt kirjasimille, on samanlainen kuin matemaattinen kultainen suhde. Tämä suhde (löytyy myös taiteesta ja suunnittelusta) on yhtä suuri kuin 1, 61803398875 tai esitetään suhteena 1: 1, 61803398875, jolloin määrien summa suurempaan määrään on yhtä suuri kuin suuremman määrän suhde pienempään. Tämä muistuttaa myös täydellistä neljättä, joka asettaa soittojen väliset välit, jotka on ryhmitelty harmoniseen sarjaan. Käyttämällä Timin modulaarista asteikkoa voimme saada oman kirjasintasteikomme, ja tämän avulla voimme sitten muodostaa täydellisemmän sopivuuden sisältöömme. Esittelyssä valitsen 16 pikselin ideaalisen tekstin koon, jonka merkitys on 1 pikseli, ja valitsen sitten kultaisen suhteen, kuten alla olevassa kuvassa B esitetään. Kaikkiaan seitsemäntoista suhdetta, joista valita, ovat 1: 4 Tuplaoktaavi, 1: 3 Major kahdestoista, 1: 2 Major Oktaavi, 3: 4 Täydellinen Neljäs ja 15:16 Minor Second.

Kuvio B

Kun "Lähetä" -painiketta on napsautettu, tuloksena oleva tulos näkyy valitulle modulaariselle asteikolle, tässä tapauksessa 16px @ 1: 1, 618 ja 1px @ 1: 1, 618 tuloksena oleville pikselille, Ems, Ems @ 16 ja% 13: sta. kuten alla olevassa kuvassa C esitetään.

Kuvio C

Taulukko tuottaa pikselivalikoimaan vaihtoehtoja, joiden avulla voit muuntaa ne helposti Ems: ksi. Ems ovat fonttikokojen hyväksytty standardi, koska ne reagoivat näytön koon ja näytön muuttujiin, kun taas pikseli on enemmän kiinteää kokoa ja ei skaalaa hyvin. Toinen online-työkalu on Px-Em-muunnin, jonka avulla voit asettaa peruspikselin koon (tässä tapauksessa asenin siihen 16px) ja sitten px- tai em-muunnoksen (36px). Napsauttamalla "Muunna" -painiketta saadaan tulos, tässä tapauksessa 2.250em, kuten kuvassa D. Työkalun avulla voit myös napata joukon CSS-tiedostoja, jotka on rakennettu Em-muunnoksistasi normalisoinnin.css perusteella.

Kuvio D

Alla oleva CSS-koodinpätkä näyttää useita muunnettuja tyylejä:

 vartalo { 
 marginaali: 0 0 4.500em; 
 kirjasinkoko: 1em; 
 linjan korkeus: 1.125em; 
 taustaväri: # eeeee2; 
 väri: # 333; 
 } 
 .container_16 { 
 taustaväri: #fff; 
 padding-bottom: 2.250em; 
 } 
 #header { 
 padding-top: 0.750em; 
 reunan yläosa: 1em # ddddd2 kiinteä; 
 } 
 #alatunniste { 
 padding-bottom: 2.250em; 
 reunan yläosa: 105em # ddddd2 kiinteä; 
 fontti: 0.813em / 1.313em 'Linden Hill', serif; 
 väri: # 888882; 
 } 
 #jalkaväli { 
 marginaali: 0; 
 } 

Tarkista viivan korkeus ja välilyönti

Rivin korkeus on viimeinen huomio, ja se on kappaleessa olevan tekstirivien lähtöviivojen välinen pystysuora etäisyys. Rivikorkeuden lisäämä visuaalinen vetovoima voi tehdä ero helposti luettavan tekstin ja silmiä rasittavan tekstin välillä. Kuten yllä olevasta CSS-koodinpätkästä näet rungon tyylin, viivan korkeudeksi on asetettu 1, 125em, mikä vastaa 18 pikseliä asetettaessa 16 pikselin kannan sisään. Lopullinen näyte näkyy kuvassa E :

Kun käytät tässä artikkelissa esiteltyjä typografian työnkulkuja ja vaiheita ohjeena, voit saada verkkosivustosi lähemmäksi reagoivan typografiakokemuksen tarjoamista käyttäjillesi millä tahansa laitteella.

© Copyright 2020 | mobilegn.com