фотошоп

Әдемі типография. Веб типографиясының жақсы, жаман және тамаша мысалдары

Бұл тізім II тоқсанның қорытындысы бойынша жасалған. 2008. Алдыңғы «диаграммаларды» табуға болады және.

Әрбір мысал қысқаша түсініктемемен бірге жүреді және скриншотты басу сізді бастапқы сайтқа апарады.

Тұқымдық конференция

Жарқыл жоқ, суреттер жоқ, қосымша шу жоқ; жай ғана жақсы стильдендірілген қаріп және жақсы жазылған мәтін: тек қаріппен тамаша нәтижелерге қол жеткізуге болатындығының нақты дәлелі. Мен мұндай мысалдарды көбірек көргім келеді.

Жаңалықты жобалау

Тақырып пен негізгі мазмұн арасындағы үлкен контраст, көп таза кеңістік және жақсы ұйымдастыру.

OmniTI

Жақсы логотип, анық мәтін және өте жақсы түс схемасы. Сіз дизайнды әзірлеу туралы көбірек оқи аласыз.

Designr.it

Керемет әшекейлі логотип (бұл қандай шрифт екенін кім біледі?) және көптеген әдемі бөлшектер.

дизайн көрінісі

Энди Рутледж - өзі насихаттайтын принциптерді іс жүзінде жүзеге асыратын дизайнер. Мақаланың жарияланған күніне байланысты өлшем өлшемін қалай өзгертетіні маған ұнайды, сондықтан ең соңғы мәтін ең үлкен өлшемге сәйкес келеді.

WordPress.org және WP 2.5.x әкімшісі

WordPress блог платформасы веб-сайтқа негізделмегенімен, олардың сайты күн сайын мыңдаған, тіпті миллиондаған экрандарымызда көрсетіледі. Мүмкіндігінше көп онлайн және офлайн қолданбалардың жақсы көрінгенін қалаймын.

Біздің түрі

Мен бұл сайтты шолуға қосқым келмеді, себебі ол флэшті пайдаланады. Дегенмен, оның бірнеше керемет қаріптері бар (және кейбір таңдаулыларымды қосу керек).

Палуба

Қаріптерге негізделген басқа сайт. Иерархия мен белгілеудің тамаша мысалы. «Сурет мыңнан астам сөзді айтады» деп кім айтты? Жоқ, шрифт жақсырақ сөйлейді.

Ия достым

Көптеген ақпарат тар сезімсіз, сонымен қатар сайт жақсы орналасу торымен байланысты.

Ақпараттық сәулетшілер

Дизайнерлер үлкен бос аумақтардан және шектеулі түс ауқымынан қорықпады.

Наз Хамид

Жарайсың. Өзі үшін сөйлейтін дизайн.

Джон Тан

Типографиялық тұрғыдан бай, талғампаз және кіршіксіз, сонымен қатар логотип... бұл сурет емес!

Қарастырылуда

Көптеген жақсы реттелген ақпарат және ол ұқыпты сәйкес келетін түстер палитрасымен бірге жүреді.

Эллиот Джей Стоктар

Бұл сайт көптеген байқауларда ұсынылған. Ол мұнда қаріптерді жақсы пайдаланудың арқасында келді.

Біз жасайтын заттар

Түрлі-түсті, ұйымдастырылған және үлкен шрифт.

Келесі мақалада, Интернетке арналған терең типография, біз осы сайттардың кейбірін егжей-тегжейлі қарастырамыз.

Typewolf шрифт ресурсының кураторы Джереми Шоаф қызықты қаріп шешімдері бар сайттардың мысалдарын таңдап, олардың артықшылықтары мен кемшіліктерін сипаттады.

Жұқа қағаз текстурасымен біріктірілген бұл типография сізді кітап оқып отырғандай сезінеді.

Жай сағыз

Өнімнің қаптамасының типографиясын өндірушінің веб-сайтының типографиясына сәйкестендіруге көмектесетін веб-қаріптердің арқасында. Бұл жиі болып жатыр. Simply Gum онлайн және офлайн арналарда сәйкестікті сақтай отырып, өзінің бренд атауы ретінде Gotham-ды таңдады.

