www.romver.ru / Полный список статей / Дизайн текста

Dopustim, 4to uje podobrani osnovnie cveta sayta, stilizacia grafi4eskix elementov. Teper' nujno razobrat'sa s tekstom.

0. Osnovnoy tekst.

Elementi kontenta na stranice doljni imet' ediniy stil' oformlenia, 4tobi stranica bila adekvatno vosprinimaema i legko 4itabel'na. Eto kasaetsa v osnovnom 6rifta i cvetov, no i otstupi ne isklu4enie. Razmer 6rifta doljen bit' dostato4no bol'6oy, a esli trebuetsa ispol'zovat' malen'kiy 6rift, to obazatel'no stoit predusmotret' vozmojnost' izmenenia ego razmera, naprimer, ispol'zovanie em vmesto px dla ukazania razmera 6rifta v vёrstke (IE6 ne umeet izmenat' razmer 6rifta esli on ukazan v pikselax, ostal'nie brauzeri s etim spravlautsa).

Est' mnenie, 4to rubleniy 6rift (bez zase4ek) bolee 4itaem s ekrana, 4em 6rift bez zase4ek (ne govora uje o dekorativnix 6riftax). Sogla6us', s nekotorimi ogovorkami. Esli 6rift melkiy, to stoit ispol'zovat' 6rift bez zase4ek:

Esli 6rift bol'6oy (naprimer, zagolovok), to mojno ispol'zovat' 6rift s zase4kami, kotoriy budet vigladet' gorazdo iza6nee.

Vsё, kone4no, zavisit ot stila dizayna sayta. K slovu, rekomenduu po4itat' sleduu6ie stat'i: Kak vibrat' 6rift dla Web-sayta i Kak vibrat' 6rift dla Web-sayta 2: serif i monotype.

1. Zagolovki

Su6estvuut 6 urovney zagolovkov, kotorimi ne stoit prenebregat', ved' o4en' 4asto elektronniy dokument (v dannom slu4ae veb-sayt) mojet bit' mnogourovnevim i vse urovni zagolovkov mogut bit' vostrebovani. Xota ispol'zovanie vsego «spektra» zagolovkov mojet privesti k tomu, 4to pol'zovatel' zaputaetsa v urovnax. Poetomu trёx urovney zagolovkov v tekste budet dostato4no. Zagolovki samix verxnix urovney lu46e ostavit' dla formatirovania zagolovo4nix nadpisey dla razli4nix blokov i zagolovka sayta i stranici.

Rekomenduu dla zagolovkov samix verxnix urovney ispol'zovat' bol'6ogo razmera 6rift i dostato4no kontrastniy cvet. Spuskaas' po urovnu zagolovkov postepenno snijayte ix arkost' priblijaas' k cvetu osnovnogo teksta. Delaetsa eto dla togo, 4tobi melkie zagolovki bili bolee 4itaemi. Naprimer, esli zelёniy cvet odin iz osnovnix cvetov na sayte, to rekomenduu v grafi4eskom redaktore izobrazit' gradient, gde s odnoy storoni budet raspolagat'sa va6 zelёniy cvet, a s drugoy storoni — cvet osnovnogo teksta.

Delo v tom, 4to 4em ar4e i svetlee cvet teksta, tem on men'6e kontrastiruet so svetlim fonom. Dla zagolovkov verxnego urovna arkost' 6rifta, a stalo bit' ego nizkaa cvetovaa kontrastnost' kompensiruetsa ix razmerom i kontrastom formi. Po mere umen'6enia razmera, umen'6aetsa kontrast formi, a stalo bit' umen'6aetsa udobo4itaemost', poetomu sleduet eto kompensirovat' kontrastom cveta, t. e. cvet zagolovkov delat' bolee tёmnim.

Primer, otli4no illustriruet, skazannoe.

Esli stil' sayta podrazumevaet ispol'zovanie neskol'kix cvetov, to mojno ix vzat', raspolojit' v poradke arkosti i primenit' dla zagolovkov. No ne stoit perebar6ivat'. Raznie ottenki odnogo cveta dopustimi. No esli vi budete ispol'zovat' dla vsex 6esti zagolovkov raznie po spektru cveta, to soderjimoe budet sli6kom pёstro oformleno i eto budet me6at'. Posledniy 6estoy zagolovok, avlaetsa zagolovkom samogo nizkogo urovna i, v principe, mojet daje ne otli4at'sa ot osnovnogo teksta ni cvetom, ni razmerom. Mojno prosto sdelat' ego jirnim.

2. Razmeri

Razmeri zagolovkov i tekstovix blokov doljni bit' rass4itani tak, 4tobi, vo-pervix, zagolovki raznogo urovna bili legko otli4imi, t. e. razli4ia doljni bit' na stol'ko kontrastni na skol'ko eto vozmojno v opredelёnnom diapazone. No sli6kom bol'6oy kontrast razmera porodit razob6ёnnost' elementov — etogo sleduet izbegat'.

Razmer samix blokov teksta zavisit ot razmera 6rifta. Kak pravilo naibolee udoben dla 4tenia blok teksta 6irinoy v 65 simvolov, poetomu dla bol'6ix ob&ёmov teksta ne podxodit rezinovaa vёrstka. Visota abzaca, jelatel'no, ne doljna previ6at' 7 strok.

3. Otstupi

Koli4estvo pustogo mesta pramo proporcional'no 4itabel'nosti — eto uje dostato4no izvestnoe pravilo. Vremena km.ru pro6li (xota sey4as dizayn slegka ulu46en), sey4as naibolee aktualen dizayn v tak nazivaemom stile «Web 2.0», kotoriy, esli ne brat' vo vnimanie zakruglёnnie ugli, glanec, otrajenia a tol'ko formatirovanie teksta, po suti predstavlaet soboy nagladniy primer togo, kak doljen vigladet' udobniy dla 4tenia sayt.

