Типографіка складна
Для початку дозвольте поплескати вас по спині. Ви зайшли настільки далеко і читаєте про друкарню!
Тепер скористаємося моментом, щоб реалізувати безліч речей у тексті, на які ви дивитеся щодня. Тому, перш ніж обговорювати друкарню, поглянемо на текст.
Знайде хвилинку і просто перегорніть деякі з цих красивих дизайнерських колекцій на основі друкарні:
- Awwwards: Typography in Web Design
- Web Design Лідер: 21 Beautiful Examples of Typography in Web Design
- Smashing Magazine: A Journey Through Beautiful Typography In Web Design
- Web3Canvas: 20 beautifully designed Typography Website Inspiration 2013
Бачення
Як і з кольором, для хорошого дизайну з типографікою потрібно використовувати очі. Справді, побачити форму кожного символу. Зверніть увагу на негативний простір між символами. Ви маєте більше контролю над такими речами, ніж ви могли б подумати. І, пройшовши через кілька розділів, я збираюся показати вам це.
Основні інструменти друкарні в CSS
Наш набір основних інструментів складається з наступного:
Властивості шрифту:
- font-family — serif, monospace
- font-size — 18px, 10px
- font-weight — bold, 100
- font-style — italic
- font-variant — small-caps
Властивості тексту:
- text-align — center
- text-decoration — underline, overline, line-through
- text-indent — 50px
- text-shadow — 0 1px 3px red
- text-transform — uppercase
Різне:
- letter-spacing — 5px
- white-space — pre pre
- line-height — .75em
- word-spacing — 100px 100px
Тепер у вас є загальне уявлення про те, що можливо, давайте поглянемо на кілька комбінацій цих властивостей.
Приклади
Приклад 1: Тонкі літери, великі, з інтервалом
Тонкий кольоровий текст на темному тлі, як правило, сприймається так, ніби він більш насичений. style="background-image: linear-gradient(135deg, #723362, #9d223c); color: #fff; background-color: #9d223c; border-radius: .1875rem; margin: 0 .05rem 0 .13rem;padding: 3px 6px;">білий на багряному, ми пішли на font-weight: 300.
>Використання всіх літер у верхньому регістрі може мати сильний вплив, так що застосовуйте це рідко. Одна річ може статися зі словами у верхньому регістрі attribute">letter-spacing призначені в основному для слів у нижньому регістрі. Щоб компенсувати це і додати трохи більше серйозності, ми щедро включили letter-spacing: .4em. /span>.
Властивості letter-spacing та text-align погано поєднуються разом, тому що порожній проміжок додається праворуч до кожної літери, щоб компенсувати це, коли зазначені властивості використовуються спільно, ми додамо padding-left зі значенням let ter-spacing (у нашому випадку .4em).
.typography-example-1 { background-image: linear-gradient(135deg, # 723362, # 9d223c); background-color: #9d223c; color: #fff; padding: 1em 0; font-weight: 300; font-size: 1.8em; text-transform: uppercase; text-align: center; letter-spacing: .4em; padding-left: .4em } 
Приклад 2: Контрастна насиченість і стилі
У наступному прикладі ми покажемо, як два рядки тексту взаємодіють один з одним.
Перший рядок отримує схоже трактування з прикладу 1, але з насиченістю 700. Для контрасту другому рядку дається насиченість 300, курсив і світлий колір #888<span style="background:#888"></span>.
.typography-example-2 { background: #fff; color: #000; border: .5em solid; font-size: 1.5em; padding: 1em 0; text-align: center }
.typography-example-2 .title { font-weight: 700; text-transform: uppercase; letter-spacing: .4em; padding-left: .4em }
.typography-example-2 .author { color: #888; font-size: .7em; font-weight: 300; font-style: italic; letter-spacing: .12em; padding-left: .12em } 
Приклад 3. Налаштування окремих літер
Іноді хочеться трохи розважитися з текстом. Для цього є Lettering.js — невеликий класний інструмент. Але якщо ви готові самостійно обернути кожну букву в <span>, ви зможете робити подібні речі без застосування JavaScript!
.typography-example-3 { border: . 2em solid #ff4136; font-size: 3em; text-align: center; padding: .2em; color: #fff }
.typography-example-3 span { display: inline-block; width: 20%; padding: .8125rem }
.typography-example-3 span:nth-child(1) { background: #ff4136 }
.typography-example-3 span:nth-child(2) { background: #ff851b }
.typography-example-3 span:nth-child(3) { background: #2ecc40 }
.typography-example-3 span:nth-child(4) { background: #0074d9 }
.typography-example-3 span:nth-child(5) { background: #b10dc9 } 
Державна типографія
Сподіваємося, що ці кілька прикладів дали вам уявлення про те, що можливо з різними властивостями CSS. Типографіка — це така ж важлива частина дизайну, тому безліч роздумів і понять пов'язаних з типографікою вкладено в інших розділах. Ми будемо продовжувати досліджувати друкарню в міру проходження.
Практична друкарня
Для отримання більшого задоволення від друкарні подивіться дивовижні ресурси, наведені нижче. Зокрема, погляньте на Butterick’s Practical Typography. Це обов'язково до прочитання всім, хто цікавиться типографікою. "nofollow">Butterick’s Practical Typography