Анализ типографии в Интернете

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Типография - один из самых, если не самых важных аспектов веб-дизайна. Некоторые утверждают, что это занимает до 95% веб-дизайна, поэтому почему мы часто пренебрегаем его значением? Читатели, которые приходят на ваш сайт, часто решат, остаться или остаться в соответствии с вашими типографскими выборами. В конце концов, они пришли сюда, чтобы читать в первую очередь. Подумайте об этом на секунду: если контент действительно является королем, логическую типографию следует рассматривать как королеву.

На самом деле даже некоторые названия шрифтов предполагают, что классификация; Futura, Optima, Times New Roman (хорошо, это, наверное, чувак), Вердана, Люсида, Джорджия, Хельветика ... В этом нет сомнений, Типография - королева. Поэтому ей также нужно правильно одеваться перед выходом: она должна надеть кернинг и отслеживание, может быть, другой шрифт-вариант, и уже она выглядит как настоящая леди.

Не знаете, о чем я говорю? Хорошо, продолжайте читать.

Зная ваши (без) засечки

Прежде чем приступить к этой статье, и особенно если у вас нет большого контакта с типографикой, я предлагаю вам заполнить пробелы в ваших типографских знаниях из Typedia, особо отметив классификацию Typeface и анатомию шрифта, который вам хорошо послужит при создании собственных шрифтовых стеков и спаривания шрифтов.

После того, как вы закончите читать две статьи о Typedia, вернитесь сюда, чтобы мы могли закрепить ваши новые знания Typographic и подготовить их к следующим главам этой статьи.

Ужесточение мудрости #1: Шрифты относятся

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

Конкорд

Согласованные отношения - это не без острых ощущений, где два шрифта очень похожи по характеристикам. Он также может быть одним шрифтом в нескольких стилях и / или размерах.
Контраст

Когда шрифты сильно отличаются друг от друга, появляется контраст. Обычно полезно стремиться к контрасту, например, между засечками и шрифтом без засечек.
Конфликт

Два (или более) шрифта, которые имеют разные характеристики, которые по-прежнему достаточно похожи, чтобы создавать проблемы на странице, находятся в конфликте. Обычно вам следует избегать такого рода отношений.

Contrasting, conflicting and concording relationship between fonts.

Ужесточение мудрости #2: Шрифты отличаются

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

Это особенно касается Интернета, где искусство создания и применения стеков шрифтов очень важно. Вам не нужно выбирать точно такие же шрифты для резервного копирования, но справедливо сказать, что шрифт старого стиля, такой как Garamond, должен быть подкреплен другим шрифтом старого стиля с разумно подобными характеристиками (Caslon,Баскервиль, Times, например).

Adobe Garamond Pro, Garamond Premier Pro and Georgia side-by-side

Хотя они все засечки, Грузия, Garamond и Adobe Garamond Pro (размер 200 точек в примере выше) выглядят совсем по-другому.

Ужесточение мудрости #3: Не каждый шрифт-подходит для всех ситуаций

Современный шрифт, такой как Bodoni Condensed или Bodoni Bold, является отличным выбором для заголовков, тогда как, скорее всего, это будет плохой шрифт для обширных строк копии тела, где он только отвлечет читателя от контента. Старый стиль, подобный Garamond (I ♥ Garamond), намного лучше подходит для этих ситуаций.

Не дизайнеры часто делают бедные решения при выборе шрифтов для разных случаев, и - хотя я собираюсь пропустить лецию Comic Sans - вы должны быть осведомлены о том факте, что это не всегда удобно использовать, скажем, Грузия для тела копии. Это также не всегда плохо, чтобы использовать Arial как ваш предпочтительный шрифт;но рассмотреть какое сообщение вы пытаетесь передать через ваш типографию.

Учиться у лучших

Эта статья не является прежде всего витриной, но всегда интересно наблюдать за тем, что сделали другие талантливые дизайнеры, чтобы сделать их (клиентские) веб-сайты восхитительными. Мы посмотрим, что можно сделать с тщательным рассмотрением оформления шрифтов, а также сплошными шрифтами и умными типографическими вариантами.

(P.S. Если вы хотите увидеть другие примеры красивой типографии на линии, просмотрите архивы Typesites. Там не так много контента, но они охватывают некоторые очень хорошие сайты.)

