Վեբ տիպոգրաֆիա Ժամանակակից կայքի լավագույն փորձերը

Պատասխանատու վեբ տպագրության ուղեցույց, որն ընդգրկում է բոլոր լավագույն փորձերը & տառատեսակի ստեղնաշարի չափի կանոններ ՝ ձեր կայքի բովանդակությունը ընթերցելու համար & ուրախություն տեսնելու համար.


Տպագրությունը լավագույն փորձը

Նկարիչները ունեն իրենց խոզանակները: Քանդակագործներն ունեն իրենց կավը: Վեբ դիզայներներն ունեն իրենց… տառատեսակները: Ինչպես հիմա ունի Օլիվեր Ռիչենշտեյնը հայտնի գրված«Համացանցում տեղեկատվության 95% -ը գրավոր լեզու է»: Ձեր կայքի սովորական գրաֆիկայի, սրբապատկերների, գեղեցիկ ընտրացանկերի և մաքուր ինտերֆեյսերի ձեր ուշադրությանն արժանացած բոլոր ուշադիր մտածելակերպից հետո մեղք կլիներ զննել վեբ տպագրության կարևոր բաղադրիչը.

Մի անհանգստացեք. Ձեզ հարկավոր չէ վարպետ ձևավորող լինել, որպեսզի ստեղ և արդյունավետ տեքստ ստեղծեք: Հավատարիմ մի քանի հուսալի ուղեցույցներին և սկզբունքներին պահպանելով ՝ ձեր վեբ տպագրությունը կփոխանցի այն տեղեկությունները, որոնք օգտագործողները փափագում են այն ձևով, որը հեշտությամբ ընթեռնելի և մտածված ձևավորված է:.

Տեսողական հիերարխիա հաստատելը

Լավ վեբ տպագրության ամենակարևոր նպատակը ա հիերարխիա բովանդակության, որը տեսողականորեն հոսում է մեկ տարրից մյուսը: Ձեր Վերնագրերի, ենթաբաժինների և մարմնի տեքստի ճիշտ տարբերակում, տառատեսակների բազմատեսակ կշիռներ և ոճեր և տեքստի բլոկների միջև բավարար քանակությամբ սպիտակ տարածություն բոլորն են, որոնք խթանում են ընթերցանության անհաջող փորձը:.

Տիպոգրաֆիայի տեսողական հիերարխիայի օրինակ

Ուժեղ մարմին կառուցելը

Ձեր բիզնեսի առաջին կարգը ձեր կայքի հիմնական մեխն է Մարմին տեքստ, քանի որ սա այն է, ինչ ձեր այցելուները կանցկացնեն իրենց ժամանակի մեծ մասը կարդալով: Ձեր նպատակն է ստեղծել տեքստեր, որոնք բնականաբար հոսում են մեծ պարբերություններով ՝ ներշնչելով առողջ ռիթմ ՝ ընթերցանության երկար հատվածների համար.

  • Body տեքստի ամենատարածված տառաչափը 16px—Or, ավելի լավ է, 1em (այս մասին ավելի ուշ).
  • Խուսափեք ձեր տեքստի կենտրոնացումը հավասարեցնելուց, քանի որ երկու կողմերի անհավասար եզրերը կդարձնեն աննկարագրելի տեսարան: Փոխարենը, դրեք ձախ և աջ լուսանցք տեքստի բեռնարկղից դեպի ավտո ավելի ցանկալի էֆեկտ ունենալու համար.
  • Արդարացվեց տեքստը հրաշալի է գործում ոչ թե ինտերնետային էջերի, այլ թերթերի համար: Հեղուկի դասավորության բնույթը կարող է առաջացնել բառերի միջև ընկած անկանխատեսելի բացեր.
  • Ընտրեք ցածր հակադրություն տառատեսակներ բարձրերի վրա: Տառատեսակները հավանում են Դիդոտ լավ աշխատեք jumbo- ի վերնագրերի կամ մեծ ձևաչափի տպագրության համար, բայց դրա բարձր հակադրությունը հաստ և բարակ ինսուլտի գծերի միջև դժվար է ընթերցել կայքերի փոքր չափերի դժվար ընթերցմամբ:.
  • Զգուշացեք ընթեռնելիություն. Բազմաթիվ sans-serif տառատեսակներում «I» – ը և «l» տառերը հավասարապես նույնն են, ինչը կարող է անհարկի խառնաշփոթ առաջացնել.
  • Օպտիմալ գծի բարձրություն պարբերության տեքստի չափը 1.25–1,5 – ով է. տառաչափը: Համապատասխանաբար կարգավորեք ձեր ընտրված տիպի հիման վրա.

