Красива типография в уеб дизайна. Красива типография в уеб дизайн красива типография

Кураторът на ресурсите на шрифтове на типицата Джереми Шоаф избра примери за сайтове с интересни решения за шрифтове и описа техните предимства и недостатъци.

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

Просто дъвка.

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

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

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

Резюме

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

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

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

Това напомняне ще ви помогне с нов поглед към вашите проекти, помислете за нови подходи или да се върнете към по-прост дизайн.

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

Размер и йерархия

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

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

Проследяване и кернинг

Проследяването и кернаните често често са объркани. Kerning е селективна промяна в интервала между буквите в зависимост от тяхната форма. Проследяването е промяна в интервала между набори от букви, т.е., параграфи или всички блокове от текст.

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

Ограничете броя на приложните стилове

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

Смесете и сравнете стилове

Препоръчвам ви да изберете два различни стила. Най-често срещаната двойка е сериф и санс Сериф. Свързване на различни стилове и привличания, потърсете букви със същата височина и форма на купата (пространството вътре в затворени букви, като "O").

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

Прехвърляне и изключване

В повечето случаи низ трансферите и не се нуждаят от нея. В случай на онлайн текст тези техники усложняват само бързото усвояване и разбиране. Трансферите пречат на четенето и пълната сила често не води до нечетливо форматиране.

Не променяйте шрифтовете

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

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

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

Контрастност

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

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

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

Формат на лентата за събиране

Форматът на лентата за набиране е размерът на текста на контейнера. Тя може да бъде ширината на цялата текстова рамка или единствената колона.

Форматът на низ е важен, защото броят на знаците (включително пространства, специални символи и препинателни знаци) на екрана влияят на четливостта. Ако редовете са твърде дълги или твърде кратки, изглежда, че потребителят ще бъде трудно да се движи.

От елементите на типографския стил: "Всеки брой знаци, вариращи от 45 до 75, се счита за задоволителна дължина на струната за набор от колона. 66-символният низ (включително букви и интервали) се счита за перфектно. За мултиколонов комплект, идеалната средна стойност ще бъде низ, дълъг 40-50 символ.

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

Превод на статия Carrie Carsin

Този списък е съставен в съответствие с резултатите от II. 2008. Предишни "хит паради" могат да бъдат намерени и.

Всеки пример е придружен от кратък коментар и натискането на екрана води до оригиналния сайт.

Конференция за семена

Без светкавица, без снимки, без шум; Просто добре стилизиран шрифт и добре написан текст: Истинското доказателство, което само с шрифт може да се получи голям резултат. Бих искал да видя още няколко примера от този вид.

Проектиране на новините.

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

Omniti.

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

Designr.it.

Великолепноактивно лого (всеки знае ли какъв вид шрифт?) И много рафинирани части.

Изглед на дизайна.

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

Wordpress.org & wp 2.5.x admin

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

Ourtype.

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

Палубата.

Друг сайт, който се основава на шрифтове във всичко. Отличен пример за йерархия и маркиране. Кой каза, че "снимката казва повече от хиляда думи"? Не, шрифтът казва по-добре.