Уеб типография Най-добри практики за модерен уебсайт

Ръководство за отзивчива уеб типография, обхващаща всички най-добри практики & правила за размер на шрифта, за да се гарантира, че съдържанието на вашия сайт е четимо & радост за гледане.


Типография най-добрите практики

Художниците имат своите четки. Скулпторите имат своята глина. Уеб дизайнерите имат своите … шрифтове? Както сега има Оливър Ришенщайн знаменито написано: „95% от информацията в интернет е писмен език.“ След всичкото внимателно внимание, което сте отделили на персонализираните графики, икони, красиви менюта и чисти интерфейси на вашия сайт, би било грехота да се пренебрегнете жизненоважния компонент на уеб типографията..

Не се притеснявайте – не е нужно да сте главен дизайнер, за да създавате елегантен и ефективен текст. Придържайки се към някои надеждни указания и принципи, вашата уеб типография ще предаде информацията, която потребителите жадуват по начин, който е лесно четим и обмислен.

Създаване на визуална йерархия

Най-важната цел на добрата уеб типография е създаването на йерархия на съдържание, което визуално преминава от един елемент към следващия. Правилното разграничаване между заглавията, подзаглавията и основния текст, различни тегла и стилове на шрифта и наличието на достатъчно бяло пространство между текстовите блокове са всички фактори, които насърчават безпроблемно четене.

Пример за визуална йерархия на типография

Изграждане на силно тяло

Първият ви бизнес ред е да ноктирате основния си сайт тяло текст, тъй като това е, което посетителите ви ще прекарват по-голямата част от времето си в четене. Вашата цел е да създадете текст, който естествено се движи през големи абзаци, вдъхновявайки здравословен ритъм за дълги участъци от четенето.

  • Най-често срещаният размер на шрифта за Body text е 16px– или още по-добре, 1em (повече за това по-късно).
  • Избягвайте подравняването на центъра на вашия текст, тъй като неравномерните ръбове от двете страни ще направят непривлекателна гледка. Вместо това задайте наляво и надясно марж от контейнера на текста до Автоматичен за постигане на по-желан ефект.
  • Justified текстът работи чудесно за вестници, а не за уеб страници. Характерът на течните оформления може да създаде непредвидими пропуски в разстоянието между думите.
  • Избирам нисък контраст шрифтове над високи. Шрифтове като Didot работи добре за джамбо заглавия или за широкоформатен печат, но високият му контраст между дебели и тънки линии на чертата правят трудно четене при малки размери на уебсайтове.
  • Имайте предвид четливост. В много безсерифни шрифтове главните букви „I” и малките букви „l” изглеждат абсолютно еднакво, което може да създаде ненужно объркване.
  • Оптималното височина на линията текстът на абзаца е между 1,25–1,5 × шрифта. Регулирайте съответно въз основа на избрания от вас шрифт.

Рубрики за успех

За по-добро или по-лошо, повечето читатели вероятно ще прескачат през вашата страница Заглавия без дори да се занимавам с основния текст. Затова е изключително важно да привлечете вниманието им и да настоявате за по-нататъшно четене, като гарантирате, че типографията на вашите заглавия е забележителна.

  • Средният размер на шрифта за текст на заглавието е някъде наоколо 36px– или, още по-добре, наоколо 2.25em (ще стигнем до това).
  • Вниманието трябва винаги да се насочва към Заглавието пред тялото. Уверете се, че текстът на заглавието ви не е надвишен от прекалено гъста тежест на шрифта в тялото.
  • Уверете се, че заглавията ви отговарят на очакванията на читателите. Значително по-големият текст с достатъчно разстояние между дъщерния му абзац означава промяна в темата, докато по-малките заглавия, много по-близки до абзаците, предполагат, че съдържанието е свързано.
  • В случай, че заглавието ви трябва да се превърне в следващия ред, имайте предвид, че оптималното височина на линията за рубрики е по-малко отколкото това, което е за Body text.

Пространството между

Количеството пространство, отделящо елементите на страницата ви, говори много за връзката им помежду си и това е принцип на дизайн, който не може да се пренебрегне. Доминиращите заглавки, заобиколени от бял океан, осигуряват много по-различен контекст от по-малките заглавки, прикрепени плътно към абзаци (не забравяйте, че създаваме визуална йерархия).

По принцип е по-добре да сбъркате, че имате твърде много бяло пространство, отколкото недостатъчно. Чистите оформления с щедро бяло пространство са това, което се предпочита в съвременната мрежа.

Пада в линия

Представете си, че четете текст на 27-инчовия монитор с висока разделителна способност, който се простира докрай в двата края на екрана. Очите ви ще се уморят след само един параграф!

Важно е всеки ред от основния ви текст да бъде ограничен до определен брой знаци, така че очите да останат фокусирани върху централната точка. Популярният консенсус е, че тази магическа мярка за настолни компютри е 60–75 знака. За мобилни екрани, където искаме да избегнем присвити очи и прекалено сгъстен текст, този номер седи наоколо 35–40 знака на ред.