Վերնագրեր Հաջողության համար

Ավելի լավ կամ ավելի վատ, ընթերցողներից շատերը, ամենայն հավանականությամբ, կընկնեն ձեր էջի էջերը Վերնագրեր առանց նույնիսկ հիմնական տեքստի անհանգստանալու: Հետևաբար, շատ կարևոր է գրավել նրանց ուշադրությունը և հորդորել հետագա ընթերցում ՝ ապահովելով, որ ձեր վերնագրերի տպագրությունն ուշագրավ է.

  • Heading տեքստի համար տառատեսակի միջին չափը մոտակայքում է 36pxԱվելի լավ է, շուրջս 2.25em (մենք պատրաստվում ենք հասնել դրան).
  • Ուշադրությունը միշտ պետք է գնա դեպի Դեպի Դեպի Մարմինը: Համոզվեք, որ ձեր Վերին տեքստը գերակշռված չէ մարմնում տառատեսակի չափազանց հաստությամբ.
  • Համոզվեք, որ ձեր վերնագրերը բավարարում են ընթերցողների ակնկալիքները: Զգալիորեն ավելի մեծ տեքստ, որը պարունակում է բավականին մեծ հեռավորություն իր երեխայի պարբերության միջև, ենթադրում է առարկայի փոփոխություն, մինչդեռ պարբերություններին ավելի մոտ վերնագրերը ավելի մոտ են ենթադրում, որ բովանդակությունը կապված է.
  • Այն դեպքում, երբ ձեր վերնագիրը պետք է փաթաթվի հաջորդ շարքին, տեղյակ եղեք, որ օպտիմալը գծի բարձրություն համար վերնագրեր է պակաս քան այն, ինչ նախատեսված է մարմնի տեքստի համար.

Տարածություն միջև

Ձեր էջի տարրերը բաժանող տարածքի քանակը շատ բան է ասում միմյանց հետ նրանց հարաբերությունների մասին, և դա ձևավորման սկզբունք է, որը չի կարելի անտեսել: Սպիտակ օվկիանոսով շրջապատված գերիշխող վերնագրերը շատ այլ համատեքստ են ապահովում, քան կետերին կցված փոքր վերնագրերը (հիշեք, որ մենք կառուցում ենք տեսողական հիերարխիա).

Ընդհանրապես, ավելի լավ է սխալվել այդքան շատ սպիտակ տարածք ունենալու կողքից, քան ոչ բավարար: Առատ սպիտակ սպիտակ տարածությամբ մաքուր դասավորությունը նախընտրելի է ժամանակակից ոստայնում.

Ընկնել տողում

Պատկերացրեք ձեր բարձր լուծաչափով 27-դյույմանոց մոնիտորի կարդալու տեքստը, որն ամբողջ երկարությամբ ձգվում է էկրանի երկու ծայրերը: Ձեր աչքերը հոգնած կլինեն ընդամենը մեկ պարբերությունից հետո!

Կարևոր է ձեր հիմնական տեքստի յուրաքանչյուր տողը սահմանափակվել որոշակի թվով նիշերով, որպեսզի աչքերը կենտրոնացած լինեն կենտրոնական կետի վրա: Հանրաճանաչ համաձայնությունն այն է, որ դրա համար այս մոգական միջոցառումն է աշխատասեղաններ է 60–75 նիշ երկարությամբ. Համար բջջային էկրաններ, որտեղ մենք ուզում ենք խուսափել աչքերի քրտնաջանությունից և չափազանց խտացրած տեքստից, այդ թիվը շուրջը է նստում 35–40 նիշ մեկ տողի համար.

