Веб 95% typography, или так они говорят.Я думаю, что это очень точное утверждение: мы посещаем сайты в основном с намерением чтения.Это то, что вы делаете сейчас — чтение.Имея это в виду, она не выдерживает рассуждать, что ваша типография должна быть одной из самых рассматриваться аспекты вашей конструкции
К сожалению, для каждого человека, который одержим даже мельчайшие детали типографии, дюжины людей, кажется, равнодушным.Это позор;?, Если вы собираетесь провести время что-то писал, вы не хотите, чтобы она выглядела великим и быть легким для чтения
Творческие и технические Typography
Я не уверен, что эти две категории, отражаются в промышленности, но, на мой взгляд, два основных типа типографии являются creative __ и 9 | technical.
Creative typography предполагает принятие проектных решений, таких как которыми сталкиваются использовать, какие настроения типа должны создать, как это должно быть установлено, каким тоном он должен иметь — Например, она должна быть просторной, просторной и открытой (света) или сокращенной, смелые и жесткие, с меньшим белым пространством (темный)?Эти решения должны приниматься по каждому проекту.Вы, наверное, не будет использовать тот же шрифт на стороне девушки приглашение и некролог.Для меня это творческая типографии: это связанные с дизайном и изменений в соответствии с его application.
Технические typography, как тип теории, определенных правилами и практикой распространяется на приглашений так же, как они делают, чтобы некрологи.Это небольшие правила, которые всегда держите, которые доказали свою работу и не зависит от дизайна.Хорошей новостью является то, что, поскольку они являются правила, даже самые дизайн-оспорено люди могут использовать их и мгновенно повысить качество их текст с болотно-стандарт пиф-tidy.
Мы сосредоточимся на технической тип в этой статье.Мы обсудим тонкости и нюансы небольшой набор правил, в то время как изучение кода для создания them.
Мы узнаем о:
- Как выбрать шрифт face
- Как выбрать шрифт size
- Использование grid
- Разработка measure
- Вертикальный ритм и базовые grids
- Выбор типографских scale
- Как пользоваться надлежащей quotes
- Как пользоваться надлежащей dashes
- Как пользоваться надлежащейellipses
- Как повесить punctuation
- Работа с изображениями в grids
Ярмарка warning: это углубленное статье.Это требует некоторых базовых знаний CSS.Если вы не хотите узнать немного в то время, используйте ссылки выше, чтобы перейти от раздела к section.
Если любой из примеров кода, кажется, из контекста или запутанным, то здесь является окончательным piece., Что мы собираемся создать (просто для справки)
Настройка Вещи Up
Для начала, скопируйте и вставьте в index.html файл и сохранить его на рабочем столе:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Your Name</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>Your Name</h1> </body> </html>
Следующее, скопируйте и вставьте этот (слегка измененный) CSS сброса в вашем style.css листа, и сохранить его на свой компьютер, тоже:
/*------------------------------------*\
RESET
\*------------------------------------*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
background: #fff;
color: #333;
}
Выбор шрифта Face
Во-первых, давайте выберем лицо, в котором установлен наш проект.Существует, как вы знаете, прочную базу веб-безопасных шрифтов на выбор.Есть также удивительные услуги, такие как Fontdeck и Typekit которые используют @font-face добавить нестандартные шрифты в достаточно надежные way.
Мы не собираемся использовать любой из них, однако.Чтобы доказать, что техническое типа могут вносить anything выглядеть лучше, давайте ограничимся типичным шрифта stack.
Давайте использовать стек засечек для этого проекта, потому что технический тип творит чудеса на лицах засечек:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #333;
}
Cambria красивый шрифт, специально предназначенные для чтения с экрана и быть эстетически при печати при малых размерах.Если вы хотите изменить это или использовать без засечек стек, моя guest.
Об использовании Helvetica
Если вы хотели бы использовать Helvetica в стеке, помните, что Helvetica выглядит awful как орган копии на ПК.Чтобы избежать этого, используйте следующий трюк, чтобы служить Helvetica для Маков и Arial к ПК (Вы можете найти более подробную информацию об этом трик в Chris Coyier’ недавней статье Sans-Serif):
html {
font-family: sans-serif; /* Serve the machine’s default sans face. */
background: #fff;
color: #333;
}
Осторожно!Это хак.Она работает, используя по умолчанию системы без шрифта, шрифт для страниц.По умолчанию Mac будет использовать Helvetica и ПК будет использовать Arial.Однако, если пользователь изменил свои предпочтения системе, это не будет иметь место, так что используйте с caution.
Выбор шрифта Size
Оливер Reichenstein автором вдохновляющим article, еще в 2006 году, заявив, что идеальный размер для типа в интернете составляет 16 пикселей: стандартный пользователь агентов.Эта статья проницательный изменил способ я работаю с типом, он хорошо стоит читать.Мы будем использовать 16 пикселей в качестве базового размера, то.Если вы хотите использовать другой шрифт, размер, не стесняйтесь,Но если вы будете с 16 пикселей, ваш CSS должен выглядеть примерно так:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: #fff;
color: #333;
}
Если вы хотите использовать, скажем, 12 пикселей, он будет выглядеть следующим образом:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
font-size: 0.75em; /* 16 * 0.75 = 12 */
background: #fff;
color: #333;
}
Вы останетесь с основная схема (демо) .
Выбор сетки System
Сетки это удивительный инструмент, и это не только для типографских предприятий.Она обеспечивает порядок и гармонию в вашем designs.
Некоторые грид-систем там, на мой взгляд, пойти немного за борт и предлагают 30 или более столбцов, все неловко размера.В этом уроке мы будем использовать Nathan Smith’s 16-столбца 960 Grid System ( demo).960.gs удивительно, ее красота заключается в его простоте.Это идеальный размер для конструкций более узким, чем 1020 пикселей, он имеет большое количество столбцов, а число легко работать.Вы также можете заметить, что 960 Grid System имеет только 940 пикселей полезного пространства.”960″ происходит от 10 пикселей средника на любой side.
Обновление CSS использовать руководство фоне image:
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: url(…/img/css/grid-01.png) center top repeat-y #fff;
color: #333;
width: 940px;
padding: 0 10px;
margin: 0 auto;
}
Теперь вы должны иметь что-то вроде этого:
Выбор Measure
У нас есть размер шрифта, так что теперь мы должны работать наши идеальная длина строки, или “мера”. Роберт Bringhurst пишет в Элементы Типографские Style, что “все, что от 45 до 75 символов широко рассматривается какудовлетворительные длина линии …. “
Мера, которая слишком короткий приводит к глазу, чтобы перейти неловко от конца линии x в начало строки х 1, и меры, которые слишком долго может привести глаз читателя в два раза обратно.Вы можете обойти это несколько выполнив следующие правила:
- В течение более длительного мере, использовать немного больше leading;
- На более короткий мере, использовать немного меньше leading.
Таким образом, мера от 45 до 75 символов является оптимальным для удобства чтения в столбцы текста.Я могу в значительной степени гарантировать, что после того, как вы научитесь этому, каждый массово, слишком длинный измерения вы видите на веб-будет раздражать вас spectacularly.
Вот 69 знаков, хорошая середина между рекомендуемым 45 и 75:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan
Вставить, что на Вашу страницу, и посчитайте, сколько красные колонны оно охватывает.Это, насколько широко ваше мера будет:
Здесь текст охватывает восемь колонн, которая составляет 460 пикселей 960.gs.Обновление CSS следующим образом:
/*------------------------------------*\
MAIN
\*------------------------------------*/
html {
font-family: Cambria, Georgia, "Times New Roman", Times, serif;
background: url(…/img/css/grid-01.png) center top repeat-y #fff;
color: #333;
}
body {
width: 460px;
margin: 0 auto;
}
Если вы выбрали размер шрифта, кроме 16 пикселей, убедитесь, что ваши измерения отражают эту
Вертикальный ритм: Установка Baseline
Ведущий (который рифмуется с “свадьба”) является типографский срок от пути назад, когда типографов вручную установить тип типографской машины и тому подобное.Этот термин относится к акту размещения свинца между строк типа для того, чтобы добавить пространство по вертикали.В CSS, мы называем это line-height.
Линия высота должна быть около 140%.Это не большое количество, чтобы работать, и это только общее правило, поэтому мы будем использовать 150% (или 1.5 em).Таким образом, мы просто должны умножить размер шрифта на полтора, чтобы определить наши leading.
Некоторые общие правила для ведущего:
- С непрерывным копировать, использовать большие ведущей;
- С светлый текст на темном фоне, используют большие ведущей;
- С длинной длины строки, используйте большую ведущий;
- С большими x высоты, используйте большую ведущий;
- С короткой очередью информацию, использовать небольшие leading.
Если вы используете 16-пиксель размером шрифта, то ваша высота строки будет 24 пикселей (16 пикселей × 1,5 EM = 24 пикселей).Если вы используете 12-пиксель размером шрифта, то ваша высота строки будет 18 пикселей (12 пикселей × 1,5 EM = 18 пикселей).
The Magic Number
Для математике на основе советов по типографике, проверить это видео на веб-type Тим Браун.Веселье начинается в 13:35
Значение пикселя для высоты строки (24 точек) теперь будет ваше магическое число.Это число означает everything к вашему дизайну.Все линии высоты и полей будет этот номер или несколько из них.Я считаю, это полезно всегда иметь в виду и придерживаться it.
Теперь, когда мы знаем, что наша общая высота линии, мы можем определить базовые сетки.Сетка в настоящий момент выравнивается только элементы в y оси (вверх и вниз).Сетка базовых линий выравнивается в x оси, тоже.Мы должны обновить наши фоновое изображение теперь в 24 пикселей в высоту и иметь твердое 1-пиксельных линий в нижней части, как this.
Опять же, если вы выбрали размер шрифта 12 пикселей и ваша высота строки стали 18 пикселей, то фоновое изображение должно быть 18 пикселей в высоту с твердой горизонтальной линии на 18-й строке pixels.
Ваш CSS должен выглядеть примерно так:
html {
…
}
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
}
Ваша страница должна выглядеть примерно так:
Как вы можете видеть, текст парит чуть выше горизонтальной направляющей.Это не значит, что все, что установлена неправильно, это просто смещение.Это может помешать процессу, так что либо настроить обивка на body перейти на страницу или изменить положение фонового изображения, чтобы переместить его вокруг немного.Некоторые ковыряние в Firebug говорит мне, что CSS должно быть следующим:
html {
…
background: url(…/img/css/grid.png) center -6px repeat-y #fff;
…
}
Что дает мне следующее — и все выстраивается в линию отлично:
Сейчас, let’ S вернуться к магическим числом.Может быть, вы думаете, что текст сидит слишком близко к верхней части экрана?Ну, чтобы исправить это, мы будем двигаться текст страницы вниз на величину, кратную, что магическое число — скажем, 72 (3 × 24 = 72 пикселей).Теперь настроить CSS следующим образом:
body {
width: 460px;
margin: 0 auto;
line-height: 1.5em;
padding-top: 72px;
}
Замените свой номер магии, если вы используете другой шрифт size.
Мы должны получить это:
Потребовалось некоторое делать, но наш холст готов, наконец,
Настройка Scale
Хорошо, наши сброс сделал нашу h1 и p такого же размера.Нам нужно, чтобы получить некоторые основные стили шрифтов там.Добавить этот блок кода в конец вашего CSS:
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: 24px;
font-weight: bold;
}
/*--- PARAGRAPHS ---*/
p {
margin-bottom: 24px;
}
Признаем ваше магическое число?Let’ S обновите страницу и посмотреть:
Ваше магическое число теперь будет по умолчанию margin-bottom значение для всех элементов.Это, в сочетании с линией высоты, будет держать все на базовой grid.
Что мы теперь должны, однако, некоторые различные размеры шрифта для заголовков.Мы должны типографских масштабе.Я предлагаю так:
- H1 = 24 пикселей,
- H2 = 22 пикселей,
- H3 = 20 пикселей,
- H4 = 18 пикселей,
- H5 = 16 пикселей,
- H6 = 16 pixels.
Многие люди работают в пикселях, но я предпочитаю, работающих в EMS.Ет пропорционально текущему размеру шрифта: 1 EM в 72-точка Грузии 72 очков и 1 EM в 8-точка Garamond составляет 8 points.
Так что, если наша база размер шрифта 16 пикселей (1 ЭМ), то 24 пикселей будет 1,5 EMS (24 ÷ 16 = 1.5).Если мы будем продолжать, мы в конечном итоге с:
- H1 = 24 пикселей → 24 ÷ 16 = 1,5 ems
- H2 = 22 пикселей→ 22 ÷ 16 = 1,375 ems
- H3 = 20 пикселей → 20 ÷ 16 = 1,25 ems
- H4 = 18 пикселей → 18 ÷ 16 = 1,125 ems
- H5 = 16 пикселей → 16 ÷ 16 = 1 ems
- H6 = 16 пикселей → 16 ÷ 16 = 1 ems
Далее, мы должны убедиться, что линия Высота каждого составляет 24 пикселей.Это означает, что h1 на 24-точка размер шрифта будет иметь высоту строки из 1 ет.Вот математике:
(Магическое число) ÷ (размер шрифта) = (высота строки)
Использование наших масштабов, полное CSS для заголовков (в том числе математика) составляет:
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: 24px;
font-weight: bold;
}
h1 {
font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
}
h2 {
font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
}
h3 {
font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */
line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */
}
h4 {
font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */
line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */
}
h5, h6 {
font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
}
Там наш типографский scale.
Теперь, чтобы проверить это, давайте попробуем следующую разметку:
<body> <h1>Your Name</h1> <h2>Your Name</h2> <h3>Your Name</h3> <h4>Your Name</h4> <h5>Your Name</h5> <h6>Your Name</h6> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan</p> </body>
Вы могли заметить, что не все строки текста сидеть идеально по линии сетки, но это нормально, потому что они все честь базовой!Это то, что я получаю:
Вы думаете, что что-то пошло не так.Но если вы посмотрите, в этом пункте лежит просто отлично, как только вы вернуться к нормальному размеру шрифта.Чтобы быть честным, я не совсем уверен, что причины этого эффекта, числа мы использовали все правильно, и вертикальный ритм в целом остается неизменным, но отдельные строки текста больше, кажется, смещение от базового уровня.Я думаю, что это может быть связано, в частности, к установлению символы в их EM box.
Что Следующий
Глава обратно в разметке и удалите все, кроме h1.Теперь мы готовы сделать что-то полезное.Давайте немного “ О you”-page.
h1 это имя.И разметка может быть просто:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Harry Roberts</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>Harry Roberts</h1> </body> </html>
Сейчас let’ добавим немного вводный параграф о себе.Шахта гласит:
<p>Hi there. My name is Harry Roberts. I am a Web developer and type geek from the UK. I love all things Web dev, and I am a huge advocate of Web standards and proper ethics.</p>
Эксперимент Давайте с изменением размера шрифта произвольно.Доб …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров