Skip to main content

Преглед на основите на типографията

Responsive дизайн - Какво е това и от къде произлиза (Април 2025)

Responsive дизайн - Какво е това и от къде произлиза (Април 2025)
Anonim

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

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

Елементите на типографията

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

Typeface е термин, даден на семейство шрифтове (като Helvetica Regular, Helvetica Italic, Helvetica Black и Helvetica Bold). Всички различни версии на Helvetica съставят пълния шрифт.

Шрифтът е термин, използван, когато някой се отнася само до едно тегло или стил в това семейство (като Helvetica Bold). Толкова много шрифтове се състоят от няколко отделни шрифта, всички от които са подобни и свързани, но по някакъв начин различни. Някои шрифтове могат да включват само един шрифт, докато други могат да включват многобройни варианти на буквите, които съставят шрифтовете.

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

Класификации на

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

  • извивка на буква
  • Безсерифно
  • писменост
  • Непропорционални
  • курсив
  • фантазия

Съществуват и редица други класификации на шрифтове, които са отклонения от тях. Например, шрифтовете "slab serif" са подобни на шрифтовете, но всички те имат разпознаваем дизайн с дебели, хрупкави серифи върху буквите. Serif и sans-serif са двете най-често срещани класификации на шрифтове, които се използват в повечето уеб сайтове.

Анатомия на шрифта

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

На основно ниво елементите на анатомията на шрифта, които би трябвало да знаете, са "капачка" и "х-височина", "подскачащи" и "възходящи".

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

Поникващи и възходящи са частите на буквите, които се намират под и над линията x-height. Това обикновено се отнася до малки букви. Например, буквата "b" има аскеандър (парчето, което се придържа "нагоре" от буквата), докато буквата "p" има десендер (частите, които се "напипят" от буквата).

Разстояние между буквите

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

  • кърнинга: Хоризонталното пространство между отделните букви
  • проследяване: Разстоянието между групите букви
  • водещ: Вертикално пространство между линии тип (това е известно като височина на линията в термините на уебсайта)
  • Мярка: Дължината на редовете на текста
  • Подравняване: Визуално поставяне на текст наляво, надясно, центрирано или обосновано
  • Лигатури: Писма се движат толкова близо един до друг, че техните анатомии се комбинират, като по същество текат една буква в друга

Още елементи на типографията

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

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

"Rag" е неравен вертикален край на блок от текст. Когато обръщате внимание на типографията, трябва да прегледате текстовите си блокове като цяло, за да сте сигурни, че парцалът не оказва влияние върху дизайна.Ако парцалът е прекалено назъбен или неравен, той може да засегне четливостта на текстовия блок и да го разсейва. Това е нещо, което автоматично се обработва от браузъра от гледна точка на начина, по който се обвива тип от линия до линия.

Една дума в края на колоната е вдовица и ако е в горната част на нова колона, това е сирак. "Вдовиците" и "сираците" изглеждат зле и могат да бъдат трудни за четене.

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

Стъпки за проверка на вашата типография

  1. Изберете внимателно шрифтовете, като гледате на анатомията на типа, както и на семейството от типа, в който се намира.
  2. Ако създадете дизайна, като използвате текст със заместител, не одобрявайте окончателния дизайн, докато не видите истинския текст в дизайна.
  3. Обърнете внимание на малките детайли на типографията, като тирета и тирета.
  4. Погледнете всеки блок от текст, сякаш няма думи в него. Какви форми прави текстът на страницата? Уверете се, че тези фигури носят целия дизайн на страницата напред.