Прехвърляне на скалата

Много е написано по отношение на мащабирането между размера на шрифта Body и Heading. Само какъв е идеалният размер на H2, ако текстът на Body е, да речем, 1em? Определянето на най-естетически пропорционалните пропорции между текста на Body и H1 – H6 заглавия е за щастие нещо, което много типографисти вече са декодирали. Освен това тези математически пропорции трябва да се адаптират и според размера на екрана на потребителя.

Дизайнерът Джейсън Фундаментал предвижда полезна диаграма за това, което той смята, че са най-оптималните размери на шрифта в различни медийни устройства – и аз съм склонна да се съглася с него. По същество, въпреки че идеалният размер на H1 на десктоп може да е 3 × размера на корпуса, на мобилен екран това ще изглежда твърде преувеличено – така че трябва да бъде намален, за да може да се настани за по-малката зрителна площ.

Диаграма с оптимални размери на шрифта на различни медийни устройства

БЪРЗА ЗАБЕЛЕЖКА: Как можете да разберете дали имате добра визуална йерархия? Коси на екрана си докато целият текст не се размие. Ако оформлението изглежда като аморфно петно ​​без разлика между секциите, тогава вашата йерархия може да се провали. Ако обаче можете лесно да различите разделенията между блокове текст, заглавия и ясно да знаете къде трябва да пътуват очите, тогава сте в страхотна форма!

Поддържане на текст отзивчив

Отзивчивият уеб дизайн е съществена практика в наши дни – особено, тъй като все повече и повече хора използват мобилни устройства като основно средство за сърфиране в Интернет. Въпреки че проектирането с проценти, а не пиксели, е променило начина, по който изображенията и полетата се приспособяват към ширината на течността, отзивчивата уеб типография за съжаление остава по-твърдо яйце, което да се спука.

Оптимизирането на размерите на шрифта на множество устройства може да стане зашеметяващо, тъй като трябва да навигирате през няколко медийни заявки, за да насочите целия текст на уебсайта си. Въпреки това, с бърза настройка на избраната от вас единица, по-лесно ще откриете правилните размери на шрифта, които да използвате за всеки тип екран.

Ems Over Pixels

За да опростите типографията на вашия сайт, изкопайте пиксела и започнете да използвате EMS. Ems позволяват по-лесно разбиране на мащабирането между шрифтовете на вашия сайт и по-малките им единици са по-управляеми от двуцифрените числа пиксели.

По-важното е, че с ems всичко е относително към родителския контейнер. Ако зададете височина на линията на контейнер до 1.5em, тогава дори ако трябва да промените размера на шрифта на контейнера, височината на реда ще остане в правилното съотношение. С пиксели ще трябва постоянно да коригирате свойството на височината на контейнера за всяка промяна в размера на шрифта, за да поддържате визуална консистенция.

Този принцип важи за марж, подложка, писмо-отстояние, и повечето други стилове, които прилагате към текста на вашия сайт. Повече не се занимавайте с пиксели върху подплънката на съдържанието ви за всяка медийна заявка – просто задайте първоначалното си състояние в ems и тя автоматично ще се коригира с оригиналните пропорции!

Използване на Ems

Първото нещо, което трябва да направите, е да зададете основната референция на размера на шрифта на вашия сайт. Във вашия стилен лист, въведете това:

тяло {
размер на шрифта: 100%;
}

Това установява относителен размер на шрифта на съдържанието на вашия сайт към 1em, което повечето браузъри интерпретират като 16px. Сега всичките ви размери на заглавията – 2,25ем, 1,5ем и т.н. – са преки кратни на основната линия 1ем.

ВАЖНА ЗАБЕЛЕЖКА: Ems са каскаден– значението на техния размер е спрямо установената стойност на неговия родител. Например: Ако зададете размера на шрифта на Body на 1,25ем и след това размерът на шрифта на детския контейнер е 1,25ем, двата шрифта няма да бъдат с еднакъв размер! По-скоро текстът на детския контейнер ще бъде 1,25 × оригиналния размер на 1,25ем родител.

Още съвети за страхотна уеб типография

Ето още няколко съвета за страхотна уеб типография:

Не прекалявайте

Трябва да ограничите типографията на уебсайта си до 2–3 шрифта най-много. Обикновено това е шрифт за заглавията ви, шрифт за основния ви текст и може би шрифт за подзаглавие, ако е необходимо. Използването на твърде много шрифтове може да създаде объркано и нефокусирано оформление. Времето за зареждане на вашия сайт също може да бъде повлияно, както е обяснено от следващата точка.

Вградете само това, което ви трябва

Обмислете само това, което е най-необходимо за вашия сайт и оставете останалото навън. Ако знаете, че ще имате нужда редовен, смел и курсивен стайлинг за даден шрифт, след това вградете само тези избори и изключете тънък, светлина и черно стилове. Зареждането на повече стилове, отколкото е необходимо, може да доведе до голям удар върху ресурсите на вашия сайт, тъй като всеки отделен стил е отделна заявка за сървър.

