Learning About Leading in Web Design

Desain web tansah meminjam prinsipal lan dhéfinisi saka dunia desain grafis lan cetak. Iki pancene bener nalika nerangake typography web lan cara kita njaluk letterforms ing kaca web kita. Paralel iki ora tansah 1 nganti 1 terjemahan, nanging sampeyan bisa uga weruh yen siji disiplin wis nyebabake pangaruh liyane. Iki luwih rinci nalika sampeyan nimbang hubungan antarane istilah tipografi tradisional "leading" lan sifat CSS dikenal minangka "baris-dhuwur."

Tujuane Pamimpin

Nalika wong digunakake kanthi handset logam utawa kayu ukiran kanthi manual kanggo nggawe typography kanggo kaca sing dicithak, potongan-potongan timbal tipis diselehake ing antarane garis horisontal teks kanggo nggawe jarak antar garis kasebut. Yen sampeyan pengin papan sing luwih gedhe, sampeyan bakal masang papan sing luwih gedhe. Iki minangka tegese "utama" sing diciptakake. Yen sampeyan nggoleki istilah "utama" ing buku babagan rancangan tipografis lan kepala sekolah, bakal maca babagan efek - "jarak antarane garis dasar garis sing paling apik."

Leading in Web Design

Ing desain digital, istilah utama isih dipigunakaké kanggo ngrujuk marang jarak antar baris teks. Kathah program migunakaken istilah ingkang tepat, sanadyan timbalipun nyata boten saged dipunginakaken wonten ing program kasebut. Inggih punika tuladha ingkang sae saking gagasan-gagasan ingkang badhe ngrancang desain ingkang langkung sae saking sanès-sanèsipun, sanadyan implementasi ingkang utaminipun prinsip punika sampun berubah.

Nalika nerangake desain web, ora ana properti CSS kanggo "leading." Nanging, properti CSS sing bakal nangani tampilan visual iki diarani dhuwur baris. Yen sampeyan pengin teks duwe spasi tambahan antarane garis horisontal teks, sampeyan bakal nggunakake properti iki. Contone, umpamane sampeyan pengin nambah baris dhuwur kanggo kabeh paragraf nang elemen saka situs sampeyan, sampeyan bisa nindakake kaya iki:

utama p {line-height: 1.5; }

Iki saiki bakal dadi 1,5 kali ketinggian garis normal, adhedhasar ukuran huruf default kaca (sing biasane 16px).

Nalika Nggunakake Line-Height

Minangka rinci ing ndhuwur, dhuwur-line cocok kanggo digunakake kanggo spasi baris teks ing paragraf utawa blok liyane teks. Menawa ana spasi ing antarane baris, teks kasebut bisa dadi jumbled lan angel diwaca kanggo pamirsa menyang situs sampeyan. Kajaba iku, yen garis sing ditemokake uga adoh ing kaca, aliran normal maca bakal diselani lan sing maca bakal duwe alangan karo teks kanggo alasan sing. Iki sebabe sampeyan pengin nggolek jarak jembar baris sing cocok kanggo digunakake. Sampeyan uga bisa nyoba desain karo pangguna sing bener kanggo njaluk umpan balik babagan kaca sing dibaca .

Nalika Ora Gunakake Line-Height

Aja bingung baris dhuwur karo padding utawa margin sing bakal digunakake kanggo nambah spasi kanggo desain halaman, kalebu ing ngisor judhul utawa paragraf. Spasi kasebut ora ndadékaké, lan mulané ora ditangani kanthi dhuwur.

Yen sampeyan pengin nambah spasi ing unsur teks tartamtu, sampeyan bakal nggunakake wates utawa padding. Menyang maneh conto CSS sadurunge sing digunakake, kita bisa nambah iki:

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

Iki isih duwe dhuwur 1,5 baris antarane garis teks kanggo kaca paragraf kita (sing gedhe nang elemen ). Paragraf sing padha uga bakal duwe 24 piksel whitespace ing ngisor dhewe, sing ngidini kanggo break-break visual sing ngidini nonton kanthi gampang ngenali siji paragraf saka liyane lan nggawe situs web maca gampang dilakoni. Sampeyan uga bisa nggunakake properti padding ing panggonan bathi kene:

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

Ing meh kabeh kasus, iki bakal nuduhake padha karo CSS sadurungé.

Ngomongake sampeyan pengin nambah dhaftar spasi ing ngisor dhaptar sing ana sajrone kelas "menu-menu", sampeyan bakal nggunakake wates utawa padding kanggo nindakake, ora dhuwur garis. Dadi iki bakal cocok.

.services-menu li { Sampeyan mung bakal nggunakake baris dhuwur ing kene yen sampeyan pengin nyetel spasi ing teks ing dhaptar item piyambak, assuming padha longy mlaku teks sing bisa mbukak kanggo macem-macem garis kanggo saben titik peluru.