Шрифты Websafe: A List Apart (список шрифтов врозь)

A List Apart, careful consideration to Webfonts

A List Apart показывает, как шрифты Websafe могут выглядеть хорошо, когда им хватит мысли.

Вердана - самый скучный шрифт, который вы можете использовать? Нет, если вы спросите Джейсона Санта-Мария. Он умел использовать силу Верданы (X-height), чтобы сделать копию тела довольно маленькой по размеру для достойного, элегантного вида, которого заслуживает A List Apart. Небольшой размер также делает его приятным для чтения в долгосрочной перспективе.

Грузия в основном используется для акцента на определенных элементах страницы и в виде экранного шрифта. Из других заметных дизайнерских решений буквы верхнего регистра невелики по размеру и имеют положительную букву для удобства чтения и лучшего внешнего вида.

Стеков шрифтов: Джон Тан

JonTangerine.com, typographic excellence

Джон Тан, внимание к деталям приносит Типографическое совершенство.

Джон Тан, как и Хой Вин и Даниэль Молл, также следует культу черно-белого минималистского дизайна с тщательно размещенными брызгами апельсина. Несмотря на отсутствие волнения в выборе цвета, вы можете сказать, что Джон компенсирует это, уделяя особое внимание его типографским выборам. Файл CSS Jontangerine.com содержит более 250 различных деклараций для всей микро-типографии!

Основная копия тела установлена в прекрасной Грузии, а сосредоточенные заголовки появляются в стеке шрифтов Times с Баскервилем и Палатино:

1	font-family: baskerville, 'palatino linotype', 'times new roman', serif;

В других областях типографский «цвет» достигается с использованием разных вариантов шрифтов, различных оттенков черного и превосходного стиля шрифта. Определенно один из лучших сайтов, ориентированных на типографию!

@ font-face Вложение: информация Highwayman (разбойник)

Информация Highwayman (разбойник) встраивает Justus, бесплатный шрифт.

Вы, наверное, много слышали о внедрении @ font-face с CSS в течение последних нескольких месяцев. Хотя Internet Explorer имеет аналогичную технику с момента ее четвертой итерации (нам стыдно признаться в этом), только в 2009 году, когда все пять больших браузеров реализовали @ font-face (правильный путь), - мы начинаем интенсивно говорить об использовании не-сетевые веб-сайты онлайн.

Есть, как вы знаете, несколько существенных недостатков этой техники (в первую очередь, проблемы с авторским правом), но если вы найдете подходящий шрифт для своих нужд, у вас есть все шансы улучшить способ чтения читателями вашего сайта. D. Bnonn Tennant (Information Highwayman) решил использовать Justus для копирования тела, что довольно хорошо контрастирует с sans-serif background element («привлекательный магнум») и помогает в достижении «изношенного» эффекта на сайте.

Typekit: Эллиот Джей запасам

Slabby FF Tisa отлично подходит для веб-сайта Эллиота.

Эллиоту нравится использовать шрифты Slab-Serif, которые представлены в его превосходном журнале 8 лиц на типографии (очень рекомендую), с FF Unit Slab и его собственным веб-сайтом, где FF Tisa Web Pro встроена с использованием услуги по вставке шрифтов Typekit.

На сайте не так много типографского стиля, как, например, у Джона Тан; однако он отлично справился с выравниванием и цветом, которые также никогда не следует упускать из виду и являются важными компонентами хорошей типографии.

Замена изображения и sIFR: Squared Eye (квадрат глаз)

Squared Eye использует замену текста sIFR Flash.

Несмотря на то, что они быстро становятся «старыми» технологиями замещения, вместо заменяемого текста (как Cufón, так и вручную вставленных изображений) вместо обычного текста важны Flash и замененный образ изображения, которые важны для совместимости с несколькими браузерами на сайтах, чьи посетители не пользуются преимущественно современными браузерами,а также в случаях, когда конкретный шрифт недоступен по той или иной причине (например, проблемы с авторским правом).

Squared Eye фокусирует внимание на разных уровнях заголовков с помощью sIFR, а также с вручную вставленными изображениями. Он использует красивую сальнированную серию Archer в гармонии с стеклом шрифтов Lucida для современного, но все же элегантного внешнего вида.

Наделение наших знаний на хорошее использование

