Перед стартом

Давайте определим стартовую точку. Мы начнем с создания небольшой веб-страницы для которой используем вот этот код:

<h1>Web Typography <span>A Demo For Beautiful Typography on the Web</span></h1>
<div class="meta">An <span>Article</span> by <span>Matt Ward</span></div>
<div class="body">It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully. Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo - which is entirely driven by CSS - is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.Created: May 13, 2010</div>

Результат вы можете видеть на скриншоте:

На картине обычный себе текст как и должен быть для заданного HTML, он почти не стилизован, хоть и выглядит вполне прилично. Но то ли еще будет!

Шаг 1

Начнем с заголовка. Определим шрифт, размер, цвет, добавим тень, изменили интервал между символами:

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

Вот что у нас вышло:

Шаг 2

Обратите внимание на изначальный текст. В заголовке мы выделили подзаголовок (с помощью span), вот им и займемся:

h1 span{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 0.6em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;
}

Заголовок полученные на первом этапе выглядел тяжеловесно. Благодаря тому что мы выделили подзаголовок оформленный более «легким» шрифтом Verdana (кроме того мы отказались от тени, плюс интервал между символами стал снова равен Оem), наш текст преобразился:

Шаг 3

На этом и следующем шаге мы займемся метаданными (в нашем случае данными об авторе):

.meta{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

Мы снова вернулись к шрифту Georgia, но на сей раз он невесомый, практически прозрачный (обратите так же внимание что мы добавили к rgb канал прозрачности «а»). Данные об авторе отделены от основного содержания серой линией:

Шаг 4

Информация об авторе уже выглядит неплохо, но давайте немного усложним:

.meta span{
  text-transform: capitalize;
  font-style: normal;
  color: rgba(69,54,37,0.8);
}

Что мы сделали? Вычленили «Article» и «Matt Ward», сделали их начертание обычным, первую букву заглавной (с помощью свойства text-transform: capitalize;) и немного изменили прозрачность:

Шаг 5

Ну вот мы и дошли непосредственно до основного контента. Исторически процесс создания колонок (столбцов) силами CSS был делом непростым. Создавать их с помощью таблиц – решение тоже не самое изящное. К счастью, в CSS3 появились элементы благодаря которым проблема решается без особого труда:

.body p{
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
}

Мы задали количество колонок, расстояние между колонками, стиль текста:

Шаг 6

Сделаем над нашими колонками что-то вроде анонса:

.body p:first-child{
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
}
 
.body p:first-child:first-line{
font-weight: bold;
}

Вот что у нас получилось:

Обратите внимания на то, что еще одни стиль (тот что делает первую строку анонса жирным) добавлен умышленно, чтобы показать что вы можете пойти дальше. В большинстве случаев такой прием, конечно же, излишен.

Шаг 7

Все что нам осталось – поработать над нижними метаданными (дата):

date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-top: 1px solid rgba(69,54,37,0.2);
  display: block;
  padding-top: 0.5em;
  margin-top: 2em;
}

Результат:

/p>

На этом я думаю можно остановиться. “Вживую” результат можно посмотреть на этом демо-сайте – по моему выглядит замечательно. Автору данного уроке огромная благодарность. Данный туторил возможно и не демонстрирует всех возможностей CSS3, тем не менее, даже те свойства которые мы использовали позволяют добиться на экране монитора уровня типографики достойного газеты или журнала.

P.S. В интернете для привлечения аудитории контекстная реклама в Google, Yandex может вполне оказаться хорошим методом.
Для хорошего имиджа нужны несколько составляющих, одной из них могут быть копии швейцарских часов известных марок которые вы можете заказать в интернет магазине, шикарные часы.
Тем, кому надоело носить очки, советуем попробовать контактные линзы которые нисколько не уступают в качестве зрения, но при этом вообще не заметны.

© Дизайн Мания, 2011. | Комментариев - 4 | Категория Верстка, Типографика.

Интересные статьи по теме

• Текстовые эффекты с помощью свойства text-shadow в CSS3 (5)
• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (2)
• Фон для сайта с картинкой на весь экран (background-size) (6)
• Школа W3 Schools для веб разработчиков (3)
• Уроки верстки – CSS подмена текста картинкой (7)

Когда «колдуешь» над новым макетом обычно содержимого еще нет, в то время как оно уже требуется. Требуется потому что без него сложно оценить то что у тебя получается и как будет выглядеть впоследствии. К тому же бывает делаешь не для себя, а для кого-то и этому кому-то хочется посмотреть промежуточные стадии.

