В предыдущей части этой серии, мы обсуждали некоторые приёмы и лучшие методы работы с CSS типографией. Давайте ещё больше углубимся в эту тему и изучим некоторые социологические исследования, инструменты, а также рассмотрим примеры превосходной CSS типографии в сети.
Это третья и заключительная часть серии уроков CSS типографии, которая охватывает всё от базового синтаксиса до лучших приёмов и инструментов, касающихся CSS типографии.
- CSS типография: Основы
- CSS типография: Приёмы и лучшие методы
- CSS типография: Примеры и инструменты
Социологические исследования по CSS типографии
Уроки и теория это отлично, но ничто не предоставляет такую ясную картину, как социологическое исследование. Вот небольшая подборка исследований, которая может предоставить вам некоторое реальное понимание веб-типографии.
Southern Savers Case Study: Typography
Serif Fonts vs. Sans Serif Fonts: A Working Case Study
Инструменты CSS Типографии
Ниже представлена коллекция инструментов, наиболее приспособленных к работе с CSS типографией.
Это переделанная CSS сетка от Chris Coyier, составленная для вертикального ритма. Это хорошая отправная точка для любого, кто работает с CSS типографией.
Baseline – это типографский фреймворк, придерживающийся базовой сетки. Он выполняет сброс CSS, базовые стили для HTML текста, веб-форм, и некоторых новых HTML5 элементов.
Этот инструмент имеет drag-and-drop интерфейс для составления типографии, ориентированной на web layout grid. Доступны многие возможности, включая автоматическое математическое масштабирование, так что вам уже не нужно доставать свой калькулятор при работе с CSS типографией.
Выберите шрифты, установленные на вашем компьютере, а затем поиграйте с высотой строк, интервалов между символов и т.д... Этот инструмент покажет вам предварительный просмотр на лету, чтобы вы могли удобно настроить свои стили шрифтов.
FontTester по своему предназначению подобен TypeTester (рассматривался выше). FontTester позволяет вам тестировать различные шрифты для сравнения или противопоставления. Протестируйте различные сочетания и стили шрифтов, а затем добавьте их в CSS.
Typechart показывает различные комбинации шрифтов, с простым выводом CSS кода для каждой комбинации. Это отличный инструмент для быстрого подбора сочетаний и стилей шрифтов.
Вы еще сидите на пикселях? Эта утилита поможет вам конвертировать ваши единицы измерения в em, а также поможет найти значения margins и spacing на основе font size и line-height, которые вы можете задать.
С этим инструментом вы можете изменять line-height, word-spacing, color, style и text decoration любого текста, помещенного в поле ввода. А затем, просматривать результат своих настроек в онлайн-режиме.
Вы когда-нибудь сталкивались со шрифтом в сети и задавались вопросом, что это был за шрифт? С этой утилитой вы можете выяснить, какой шрифт вы увидели, ответив на серию вопросов о его характеристиках. Без конкретного шрифта в памяти, вы можете использовать этот инструмент, чтобы найти шрифт на основе характеристик, которые вам нравятся.
С этим инструментом, просто выберите желаемый font-size в любой из четырёх единиц измерения (px, em, % или pt), и он будет конвертирован в em.
What the Font
Вы можете использовать этот инструмент для получения названия шрифта, по его изображению.
Этот онлайн генератор создаст шрифт на основе образца вашего подчерка. Шрифт может использоваться в живом сайте посредством @font-face (например). Выбор подчерка и создание шрифта бесплатны, но чтобы скачать шрифт, нужно заплатить $9.
Этот инструмент позволяет вам искать шрифт с засечками (serif) по его характеристикам. Если нужный шрифт найден, Serif Font Search предоставит вам его название, а также некоторую информацию о нём.
Font Picker
Font Picker позволяет вам отбирать сотни шрифтов на основе характеристик и стилей, которые вы ищете.
Typekit
За определённую плату дизайнеры могут использовать премиум веб-шрифты на своих сайтах и управлять ими через этот веб-сервис. Большая выгода от использования Typekit заключается в том, что вам не нужно беспокоиться о лицензировании ограничений шрифта, который вы выбрали —, сервис сделает всю работу за вас.
Примеры лучшей CSS типографии
Для вдохновения, вот несколько веб-дизайнов, которые имеют красивую типографию. Мы также кратко обсудим, как используется CSS для создания типографии.
Matt Hamm создал свой сайт-портфолио, опираясь на красивую типографию. Вертикальный ритм дизайна выполнен хорошо, а премиум веб-шрифты управляются через Typekit. Обратите внимание, как у дизайна варьируются capitalization, font size и font styles для создания превосходной визуальной иерархии.
Этот сайт использует несколько различных техник CSS типографии. В названии сайта использована CSS3 text-shadow для создания тонкого эффекта тесненного текста.
Grid Based Web Design
Пользовательский пост блога Design Informer является отличным примером красивой типографии в веб-дизайне. Типография на этой странице придерживается базовой сетки и размеров шрифтов, а стили между различными текстовыми элементами создают отличную визуальную иерархию.
Этот веб-дизайн — пример того, как можно эффективно использовать пользовательские веб-шрифты. Один и тот же шрифт используется и в заголовках и в различных текстовых блоках во всей разметке сайте. Обратите внимание, что первый параграф и заголовок на каждой веб-странице выделен шрифтом большого размера — это есть практическое применение псевдо-элемента CSS :first-child, которое мы рассматривали во второй части этой серии статей.
Различие в размерах шрифтов – это то, что делает этот дизайн «умным» в элементах типографии. Для размеров шрифтов и типографских интервалов в качестве единиц измерения использованы em.
A List Apart
A List Apart всегда считался сайтом с превосходной типографией и читабельностью контента. Это потому, что хорошая типография необходима для сайта с упором на содержимое, такого как A List Apart, где длинные статьи занимают центральную позицию. Разметка демонстрирует отличный вертикальный ритм и сочетание техник CSS типографии и стилей, таких, как центрированный текст, прописные буквы и интересный hover эффект для гиперссылок.
У этого дизайна превосходный стиль текста (в элементах цветов, выборах шрифтов, размерах и интервалах), что приводит к отличной типографской композиции.
Jason Santa Maria используют замену CSS background-image текста и некоторые базовые приёмы CSS типографии, что приводит к превосходной чёткости и читабельности контента. Вертикальный ритм в этом дизайне замечательный.
CSS буквица (которая обсуждалась во второй части этой серии) используется в главном параграфе на главной странице сайта.
Обратите внимание, что шрифтам с засечками (serif) в дизайне уделено больше белого пространства, а шрифтам без засечек (sans serif) меньше. Это, вероятно, было сделано, чтобы создать визуальную иерархию так, чтобы основной контент был на первом плане, а контент боковой панели – на втором.
Заключение
Дизайн веб-типографии требует хорошего понимания основных принципов типографии и практики. С основательным пониманием CSS атрибутов шрифта и текста, типография может быть создана с достаточно красивыми результатами. А эффективные и умные привычки кодирования нужны для понимания того, что CSS типография может, а чего не может сделать.
Эта статья завершает нашу серию статей, посвящённых CSS типографии. Мы надеемся, она помогла вам понять, как работать с текстом в своём дизайне.
- CSS типография: Основы
- CSS типография: Приёмы и лучшие методы
- CSS типография: Примеры и инструменты