Po4emu ran'6e bili sayti poxojie na zvuki.ru? Vsё o4en' prosto. Veb-dizayn unasledoval kompaktnuu vёrstku ot gazet i jurnalov, gde kajdaa stranica imela opredelёnnuu i ves'ma nemalen'kuu cenu. I sey4as v gazetax starautsa na odnu stranicu zapixnut' kak mojno bol'6e. Po na4alu v veb-dizayne postupali to4no tak je.

Primeri peregrujennix saytov.

No postepenno, do dizaynerov stalo doxodit', 4to prostranstvo na veb-sayte ne ograni4ena, a stalo bit' mojno delat' bol'6e otstupov. Bol'6e otstupov — glazam bol'6e mesta dla otdixa. «Steni teksta» i obilie mnogokolon4atix tekstovix blokov razdrajaut glaza.

Standartnaa vёrstka 90x — 3–6 kolonok s nebol'6imi otstupami i 4ёtkimi razdelitel'nimi liniami ili fonami.

Sovremennaa vёrstka — 1–3 kolonki s bol'6imi otstupami i ne vsegda s o4evidnimi deleniami. O4en' 4asto razdelenie blokov realizuetsa za s4ёt bol'6ix otstupov i/ili slabix granic i fonov.

Otstupi mejdu tekstovimi blokami doljni bit' sorazmerni razmeram tekstovix blokov (ne o4en' tavtologi4no polu4ilos'?). T.e. tak, 4tobi rasstoanie mejdu tekstovimi blokami ne otrivalo ix drug ot druga po smislu.

Primeri ne peregrujennix saytov

Visota stroki doljna bit' ne sli6kom bol'6oy, 4tobi ne sputat' eё s razdeleniem abzaca i ne sli6kom malen'koy, 4tobi tekst ne perestal bit' ne4itabel'nim. Rekomenduu proporciu ot 3×2 do 5×3. Naprimer, esli razmer 6rifta raven 12px, to visotu stroki mojno stavit' 18—20 px.

Ran'6e, v pe4ati, abzaci otdelali krasnimi strokami. V pe4ati eto dopustimo, poskol'ku s bumagi 4itat' gorazdo leg4e, 4em s ekrana. V elektronnix dokumentax dla razdelenia abzacev ispol'zuut otstupi mejdu samimi abzacami. Otstupi daut vozmojnost' legko otli4it', gde zakan4ivaetsa abzac, ne tol'ko v na4ale stroki no i v eё konce.

Rasstoanie mejdu abzacami sleduet stavit' v diapazone ot visoti 6rifta do visoti stroki. Rasstoanie doljno 4ёtko ukazivat' na razdelenie abzacev, no ne doljno sovsem razorvat' ix vzaimosvaz'.

Rasstoanie ot zagolovka i do na4ala tekstovogo bloka doljno bit' ravno rasstoaniu mejdu abzacami, a rasstoanie ot konca tekstovogo bloka do sleduu6ego zagolovka doljno bit' primerno v dva raza bol'6e, 4em rasstoanie ot zagolovka do na4ala tekstovogo bloka. Eto delaetsa dla togo, 4tobi obozna4it' prinadlejnost' teksta k opredelёnnomu zagolovku. Su6estvuu6ie nastroyki po-umol4aniu vo vsex brauzerax nepriemlimi, poskol'ku oni podrazumevaut ravnie rasstoania ot zagolovka do drugogo soderjimogo sverxu i snizu.

4. Tablici

Osnovnie svoystva tablic kotorie ne pomogaut a tol'ko me6aut vosprinimat' informaciu: vertikal'noe viravnivanie i ujasnie ramki. Vo-pervix vertikal'noe viravnivanie doljno bit' sootvetstvuu6im soderjimomu, soderjimoe obi4nix a4eek dolno imet' viravnivanie po verxu, soderjimoe zagolovo4nix a4eek — po centru. Pri4ёm, esli v gorizontal'nix zagolovo4nix a4eykax dopustimo centrirovannoe gorizontal'noe viravnivanie, to v vertikal'nix zagolovo4nix a4eykax — net.

Ramku tablici mojno sozdat' dvuma sposobami:

1. Ispol'zovat' svoystvo border i border-collapse: collapse dla tablici.
2. Ispol'zovat' razniy fon dla tablici i a4eek tablici, pri etom border-collapse: separate, a rasstoanie mejdu a4eykami zadaёtsa s pomo6'u border-spacing.

Otstupi u ot granici a4eyki do eё soderjimogo doljni bit' ne men'6e polovini visoti stroki abzaca. A tekst v zagolovo4nix a4eykax vsegda doljen otli4at'sa libo jirnost'u, libo razmerom 6rifta.

V ideale, kajdaa ne4ёtnaa stroka tablici doljna otli4at'sa fonom ot 4ёtnoy stroki. Realizaciu nujno soglasovivat' s programmistom.

Ne stoit tak je zabivat' i pro zagolovok samoy tablici (teg <caption>). Kstati, ramka u caption vo vtorom variante tablici (s pomo6'u background) vigladit lu46e.

Primer, vёrstki upomanutix v stat'e elementov. www.seleckis.lv/wp-content/uploads/2008/02/markupr1.html

Prodoljenie sleduet… seleckis.lv/journal/web-dizayn/dizayn-teksta-1-osnovnoy-tekst-zagolovki-tablitsyi