У каждого веб-мастера есть на этот случай собственное решение. Кто-то берет куски текста с любого подвернувшегося источника — текстовые файлы, сайты попадающиеся под руку и так далее. Это способ имеет изъян — если вы делаете макет для кого-то, не хорошо когда в качестве подстановочного текста используется ваш «квартальный отчет» или что-то в этом роде.

Гораздо опрятнее будет использовать стандартную «рыбу» вроде «Lorem ipsum», которая не содержит смысла и не отвлекает. В этом и есть ее прелесть и предназначение. Поэтому многие дизайнеры используют для разработки софт, где есть функция заполнения «болваночным» текстом. Или имеет заготовленный вордовский файл-болвану.

Более изящным вариантом может быть использование сервиса Blind Text Generator, который делает тоже самое, но более интересно и разнообразно:

Наверное, кто-то назовет Blind Text Generator сервисом бесполезным, потому что единственная его задача – давать образцы галиматьи и бессмысленности. С другой стороны, как иногда полезно иметь таки образцы под рукой! К тому же он предлагает не только всем надоевший стандартный «Lorem ipsum», но и ряд других вариантов!

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

Гораздо проще выставить в трех колонках те варианты которые вам нравятся (кстати, в качества текста можете использовать «рыбу» с Blind Text Generator) и сравнить их между собой. Причем увидите текст вы сразу во всевозможных написаниях — обычном, полужирном, жирном и так далее:

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

Дальше я думаю вы и без меня знаете что с ним делать. Удачных вам экспериментов!

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

А как вы подбираете шрифты для будущего сайта? Сразу при создании макета в фотошопе?

P.S. Постовой. LTD-Studio – качественная разработка сайта в Киеве.
Советую глянуть курс по заработку на AdSense – и заработать на контекстной рекламы.
Подробная информация про Черновцы и достопримечательности этого города.

© Дизайн Мания, 2010. | Комментариев - 5 | Категория Online сервисы, Типографика.

Интересные статьи по теме

• Типографика для веб (10)
• Подбираем правильное цветовое сочетание для сайта (6)
• 9 советов по типографике сайта (12)
• Шрифты и логотипы компаний и онлайн сервисов (6)
• Создание портфолио онлайн с помощью сервиса Portfolios (13)

1. Выбор шрифта

От выбора шрифта зависит очень много. Дизайн шрифта определяет настроение, передает «характер», да и вообще оказывает сильное влияние на восприятие. Выбирайте тот шрифт, который соответствует стилю и концепции вашего сайта. Например, для «традиционного» дизайна пойдет традиционный шрифт с засечками, вроде Times Roman, для «современного» дизайна может подойти шрифт без засечек — Arial или Helvetica;

2. Размер шрифта

Особо важен размер шрифта основной части текста. Заголовок (подзаголовки) может быть гротескно большим и неуклюжим, но основной текст должен быть комфортным, что возможно только при оптимальный размерах. Обычно это 12-16 px;

3. Набор стилей

Шрифт не должен быть однообразен, серую массу читать не приятно. Разработайте систему стилей для заголовков и подзаголовков (H1, H2, H3 и т.д.), цитат, основного текста и тому подобное. Используйте для этого различные размеры шрифта, варианты его начертания, возможно для контраста в этих целях используйте еще один шрифт (специально для заголовков или цитат);

4. Акцент

Важные места по тексту обязательно нужно выделять — жирным или курсивом. Главное в этом не переусердствовать. Акцент он на то и акцент потом что должен использоваться дозировано;

5. Ширина столбца

В традиционной типографике большое внимание уделяется ширине колонки, по этой причине текст разбивают на колонки в газетах и журналах. Если строка слишком длинная, читать ее не удобно. Потому что приходится слишком далеко переводить взгляд от конца одной строки до начала следующей. Короткая строка тоже не хорошо. Оптимальная длина строки лежит в диапазоне 70-140 знаков;

6. Интерлиньяж (Leading)

Интерлиньяж (Leading) — расстояние между строками. Если оно маленькое, это отрицательно сказывается на читабельности. Слишком большой Leading тоже ничего хорошего не сулит. В общих случаях, вам скорее всего подойдет интерлиньяж на 2-4 пункта больше чем размер шрифта;

7. Общая структура страницы