Ծալելով մասշտաբը

Շատ բան է գրվել Body- ի և Heading տառատեսակի չափի միջև մասշտաբի թեմայի վերաբերյալ: Ո՞րն է այդ կատարյալ H2 չափը, եթե ձեր մարմնի տեքստը, ասենք, 1em է: Body text- ի և H1-H6 վերնագրերի միջև առավել գեղագիտական ​​հաճելի համամասնությունների որոշումը, բարեբախտաբար, ինչ-որ տիպաբանների արդեն վերծանել է: Բացի այդ, այս մաթեմատիկական համամասնությունները պետք է հարմարեցվեն նաև օգտագործողի էկրանի չափի հիման վրա.

Դիզայներ asonեյսոն Պեմենտը տրամադրում է օգտակար աղյուսակ այն բանի համար, որ նա կարծում է, որ տառատեսակների ամենաօպտիմալ չափերը տարբեր մեդիա սարքերում են, և ես հակված եմ համաձայնվել նրա հետ: Ըստ էության, չնայած որ աշխատասեղանի համար իդեալական H1 չափը կարող է լինել 3 × մարմնի չափը, շարժական էկրանի վրա դա կհայտնվի չափազանց ուռճացված. Ուստի այն պետք է փոքրացվի ներքև ՝ դիտելու փոքր դիտման գոտի համար:.

Տառատեսակի օպտիմալ չափերի գծապատկեր տարբեր մեդիա սարքերում

ՀԱՄԱՐ ՆՇՈՒՄ. Ինչպե՞ս կարող ես ասել, որ լավ տեսողական հիերարխիա ունես? Squint ձեր էկրանին մինչև ամբողջ տեքստը չփչանա: Եթե ​​դասավորությունը հայտնվում է որպես ամորֆ բլոկ, որը չի առանձնանում բաժինների միջև, ապա ձեր հիերարխիան կարող է ձախողվել: Եթե, այնուամենայնիվ, հեշտությամբ կարող եք տարբերակել տեքստի բլոկների, վերնագրերի և հստակ իմանալը, թե ուր պետք է ճանապարհորդեն աչքերը, ապա հիանալի վիճակում եք!

Տեքստի պատասխանատու պահելը

Պատասխանատու վեբ ձևավորումը այս օրերին կարևոր պրակտիկա է. Մասնավորապես, քանի որ ավելի ու ավելի շատ մարդիկ օգտագործում են բջջային սարքերը, որպես իրենց հիմնական միջոց ՝ ինտերնետը զննելու համար: Չնայած պիքսելների փոխարեն տոկոսներով նախագծելը հեղափոխություն է կատարել հեղուկ լայնություններին պատկերների և լուսանցքների հարմարվելու ձևի վրա, պատասխանատու վեբ տպագրությունը, ցավոք, մնացել է կոտրելու ձվը:.