Бұл сайт - жақсы үлгіОның үстіне, тек бір ғана стиль кейде қажет болатын. Готамның әртүрлі салмақтары мен бас әріптерін пайдалана отырып, Simply Gum бір ғана салмағы бар нақты иерархияны құрды.

Үстіңгі және астыңғы деректеме логотиптері PNG пішімінде болады, сондықтан олар веб-қаріптің оқылуын және масштабтауын жоғалтады. Логотип үшін веб-қаріпті пайдалану әрқашан мүмкін бола бермейді, әсіресе kerning бойынша жақсы бақылау қажет болса; дегенмен, бұл жағдайда SVG кескіні PNG кескініне қарағанда жақсырақ жұмыс істейді, себебі ол масштабталады және әлі де өзінің анықтығын сақтай алады.

Қысқаша қорытынды

Бақытымызға орай, жоғарыдағы мысалдар белгілі бір типографиялық шешімдер дизайнға қалай әсер ететінін көрсетті. Міне, сіз үшін бірнеше негізгі ойлар:

Егер сіз бірнеше салмақты қолданатын болсаңыз, арнайы типографияңызда дәйекті жүйені жасап, оны ұстаныңыз.
Негізгі мәтін үшін қалыпты курсив, қалың және қалың курсив мәнері бар қаріпті таңдаңыз.
Егер сіз танымал стильді таңдағыңыз келсе, дизайныңызды ерекше ету үшін оны азырақ стильмен жұптастыруға тырысыңыз.
Топ мүшелері арасында қаріптерді тұрақты пайдалануды қамтамасыз ету үшін жобаның ең басында стиль нұсқаулығын жасаңыз.
Ұқсас стильдерді емес, контрастты пайдаланыңыз.
Негізгі мәтін үшін экран қаріптерін пайдаланбаңыз. Қаріптерді мақсатына сай пайдаланыңыз.
Тек бір стильді отбасын пайдаланудан қорықпаңыз. Бір отбасының әртүрлі салмақтары мен стильдері бар иерархияны орнатуға болады.
Егер сіздің логотипіңіз рұқсат берсе, түсінікті және ауқымды болу үшін оны SVG форматында жасаңыз.

Керемет веб-сайт әдемі типографиядан басталады. Кейбір ережелерді бұзуға болатынымен, кейде жақсы типографияның не екенін және оны қалай жасау керектігі туралы негізгі принциптерге оралу дұрыс.

Бұл еске салғыш жобаларыңызға жаңа көзқараспен қарауға, жаңа тәсілдер туралы ойлауға немесе қарапайым дизайнға оралуға көмектеседі.

Сондықтан бүгін біз сән трендтерін елемейміз, типография теориясына назар аударамыз және «ережелер» бізге әдемі мәтін жасауға қалай көмектесетініне назар аударамыз.

Өлшем және иерархия

Өлшем маңызды. Оқуға болатын типографияны жасау үшін ол шешуші фактор болуы мүмкін. Кішігірім мәтінді оқуды былай қойғанда, көру қиын, бірақ тым үлкен өлшем жол биіктігінен асып кетеді және шатасуға әкеледі.

Оқуға болатын типографияда иерархияның бірнеше қабаттары бар. Бұл қабаттар пайдаланушыға бірінші, екінші және үшінші нені оқу керектігін айтады. Сондай-ақ, мәтін өлшемдерінде айқын иерархия бар - бір өлшем тақырыптар үшін, екіншісі негізгі мәтін үшін және үшінші - қосалқы тақырыптар үшін.

Бақылау және кернинг

Бақылау және кернинг жиі шатастырылады. Кернинг — әріптер арасындағы аралықтардың пішініне байланысты таңдамалы өзгеруі. Бақылау - әріптер жиындары, яғни абзацтар немесе мәтіннің бүкіл блогы арасындағы аралықтағы өзгеріс.

Кернинг жиі анықтықты жасау, оқылуды жақсарту және тіпті мәтіннің үлкен бөліктерін стильдеу үшін арнайы элементтерге қолданылады. Бақылау көбінесе тым кең негізгі мәтінді тарылту үшін қолданылады.

Қолданылатын қаріп мәнерлерінің санын шектеңіз

Көптеген жобалар үшін екі немесе үш стиль жеткілікті. Таңдау кезінде қателеспеу үшін қаріптер тобын табыңыз үлкен мөлшерқол жетімді шрифт нұсқалары. Ең жақсы сапалы қаріптер әртүрлі стильдерде келеді - қалың, қалыпты, курсив, қысқартылған, қара және т.б.