В идеале должна на странице должна использоваться единая сетка. Таким образом можно добиться гармоничного вида всего сайта в целом. Старайтесь использовать общие правила и стили (которые вы придумали) на всем сайте;

8. Цвет и контраст

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

9. Белое пространство

Белое пространство — это не пустота, а важный элемент дизайна. Не следует слишком тесно лепить элементы, всегда оставляйте немного «воздуха». Таким образом можно добиться чистого, легкого, приятного дизайна.

—–

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

P.S. Постовой. Качественный и надежный датацентр – аренда и размещение серверов.
Если заболел ваше питомец, поможет вызов ветеринара на дом – клиника Биоконтроль.
Милые дамы с красивыми ножками могут купить колготки в интернет-магазине в Москве.

© Дизайн Мания, 2010. | Комментариев - 12 | Категория Статьи, Типографика.

Интересные статьи по теме

• Подбираем шрифт для сайта с помощью онлайн сервисов (5)
• Часто задаваемые вопросы (FAQ) – разрабатываем эффективный раздел FAQ (0)
• Типографика для веб (10)
• Оформляем гиперссылку, советы по оформлению ссылок (11)
• Логотипы и типографика (4)

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

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

Тут же возникла проблема с компаниями разработчиками и дистрибуторами шрифтов: большинство из них отказались выдавать лицензии на использование своих raw-шрифтов на веб-страницах, опасаясь пиратства. Введение свойства @font-face усилило такие опасения, заставив обе стороны искать удовлетворительные для всех решения. Некоторые из них уже доступны, некоторые еще в стадии разработки. Это расширенные лицензионные соглашения с конечным пользователем шрифтов, а также сервисы третьих сторон, предоставляющие встраиваемые шрифты, например Typekit, Typotheque и Kernest. Веб-дизайнеры более свободны в выборе шрифтов, а шрифтовые компании и разработчики получают деньги за свою работу. Проблема решена? В принципе да.

Совершенно новый мир

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

Технические трудности использования шрифтов в Интернет также усугубились. К ним можно отнести неодинаковое отображение в разных браузерах и платформах, а также проблемы обработки файла шрифта или даже семейства шрифтов. Размеры страниц могут легко доходить до 100к и выше. Однако давайте на секунду представим, что проблемы эти скоро будут решены, и сосредоточимся на том, что мы будем делать.

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

Контекст и значение

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

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

Муки выбора

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

Знаменитый дизайнер шрифтов Зузана Личко (Zuzana Licko) однажды сказала: «Каждый лучше читает то, что читает чаще». Речь идет о приобретенных навыках. Это объясняет, почему выбор шрифта самая сложная задача типографа: чтение это субъективное относительное действие. Для прочтения длинного абзаца, написанного готическим шрифтом, который считался «читаемым» столетия назад, понадобится намного больше времени, чем если бы использовался простой шрифт из семейства Serif или Sans Serif, независимо от того, читаем мы с листа или с монитора.

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

Далее следует перечень характеристик и методов, которые следует иметь в виду, имея дело с растущим миром веб-шрифтов.

Отличное руководство по выбору и комбинированию шрифтов

Задумываясь о покупке новых шрифтов, следует помнить, что выгодным приобретением станут известные шрифты. Выбирайте такие, которые подходят под общее понятие читабельности – те, которые мы используем и видим ежедневно. Пусть это будут шрифты, лежащие в «диапазоне читаемости» (возможно, следует использовать прямоугольную систему координат). Чем дальше отходить, тем сложнее будет читаться дизайн. Кстати, не стоит забывать, что многие шрифты занимают промежуточное положение между читаемыми и нечитаемыми.

КОНТРАСТ

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

РАБОТА С ОСНОВНЫМ ТЕКСТОМ

Bobulate использует TypeTogether’s Skolar через Typekit.

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

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

ПРОЧТИ МЕНЯ!

При уменьшении текста немного увеличенная х-высота и контраст могут иметь большое значение.

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

СУТЬ СООБЩЕНИЯ

В этом постере двойного сеанса фильма «Грайндхауз» использовано много различных шрифтов и стилей, но сделано это с целью имитации постеров так называемого «эксплуатационного кино» конца 1970-х.

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

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

С ЗАСЕЧКАМИ И БЕЗ ЗАСЕЧЕК

В шрифтах Bodoni и Futura буквы выглядят очень по-разному, однако их структура основана на одних и тех же геометрических принципах.