Բազմաթիվ սարքերի միջոցով տառատեսակի չափսերի օպտիմալացումը կարող է ճնշող դառնալ, քանի որ դուք պետք է նավարկեք մի քանի լրատվամիջոցների հարցումների միջոցով `ձեր կայքում բոլոր տեքստի թիրախավորումը: Այնուամենայնիվ, ձեր նախընտրած միավորի արագ ճշգրտմամբ դուք ավելի հեշտությամբ կբացահայտեք տառատեսակի ճիշտ չափերը, որոնք կօգտագործվեն ցանկացած տեսակի էկրանին.

Ems Over Pixels- ում

Ձեր կայքի տպագրությունը պարզեցնելու համար քերծեք պիքսելը և սկսեք օգտագործել ems. Ems- ը թույլ է տալիս ավելի հեշտ հասկանալ ձեր կայքի տառատեսակների չափսերի միջև բաշխումը, և դրանց փոքր միավորները ավելի կառավարելի են, քան պիքսելների երկնիշ թվերը.

Ամենակարևորը `ամեն բան համեմատական ​​է ծնողական բեռնարկղի հետ: Եթե ​​սահմանում եք գծի բարձրություն բեռնարկղից մինչև 1.5 մ, ապա նույնիսկ եթե դուք փոխում եք այդ տարաների տառաչափը, գծի բարձրությունը կմնա ճիշտ համամասնությամբ: Պիքսելներով, դուք պետք է անընդհատ կարգավորեք բեռնարկղի գծի բարձրությունը իր տառաչափի յուրաքանչյուր փոփոխության համար `տեսողական հետևողականությունը պահպանելու համար.

Այս սկզբունքը հավաստի է լուսանցք, լիցք, նամակ-տարածություն, և ցանկացած այլ ոճ, որը դուք կիրառում եք ձեր կայքի տեքստում: Այլևս չկապելով պիքսելների պարունակությունը ձեր բովանդակության լցոնման համար, յուրաքանչյուր լրատվամիջոցի հարցում. Պարզապես ստեղնաշարերը տեղադրեք էլեկտրոնային հաղորդագրություններում և այն ինքնաբերաբար կկարգավորվի բնօրինակ համամասնություններով!

Օգտագործելով Ems

Առաջին բանը, որ պետք է անեք, ձեր կայքի տառատեսակի չափի հիմնական հղումն է: Ձեր մեջ ոճի թերթիկ, մուտքագրեք սա

մարմին {
տառատեսակի չափը ՝ 100%;
}

Սա սահմանում է ձեր կայքի բովանդակության համեմատական ​​տառաչափը 1em, որը զննարկիչների մեծ մասը մեկնաբանում է որպես 16px. Այժմ ձեր բոլոր վերնագրերի չափերը `2.25em, 1.5em և այլն the – ը ելակետային 1em- ի ուղղակի բազմապատկերն են.

ԿԱՐԵՎՈՐ ՆՇՈՒՄ. Էմսն է կասկադայինՆրանց մեծության մասին խոսելը կապված է նրա ծնողի սահմանված արժեքի հետ: Օրինակ ՝ Եթե ձեր մարմնի տառատեսակի չափը դնեք 1.25 լիմի, իսկ այնուհետև երեխայի բեռնարկղի տառատեսակի չափը 1.25 լիմի, ապա երկու տառատեսակները նույն չափը չեն լինի: Փոխարենը, երեխայի բեռնարկղի տեքստը կկազմի 1,25 × բնօրինակը 1.25em ծնողի չափը.

Լրացուցիչ խորհուրդներ հիանալի վեբ տիպոգրաֆիայի համար

Ահա մի քանի այլ խորհուրդ ՝ հիանալի վեբ տպագրության համար.

Մի չափազանցեք դա

Դուք պետք է սահմանափակեք ձեր կայքի տպագրությունը 2-3 տառատեսակ առավելագույնը. Սովորաբար սա կլինի տառատեսակ ձեր վերնագրերի համար, ձեր հիմնական տեքստի տառատեսակ և, անհրաժեշտության դեպքում, ենթավերնագիր: Չափից շատ տառատեսակներ օգտագործելը կարող է ստեղծել խառնաշփոթ և կենտրոնացած դասավորություն: Ձեր կայքի բեռնման ժամանակը կարող է ազդել նաև, ինչպես բացատրվում է հաջորդ կետով.

Տեղադրեք միայն այն, ինչ ձեզ հարկավոր է

Մտածեք միայն այն, ինչը ձեր կայքի համար առավելագույնն է անհրաժեշտ, իսկ մնացածը թողեք դուրս: Եթե ​​գիտեք, որ ձեզ պետք կլինի կանոնավոր, համարձակ և իտալիալ տվյալ տառատեսակի ոճավորում, այնուհետև տեղադրեք միայն այդ ընտրությունները և բացառեք բարակ, լույս և Սեվ ոճերը: Անհրաժեշտության դեպքում ավելի շատ ոճեր բեռնելը կարող է մեծ հարված հասցնել ձեր կայքի ռեսուրսներին, քանի որ յուրաքանչյուր անհատական ​​ոճը սերվերի առանձին պահանջ է.

