Pag-aaral Tungkol sa Nangungunang sa Web Design

Ang disenyo ng web ay laging hiniram ang mga punong-guro at mga kahulugan mula sa mundo ng graphic at print na disenyo. Ito ay totoo lalo na pagdating sa web typography at ang paraan kung saan nakakuha tayo ng mga sulat-sulat sa aming mga web page. Ang mga parallel na ito ay hindi laging 1 hanggang 1 na mga pagsasalin, ngunit maaari mong tiyak na makita kung saan ang isang disiplina ay nakaimpluwensya sa iba. Ito ay lalong maliwanag kapag isinasaalang-alang mo ang relasyon sa pagitan ng tradisyonal na palalimbagan na term na "nangungunang" at ang ari-arian ng CSS na kilala bilang "line-height."

Ang Layunin ng Nangungunang

Kapag ginamit ng mga tao sa manu-manong handset na metal o kahoy na mga titik upang lumikha ng palalimbagan para sa isang naka-print na pahina, manipis na mga piraso ng tingga ay inilagay sa pagitan ng mga pahalang na linya ng teksto upang lumikha ng espasyo sa pagitan ng mga linyang iyon. Kung gusto mo ng isang mas malaking puwang, nais mong magpasok ng mas malaking piraso ng lead. Ito ay kung paano ang salitang "humahantong" ay likha. Kung tiningnan mo ang terminong "nangungunang" sa isang libro tungkol sa tipograpikong disenyo at mga punong-guro, magbabasa ito ng isang bagay na may epekto - "ang distansya sa pagitan ng mga baseline ng magkakasunod na linya ng uri."

Nangungunang sa Web Design

Sa digital na disenyo, ang terminong pangunahin ay ginagamit pa rin upang sumangguni sa spacing sa pagitan ng mga linya ng teksto. Maraming mga programa ang gumagamit ng eksaktong term na ito, kahit na ang aktwal na lead ay maliwanag na hindi ginagamit sa mga programang iyon. Ito ay isang mahusay na halimbawa ng mga bagong paraan ng mga ideya sa paghiram ng disenyo mula sa mga tradisyonal na mga, kahit na ang eksaktong pagpapatupad ng prinsipyong iyon ay nagbago.

Pagdating sa web design, walang CSS property para sa "nangungunang." Sa halip, ang ari-arian ng CSS na humahawak sa visual display ng teksto ay tinatawag na line-height. Kung nais mong ang iyong teksto ay magkaroon ng karagdagang puwang sa pagitan ng mga pahalang na linya ng teksto, gagamitin mo ang property na ito. Halimbawa, sabihin mong nais mong dagdagan ang line-height para sa lahat ng mga talata sa loob ng elemento ng iyong site , magagawa mo ito tulad nito:

pangunahing p {line-height: 1.5; }

Ito ay magiging 1.5 beses sa normal na taas ng linya, batay sa default na laki ng font ng pahina (na karaniwang 16px).

Kailan Gamitin ang Line-Height

Tulad ng nakadetalye sa itaas, ang taas ng linya ay angkop upang gamitin sa espasyo ang mga linya ng teksto sa mga talata o iba pang mga bloke ng teksto. Kung mayroong masyadong maliit na espasyo sa pagitan ng mga linya, ang teksto ay maaaring maging jumbled at mahirap basahin para sa mga manonood sa iyong site. Katulad nito, kung ang mga linya ay masyadong malayo sa pahina, ang normal na daloy ng pagbabasa ay magambala at ang mga mambabasa ay magkakaroon ng problema sa iyong teksto para sa kadahilanang iyon. Ito ang dahilan kung bakit gusto mong makita ang angkop na halaga ng spacing ng line-height na gagamitin. Maaari mo ring subukan ang iyong disenyo sa aktwal na mga gumagamit upang makuha ang kanilang feedback sa pagiging madaling mabasa ng pahina .

Kapag Hindi Gamitin ang Line-Taas

Huwag malito ang line-height sa padding o mga margin na gagamitin mo upang magdagdag ng whitespace sa disenyo ng iyong pahina, kabilang ang sa ilalim ng heading o parapo. Ang spacing na iyon ay hindi humahantong, at sa gayon ito ay hindi hinahawakan ng line-height.

Kung gusto mong magdagdag ng puwang sa ilalim ng ilang mga elemento ng teksto, gagamit ka ng mga margin o padding. Bumalik sa nakaraang CSS na halimbawa na ginamit namin, maaari naming idagdag ito:

pangunahing p {line-height: 1.5; margin-bottom: 24px; }

Ito ay magkakaroon pa rin ng taas na 1.5 na linya sa pagitan ng mga linya ng teksto para sa talata ng aming pahina (ang mga nasa loob ng elemento). Ang mga parehong talata ay magkakaroon din ng 24 na pixel ng whitespace sa ilalim ng bawat isa sa kanila, na nagbibigay-daan para sa mga visual break na nagbibigay-daan sa mga mambabasa na madaling makilala ang isang talata mula sa iba at gawing mas madaling gawin ang pagbabasa ng website. Maaari mo ring gamitin ang padding na ari-arian sa lugar ng mga margin dito:

pangunahing p {line-height: 1.5; padding-bottom: 24px; }

Sa halos lahat ng mga kaso, ipapakita nito ang katulad ng nakaraang CSS.

Sabihing nais mong magdagdag ng espasyo sa ilalim ng mga listahan ng mga item na nasa loob ng isang listahan na may klase ng "services-menu", gagamit ka ng mga margin o padding upang gawin ito, HINDI taas ng linya. Kaya ito ay angkop.

.services-menu li { Gagamitin mo lamang ang line-height dito kung nais mong itakda ang spacing ng teksto sa loob ng listahan-item sa kanilang sarili, sa pag-aakala sila ay may mahahabang tumatakbo ng teksto na maaaring tumakbo sa maraming linya para sa bawat punto ng bullet.