Хотя я собираюсь предоставить несколько стеков шрифтов, которые вы можете использовать в своих проектах, рассмотрите следующий пример как «обучение» для создания собственных стеков шрифтов. Там уже много других сайтов, которые предлагают множество готовых решений для текста как для текста, так и для текста.

Как говорится: «Дайте человеку рыбу, и вы накормите его на день. Научите человека ловить рыбу, и вы кормите его на всю жизнь».

Захват баз: ваши читатели

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

Например; Мэтью Смит (Squared Eye), вероятно (по праву) предсказал, что у большей части его аудитории не будет такого шрифта, как Archer, установленного на их компьютерах, и решил внедрить его с использованием замены шрифта Flash (по сравнению с Archer, ~ 97% пользователей установили Flash) ,

Всегда сначала разрабатывайте основные Webfonts, а затем постепенно улучшайте их с помощью стеков шрифтов)

Для получения дополнительной информации о шрифтах, поставляемых с различным программным обеспечением, просмотрите 24 шрифта Ways, Fluid Web Type и Apaddedcell. Вы также можете найти обширную документацию Microsoft о шрифтах, поставляемых вместе с их продуктами, а также ознакомиться с их типографическим отделом, полезным чтением.

Обратите внимание на маленькие вещи

Когда дело доходит до создания стеков шрифтов, вам нужно будет рассмотреть несколько переменных при определении того, что делает шрифты отличными друг от друга (помните сравнение Georgia-Garamond-Garamond выше?). Это, опять же, сводится к вашему опыту и знакомству с разными категориями шрифтов. Вам нужно научиться замечать не только то, как представлены засечки (они наклонены или прямые? Или они не существуют?), Но также небольшие (er) различия между двумя похожими шрифтами.

Подумайте, как они общаются друг с другом, их x-высоты и читаемость на небольших размерах, а также их форму и направление. Даже если это звучит, возможно, запугивает прямо сейчас, помните, как практика делает совершенным.

Пример: Ibis Display и Archer, хотя и слюнные засечки по категориям, вероятно, не станут хорошей парой из-за существенной разницы в представлении их засечек и заметных толстых / тонких переходов на Ibis по сравнению с однокамерным лучником.

Написание пример стека шрифтов

Я уже упоминал, что мне нравится Гарамонд. Поэтому я собираюсь создать шрифт шрифта Times New Roman, который является безопасным для Web шрифтом, наиболее близким к вышеупомянутому шрифту oldstyle.

Я хотел бы упомянуть, что Garamond из-за его низкой X-высоты, вероятно, не самый лучший выбор при проектировании для отличной читаемости на экране (в конце концов, это было сделано не для экранной презентации в первую очередь), но это нормально, если используется на достаточно высоких размерах шрифта (на мой взгляд, оптимальным является 16-17 пикселей / 1 г гарамонд).

В оптическом масштабировании, как его называют, меньшие размеры текста обычно имеют большую высоту x, более широкую ширину стебля и меньшую типографическую контрастность стебля, а большие размеры дисплея имеют меньшие высоты x с большим изменением ширины штока.
– MSDN блоги

Как наше семейство шрифтов будет деградировать, если Garamond недоступен (в примерах Garamond синего цвета).

В соответствии с 24 Ways 'Font Matrix, Garamond поставляется с Office Word 2007 для Windows и Word 2004 для Mac, что означает, что он доступен для огромного процента посетителей. Для тех, у кого его нет, я предоставил резервную копию в виде Caslon от Adobe,Garamond и Minion Pro, которые поставляются вместе с Creative Suite (обратите внимание, однако, что все эти шрифты также доступны для индивидуальной загрузки, я упоминаю о программах, которые они отправляют, потому что, полагаю, многие из вас купили их с помощью программного обеспечения Adobe ).

Я также решил использовать Crimson text из репозитория Google Webfont, чтобы обеспечить достойный резерв перед Times. Окончательный стек шрифтов выглядит так:

1	font-family: Garamond, Adobe Garamond Pro, Minion Pro, Adobe Caslon Pro, Crimson Text, Times, serif;

Этот стек шрифтов должен использоваться исключительно на более высоких размерах шрифтов, особенно потому, что Windows печально известна для плохого рендеринга шрифтов.