Ако не искате да ограничите креативността си по време на фазата на проектиране, продължете напред и вградете всичко; просто не забравяйте да премахнете излишните стилове, преди сайтът ви да излезе на живо.

Ако не можете да го четете, не го използвайте

Този е голям. Докато цъфтящи ръкописен шрифт може да е изкушаващо да се използва, ако има дори и най-малкото объркване дали това е „g“ или „y“, тогава не го използвайте! Нищо не е по-разочароващо за читателя, отколкото да се мъчи да дешифрира нечетлив шрифт.

Предпочитан истински текст над „Lorem Ipsum“

Всеки дизайнер разчита lorem ipsum фиктивен текст за попълване на празни области със съдържание при планиране на оформлението на проекта. Може да се изненадате обаче колко голяма част от въздействието чрез действителното съдържание може да окаже върху външния вид и усещането на вашата типография. „Lorem ipsum“ е напълно без емоция и интелектуално куха; тя не дава реална представа как вашите думи и вашата личност ще бъдат изразени чрез шрифт. Затова включете действителното съдържание във вашия сайт възможно най-скоро, преди да финализирате дизайна на него.

Контраст с фонове

Тъмният шрифт на обикновен бял фон винаги ще осигури най-добра четимост. Белият текст срещу тъмно или замъглено изображение също става популярен в наши дни. Имайте предвид, че фона ви не е прекалено сложен или детайлен, което ще засили текста на преден план.

Пример за лоша типография на текст върху текстов фонПример за лоша типографска практика, използваща фон „текст над текст“.

Сдвояване на шрифтове – като привлича като

Сдвояването на шрифтове с напълно различни личности ще предизвика объркани сигнали. Двете могат да бъдат стилистично контрастни, но в емоционален план те трябва да служат на едно и също послание.

Сдвояване на шрифтове – запазете го в семейството

Най-простото решение често е най-доброто. Понякога най-добрите двойки идват от използването на вариации (сериф, променливо тегло, плоча) в рамките на едно и също семейство Font.

Хипервръзки

Обща и очаквана практика е да подчертаване връзки и премахнете подчертаването на ховър събитията. Когато вървите по този маршрут, уверете се, че подчертаният ви текст е курсив или удебелен вместо да се подчертава, за да се избегне объркване.

Тези дни обаче вместо това закотвеният текст обикновено е оцветен, с преходен ефект, приложен при задържане. От гледна точка на дизайна това е безспорно по-добрият вариант – но не забравяйте да го поддържате последователно!

Някои CSS да знам

Това се отразява на разстоянието между буквите. Полезно за подчертаване на заглавия.

разстояние между букви: x.xxem;

Това се отразява на разстоянието между думите:

интервал между думи: x.xxem;

Това предоставя алтернатива на всички шапки за акцент. Полезно и за съкращения.

вариант на шрифта: малки букви;

Това ще КАПИТАЛИЗИРА ВСИЧКИ ВАШИЯ ТЕКСТ.

преобразуване на текст: главни букви;

Това ще използва главни букви от първата буква.

преобразуване на текст: изписване с главни букви;

Това ще зачеркне текст.

текстова декорация: редове;

Това подобрява показването на шрифтове в съвременните браузъри:

визуализация на текст: optimizeLegibility

Разбиране на типовете файлови шрифтове

Добре е да вградите няколко типа файлове, за да сте сигурни, че шрифтовете ще се зареждат правилно в широк спектър от браузъри. Това са тези, с които трябва да се занимавате най-много:

TrueType

TTF е най-често срещаният формат за Mac и Windows и се поддържа във всички основни браузъри.

OpenType

OTF също е широко поддържан и позволява добавки като малки главни букви и алтернативни знаци, без да е необходимо вграждане на отделен шрифт.

Вграден отворен тип

EOT се поддържа само от Internet Explorer – и ако не се притеснявате за потребителите на стари версии на IE, вероятно е най-добре просто да оставите тази.

Формат на шрифта на Web Open

WOFF – и неговият наследник WOFF2 – са новите крале в града. Подкрепата им в основните браузъри и възможността за компресиране ги превръщат в модерен тип избор на файлове.

Трябва да конвертирате тип файл?

Вероятно ще се сблъскате със ситуация, в която имате само един тип шрифтов файл и трябва по някакъв начин да го преобразувате в друг. FontSquirrel и Font2Web предлагат онлайн инструменти, които ще направят точно това.

заключение

Вече знаехте това съдържание е най-важният аспект на вашия уебсайт. Добре изработеното съдържание заслужава добре изработена типография; не разочаровайте посетителите на сайта с текст, който е трудно за четене или объркващ по структура. С внимателно планирана визуална йерархия, която се придържа към най-добрите типографски практики, вашите творчески мисли също могат да бъдат представени творчески. Щастливо пишете!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me