Одним из самых простых способов достижения баланса и контраста в типографике является комбинирование шрифтов семейства Serif и Sans Serif. Эта простая и легко подбираемая комбинация при правильном выборе шрифтов способна заставить текст выглядеть гармонично.

Это не строгое правило, однако шрифты одного и того же дизайнера иногда хорошо сочетаются вместе. Как в двух картинах одного и того же художника, в двух шрифтах одного дизайнера прослеживается его рука. Например, шрифты Эрика Грилла (Eric Gill) Perpetua и Gill Sans хорошо сочетаются, так как имеют несколько одинаковых штрихов и линий. Также хорошо сочетаются шрифты, специально разработанные для комбинирования, например Meta Sans и Meta Serif.

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

Следует обращать внимание на шрифты, которые были разработаны по схожим принципам. Например, не смотря на то, что Futura и Bodoni выглядят очень по-разному, они могут составить отличную комбинацию, так как в их основе лежат одинаковые геометрические формы.

Baskerville и Futura, “old” противопоставлено “new.”

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

ЭКСПЕРЕМЕНТИРУЙТЕ СО СТИЛЯМИ

В семействах наподобие Proxima Nova от Марка Саймонсона (Mark Simonson) шрифты имеют несколько типов интенсивности, что обеспечивает различные гибкие типографические возможности при создании дизайна.

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

В БИБЛИОТЕКУ!

Многие шрифты связаны с каким-либо культурным периодом или субкультурой. В зависимости от того, над чем работает дизайнер, это может быть преимуществом или недостатком. Лучше всего при выборе шрифта выяснить где, когда и для каких целей он был создан. Иногда шрифт может «выглядеть» правильно, однако вызывать неправильные ассоциации. Например, Trajan используют в эпопеях, триллерах, романтических, комедийных и других фильмах, хотя это римский шрифт, которому уже около 1900 лет. Готические шрифты долгое время были атрибутом тяжелых металлистов и всего, что должно выглядеть «пугающим» и «темным». Понимание культурной принадлежности шрифтов помогает избежать неверных ассоциаций и использовать их с умом, делая свой выбор понятным для читателя.

ДЕНЕЖНЫЕ ВОПРОСЫ

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

ДОВЕРЯЙТЕ ИНТУИЦИИ

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

ТОЛЬКО ВПЕРЕД!

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

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

Перевод статьи: On Web Typography (Джейсон Санта Мария).

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

P.S. Постовой. Внимание! супер-акция для блоггеров «Поговорим об Аукро» – выиграй ноутбук HP!
Заходим на интересный проект и читаем всё о блоггинге.
Интересуетесь кадровым обслуживанием? Звоните, расскажем подробнее.

© Дизайн Мания, 2010. | Комментариев - 10 | Категория Статьи, Типографика, Шрифты.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Подбираем шрифт для сайта с помощью онлайн сервисов (5)
• ПереводыСтатей.рф – полезный проект для дизайнерского сообщества (2)
• Мое вдохновение как дизайнера – все возможные источники (9)

Вот как выглядел логотип первой в истории олимпиады в Париже, лето 1924 год:

Вторая и третья олимпиады уже были в цвете, после чего опять последовал ряд черно-белых логотипов. Дальше были комбинации двух цветов.

Потом было так:

Ну и в завершение – новый век:

Вот логотипы всех олимпиад.

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

Вот, кстати, еще один классный пример типографики и логотипов – американские штаты, каждый из которых обладает своей изюминкой. Не все изображения я могу расшифровать, все-таки далеко от США, но получилось здорово:

Увеличить // Источник

Надеюсь это поможет вам немного влохновиться в понедельник (трудный рабочий день).

P.S. Все про хостинг сайтов – читаем, просвящаемся!

Хотите послушать радио?- обязательно загляните на Радио Поток — все радиостанции в одном месте.

Не забудьте поздравить свою девушку/жену с праздником – качественные эротические подарки на 8-е марта.

© Дизайн Мания, 2009. | Комментариев - 4 | Категория Логотипы, Типографика.

Интересные статьи по теме

• Шрифты и логотипы компаний и онлайн сервисов (6)
• Фестиваль рекламы «Идея!» в Новосибирске (4)
• Типографика для веб (10)
• Одноэлементные логотипы, все гениальное – просто:) (7)
• Мое вдохновение как дизайнера – все возможные источники (9)