Chrome с настройками по умолчанию (слева) и Safari с сглаживанием шрифтов, установленным в Medium (справа). Сначала он выглядит тонким, но это сильно влияет на читаемость в меньших размерах.

Если вы ищете чрезвычайно хорошую читаемость на экране, благородная Грузия и Verdana с высокой высотой x-высотой (оба шрифта с девяностых, сделанные специально для рендеринга экрана) обеспечат более приятные результаты в шрифтовых стеках.

Например, мы могли бы воспользоваться сходством между засечками Lucida (Fax и Bright, которые также поставляются с MS Word) и затиром Droid из репозитория Google Webfont, чтобы сделать читаемый шрифт-стек с большой x-высотой:

1	font-family: Lucida Bright, Lucida Fax, Droid serif, Georgia, Serif;

В очередной раз веб-сайты Google приходят к действию перед общим решением, главным образом потому, что Droid serif намного ближе по внешнему виду к Lucida, чем к Georgia и Times соответственно.

Очень похожий стек, основанный на Verdana, также будет содержать три почти равных Lucida sans-serifs (Grande - корабли с Mac, Sans, Sans Unicode):

1	font-family: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Verdana, Sans-serif;

Обратите внимание на то, как замещающие шрифты имеют схожие характеристики, в частности, как буква g практически одинакова для шрифтов, и как о напоминают круг, а не эллипс. Как и в большинстве sans-serifs, они монопольно и не имеют толстых / тонких переходов (Optima, например,не является монослоем, что затрудняет сопряжение с другими шрифтами).

Будучи придирчивым

Хотя создание разумных стеков шрифтов важно, чтобы обеспечить отличную типографию, вам нужно будет сделать «лишние десять процентов» и обеспечить типографский контраст, используя разные варианты шрифтов, веса, направления и заботу обо всех микро типографских методах.

Джон Тан с особой тщательностью берет на себя микро-типографию.

Например, Джон Тан использует некоторые селектора CSS3 для создания большого визуального эффекта.

.entry-content p:first-line, 
.entry-content img + p:first-line {
  font-variant: small-caps;
	font-weight: 900;
	text-indent: 0px;
}

Он использует центрированные и выделенные курсивом заголовки в блоге в стеке шрифтов Times. Это, в сочетании с оправданным текстом и его минималистичным дизайном, обеспечивает очень приятный опыт чтения. Помните: маленькие вещи имеют значение.

Absolutely astonishing headings on jontangerine.com

Смешивание с жирным шрифтом, прописными буквами и положительным интервалом между буквами для небольших заголовков во много раз обеспечит гораздо лучший опыт и контрастность, а также более четкое разделение на копию тела, чем просто другой шрифт. Саманта Уоррен очень хорошо изучила типографическую иерархию,и я предлагаю вам прочитать ее статью для более широкого понимания темы.

Lucida and Garamond, contrasting and conflicting

Контраст улучшает разделение. Можете ли вы заметить второй заголовок?

Семнадцатый пиксель Garamond для копии тела и 15px Lucida Sans для подзаголовка уровня 4 (h4) действительно выглядят совсем по-другому в двух верхних ситуациях, только из-за небольшого количества изменений в нашем CSS:


body { 
	font: 17px/1.4 Garamond, Adobe Garamond Pro, /* ... (look at the Garamond-based stack above) */ serif;
	color: #333; 
	text-align: justify; 
} 

h4#uppercase { 
	text-transform: uppercase; 
	font: bold 14px/1 Lucida Grande, Lucida Sans, Verdana, sans-serif; 
	margin-top: 15px; letter-spacing: 1px; 
}

h4#normalcase { 
	text-transform: none; 
	font-weight: normal; 
	letter-spacing:0; 
}

Выделенные курсивом амперсанды являются еще одним из тех методов, которые доказывают, как «мелочи имеют значение» (обратите внимание, однако, что не все шрифты имеют «специальные» амперсанды):


.amp { 
	font-family:Adobe Caslon Pro,Garamond, Palatino Linotype, Bell MT, Minion Pro, Garamond, Constantia, Goudy Old Style, High Tower text, serif;
	
	/* The font-stack above contains some font-families that
	have nice ampersands. You should pick a couple that suit your
	needs on a particular website, rather than use all.
	For instance, Caslon, Palatino and Baskerville do a nice job 
		most of the time. */
	
	font-style: italic; 
	line-height: 0; 
}

Если вы хотите автоматизировать использование модных амперсандов (вставляя их в соответствующие классы, а также с помощью некоторой расширенной типографской справки), я предлагаю посмотреть плагин WP-Typography для Wordpress.

Дополнительное расширение JavaScript

Мы могли бы еще больше улучшить наш пользовательский опыт, улучшив сайт с помощью простого JavaScript, чтобы проверить, имеет ли она определенный шрифт, установленный в ее системе. Тогда просто вопрос выбора подходящего резервного шрифта, если шрифт недоступен (т. Е. Увеличить размер шрифта, чтобы сделать другой шрифт более читаемым, использовать замену изображений,загружать дополнительные шрифты и т. д.).

Обратите внимание, что вам все равно следует учитывать тот факт, что небольшой процент пользователей просматривает веб-страницы с отключенным JavaScript.

Вы могли бы, возможно, добавить класс noscript в тело, если JavaScript отключен и соответствующим образом подготовить для него разумную типографику.

Тем не менее, существует несколько, по сути, методов обнаружения того, установлен ли конкретный шрифт в системе пользователя. Я собираюсь использовать слегка измененную версию кода Лукаса Смита:


function testFont(name) {
    name = name.replace(/['"<>]/g,'');

    var	body  = document.body,
		test  = document.createElement('div'),
		installed = false,
		template =
			'<b style="display:inline !important; width:auto !important; font:normal 80px/1 \'X\',sans-serif !important">mmmmmwwwww</b>'+
			'<b style="display:inline !important; width:auto !important; font:normal 80px/1 \'X\',monospace !important">mmmmmwwwww</b>',
		ab;

    if (name) {
        test.innerHTML = template.replace(/X/g, name);

        test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';

        body.insertBefore(test, body.firstChild);

        ab = test.getElementsByTagName('b');

        installed = ab[0].offsetWidth === ab[1].offsetWidth;

        body.removeChild(test);
    }

    return installed;
}

После вставки кода в ваш файл JavaScript вы можете просто проверить, установлен ли конкретный шрифт на компьютере пользователя с помощью условных операторов:


if (testFont("FontName")) 
	// Do stuff if the font is installed
else
	// Do stuff if the font isn't installed, i.e. load Cufón replacement

Одно из наиболее интересных применений этого метода, возможно, связано с файлом загрузки шрифтов (@ font-face, Google Webfonts ...), если наши предпочтительные шрифты недоступны в системе пользователя. Таким образом, мы повышаем производительность и не заставляем пользователя загружать дополнительные 30 кб без всякой причины:


if (!testFont("Lucida Fax") && !testFont("Lucida Bright") && !testFont("Droid serif")) {
 
  var head = document.getElementsByTagName("head")[0];         
  var webfontLink = document.createElement('link');
  webfontLink.rel = 'stylesheet';
  webfontLink.href = 'http://fonts.googleapis.com/css?family=Droid+serif'; 
	// now we have <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+serif">
  head.appendChild(webfontLink);
  
}

Дополнительная информация и ресурсы

Отбрасывание типичных загрузок локальных шрифтов и отображение их в предпочтительном тексте. Может быть немного интенсивным на компьютере.
Улучшенные стеки шрифтов CSS, от Unit Interactive. Старичка, но goodie, предоставляющая образцы шрифтов, подходящие как для заголовков, так и для копирования тела.
Образец шрифта веб является отличным инструментом для тестирования различных шрифты локально. Вы также должны прочитать, поддерживая список помимо статьи.
50 полезных инструментов и ресурсов для типографии от Smashing Magazine
Конструкторский дизайн не дизайнерского дизайнера, который охватывает основные принципы типографии и дизайна для визуальных новичков, простое и быстрое чтение. Вам может показаться полезным, что все шрифты в книге четко обозначены, поэтому ожидайте узнать, как довольно быстро дифференцировать их по типу и категории.
Уже знаете свои основы? Попробуйте элементы типографического стиля, необходимые и превосходные для всех дизайнеров, рекомендованные некоторыми из лучших дизайнеров.

♠ ♣ ♣ ♠ ♣ ♣ ♠ ♣

Я надеюсь, что теперь у вас есть лучшее понимание типографии в Интернете. Там определенно больше, и я буду рад услышать, что вы можете сказать об этом в комментариях!