Եթե ​​դուք չեք ցանկանում սահմանափակել ձեր ստեղծագործությունը նախագծման փուլում, ապա առաջ գնացեք և ներդրեք ամեն ինչ. պարզապես հիշեք, որ ձեր կայքը ուղիղ եթերով հեռացնեք ավելցուկային ոճերը.

Եթե ​​դուք չեք կարող կարդալ այն, մի օգտագործեք այն

Սա մեծիկ է: Մինչ ծաղկուն ձեռագիր տառատեսակ կարող է գայթակղիչ լինել օգտագործման համար, եթե նույնիսկ կա փոքրագույն խառնաշփոթ ՝ լինի դա «g» կամ «y», ապա մի օգտագործեք այն: Ոչինչ ավելի հիասթափեցնող չէ ընթերցողի համար, քան պայքարում է անօրինական տառատեսակը վերծանելիս.

Սիրված իրական տեքստը «Lorem Ipsum» – ի համար

Յուրաքանչյուր դիզայներ ապավինում է lorem ipsum նախագծի դասավորությունը պլանավորելիս դատարկ բովանդակության դատարկ տարածքներ լրացնելու համար: Կարող է զարմանալ, այնուամենայնիվ, այն փաստը, թե իրական ազդեցությունը օգտագործելով ինչ ազդեցություն կարող է ունենալ ձեր տպագրության տեսքի և զգացողության վրա: «Lorem ipsum» – ը լիովին հուզմունքային և մտավոր խոռոչ է. այն իրական թելադրանք չի տալիս, թե ինչպես են ձեր բառերը և ձեր անհատականությունը արտահայտվելու տեքստի միջոցով: Հետևաբար, հնարավորինս շուտ միացրեք ձեր կայքի իրական պարունակությունը `նախքան ձեր կայքի ձևավորումը ավարտելը.

Հակադրություն հետին պլանների հետ

Պարզ սպիտակ ֆոնի վրա մուգ տառատեսակը միշտ կապահովի լավագույն ընթերցանությունը: Մուգ կամ մռայլ պատկերի դեմ սպիտակ տեքստը նույնպես այս օրերին դառնում է ժողովրդականություն: Պարզապես պետք է հիշեք, որ ձեր նախապատմությունը չափազանց խճճված կամ մանրամասն չէ, ինչը կհզորացնի առաջին պլանի տեքստը.

Տեքստի վատ տիպոգրաֆիայի օրինակ տեքստի ֆոնի վրաՏպագրության վատ պրակտիկայի օրինակ է ՝ օգտագործելով «տեքստը տեքստի մասին» ֆոնը.

Զույգ տառատեսակներ – գրավչության նման

Բոլորովին այլ անհատականություններով տառատեսակների զույգերը կստեղծեն շփոթված ազդանշաններ: Երկուսը կարող են լինել ոճականորեն հակադրվող, բայց հուզականորեն նրանք պետք է ծառայեն նույն հաղորդագրությանը.

Զույգ տառատեսակներ – պահեք այն ընտանիքում

Ամենապարզ լուծումը հաճախ լավագույնն է: Երբեմն լավագույն զույգերը գալիս են նույն տառատեսակի տառատեսակների (սերիֆ, այլընտրանքային քաշ, սալաքար) օգտագործելուց.

Հիպերհղումներ

Ընդհանուր և սպասվող պրակտիկայում է ընդգծել հղումներ և հեռացնել ընդգծված իրադարձությունների ընդգծումը: Այս երթուղին անցնելիս համոզվեք, որ ձեր շեշտադրած տեքստը շեղված է կամ համարձակ այլ ոչ թե ընդգծվում է խուսափել խառնաշփոթից.

Այս օրերին, սակայն, փոխարենը խարսխված տեքստը, ընդհանուր առմամբ, գունավորվում է, և կախվելով անցումային էֆեկտ է կիրառվում: Դիզայնի տեսանկյունից սա, անկասկած, ավելի լավ տարբերակ է, բայց հիշեք, որ այն հետևողական է!

Որոշ CSS իմանալ

Սա ազդում է տառերի միջև հեռավորության վրա: Օգտակար է վերնագրերը շեշտելու համար.

նամակ-տարածություն. x.xxem;

Սա ազդում է բառերի միջև հեռավորության վրա.

word-spacing: x.xxem;

Սա շեշտադրման համար ապահովում է բոլոր գլխարկների այլընտրանքը: Օգտակար է նաև կրճատման համար.

տառատեսակի տարբերակ. փոքր գլխարկներ;

Սա կապիտալիզացնում է ձեր բոլոր տեքստը.

տեքստի վերափոխում. մեծատառ;

Սա կապիտալիզացիայի կտա տեքստի առաջին տառը.

տեքստի վերափոխում. կապիտալիզացիա;

Սա շեշտը կդնի տեքստի վրա.

տեքստի ձևավորում.

Սա բարելավում է տառատեսակների ցուցադրումը ժամանակակից դիտարկիչներում.

տեքստի մատուցում. օպտիմիզացնել Պաշտպանությունը

Հասկանալով տառատեսակի ֆայլի տեսակները

Լավ գաղափար է ՝ ներկառուցել մի քանի ֆայլերի տեսակներ, որպեսզի տառատեսակները ճիշտ բեռնվեն բրաուզերների լայն շրջանակում: Սրանք այն են, որոնցից առավելագույնս պետք է մտահոգվեք.

TrueType

TTF- ը ամենատարածված ձևաչափն է Mac- ի և Windows- ի համար, և այն աջակցվում է բոլոր հիմնական դիտարկիչներում.

OpenType- ը

OTF- ն նույնպես լայնորեն աջակցվում է, և այն թույլ է տալիս ավելացնել հավելումներ, ինչպիսիք են փոքր գլխարկները և այլընտրանքային նիշերը ՝ առանց առանձին տառատեսակի ներդրման անհրաժեշտության:.

Ներկառուցված բաց տիպ

EOT- ը աջակցում է միայն Internet Explorer- ին, և քանի դեռ չեք անհանգստանում IE- ի հին տարբերակներից օգտվողների համար, հավանաբար լավագույնն է պարզապես թողնել այս մեկը.

Վեբ բաց տառատեսակի ձևաչափ

WOFF —- ը և նրա իրավահաջորդը ՝ WOFF2 — քաղաքում քաղաքի նոր թագավորներն են: Հիմնական զննարկիչներում նրանց աջակցությունը և սեղմվելու ունակությունը նրանց դարձնում են ժամանակակից ֆայլի ընտրության տեսակ.

Պետք է ֆայլի տիպ փոխարկել?

Դուք հավանաբար կվիճեք մի իրավիճակի, երբ դուք ունեք միայն մեկ տառատեսակի ֆայլ և ունեք ինչ-որ կերպ վերափոխել այն մեկ այլ. FontSquirrel- ը և Font2Web առաջարկեք առցանց գործիքներ, որոնք կանեն հենց դա.

Եզրակացություն

Դուք դա արդեն գիտեիք բովանդակություն ձեր կայքի միակ կարևորագույն կողմն է: Լավ պատրաստված բովանդակությունը արժանի է պատրաստված տպագրության; կայքի այցելուներին մի հիասթափեցրեք այն տեքստով, որը դժվար է կարդալ կամ շփոթեցնել կառուցվածքում: Զգուշորեն պլանավորված տեսողական հիերարխիայի հետ, որը հավատարիմ է տպագրական լավագույն փորձերին, ձեր ստեղծագործական մտքերը նույնպես կարող են ստեղծագործորեն ներկայացվել: Ուրախ տպագրություն!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map