Стильдерді араластырыңыз және сәйкестендіріңіз

Мен екі түрлі стильді таңдауды ұсынамын. Ең көп таралған жұп - сериф және санс сериф. Әртүрлі стильдер мен салмақтарды жұптаған кезде биіктігі мен тостаған пішіні бірдей әріптерді іздеңіз («o» сияқты жабық әріптердің ішіндегі бос орын).

Бұл шағын мәліметтер бұл қаріптердің бірге көрінуіне және мәтіннің оқылуына үлкен әсер етеді.

Трансферттер және негіздеме

Көп жағдайда жол үзілімдері мен негіздеме қажет емес. болған жағдайда онлайн мәтін, бұл әдістер тек оның тез ассимиляциясы мен түсінуін қиындатады. Дефис оқуға кедергі келтіреді, ал толық негіздеу көбінесе оқылмайтын пішімдеуге әкеледі.

Қаріптерді өзгертпеңіз

Қаріпті ешқашан өзгертпеңіз. Оны қалыңырақ, жіңішке немесе ұзын етіп жасауға тырыспаңыз. Басқасын таңдаған дұрыс.

Шрифт дизайнерлері қаріптің оқылатынына және стиль талаптарына сәйкес келетініне көз жеткізу үшін көп уақыт жұмсайды. Сізге ештеңе өзгертудің қажеті жоқ. Сіз оны жақсарта алмайсыз және көп жағдайда сіз бәрін бұзасыз.

Егер қаріп сізге сәйкес келмесе, басқа нәрсені іздеңіз. Identifont ұқсас қаріп құралын, ұқсас қаріптерді анықтайтын құралды пайдаланыңыз.

Контраст

Контраст жасау үшін типографияны пайдаланыңыз. Иерархияны жасау үшін әртүрлі өлшемдерді пайдаланғаныңыздай, қаріптің салмағын, түсін және мәнерін өзгерту арқылы көрнекі қызығушылықты жасаңыз.

Түс ең тиімді және бірі болып табылады қарапайым тәсілдерконтраст құру. Идеал контраст - ашық фонда қою мәтін (немесе керісінше). Осы мақсатқа жетуге көмектесетін түстердің шексіз дерлік ауқымы бар. Түс пен типографиямен ойнаған кезде, кейбір түс комбинацияларын, мысалы, ашық көкке ашық қызыл, оқу өте қиын болуы мүмкін екенін есте сақтаңыз.

Қарама-қайшылыққа келетін болсақ, оқылатын мәтінді жасау үшін қарапайым фонды пайдаланған дұрыс. Бірақ егер ол кескіндер немесе үлгілер сияқты көрнекі элементтерді қамтыса, әріптердің өлшемін ұлғайту - бұл фон мен алдыңғы қатардағы мәтін элементтері арасында алшақтық жасайды.

Теру жолағы пішімі

Түр жолағы пішімі мәтінді қамтитын контейнердің өлшемі болып табылады. Бұл бүкіл мәтін жақтауының ені немесе бір баған болуы мүмкін.

Жолдың пішімі маңызды, себебі экрандағы таңбалар саны (бос орындар, арнайы таңбалар және тыныс белгілерін қоса) оқылу мүмкіндігіне әсер етеді. Егер сызықтар тым ұзын немесе тым қысқа болса, пайдаланушының көзі оларды шарлау қиын болады.

Типографиялық стиль элементтерінен: «45 пен 75 аралығындағы таңбалардың кез келген саны бір бағанды жиын үшін қолайлы жол ұзындығы болып саналады. 66 таңбадан тұратын жол (әріптер мен бос орындарды қоса) идеалды болып саналады. Көп бағанды жиын үшін ұзындығы 40-50 таңбалы жол тамаша болар еді».

Бұл кітап шыққан кезде мобильді типография туралы ешкім ойламағанымен, көп бағанды типографияға қатысты ұсыныс әлі де өзектілігін жойған жоқ. Кішкентай экрандары бар жағдайларда тіпті әр жолға 35 таңбаны пайдалануға болады.

Кэрри Казинстің мақаласының аудармасы