Комментарии 36
Где я вам могу плюсик поставить за такую отличную наводку?)
Отличные примеры не только по типографике, но и по композиции, по цвету.
Спасибо!
Отличные примеры не только по типографике, но и по композиции, по цвету.
Спасибо!
0
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за перевод, типографика это то, что стоит продвигать в массы.
0
Спасибо, действительно есть чему поучиться.
0
Подборка отличная. Жаль только, ни одного русского проекта...
+1
Ну как сказать, здесь http://designr.it/ автором значится некий Петр Федорчук. Хотя фамилия по большей части украинская.
0
Поищите-ка сайты с хорошей кириллической типографикой. Кроме студии letterhead и не вспоминается никто.
0
http://decknetwork.net/ очень понравился — распечатать главную страницу и в рамочку на стенку как произведение искусства.
http://designr.it/ — Знакомый шрифт на логотипе, завтра на работе посмторю. Я с чем-то подобным игрался и это было очень круто.
Некоторые сайты не понравились из-за того, что фон у них статичен, в смысле не скроллится вместе с информацией. Мне кажется, что это плохо.
http://designr.it/ — Знакомый шрифт на логотипе, завтра на работе посмторю. Я с чем-то подобным игрался и это было очень круто.
Некоторые сайты не понравились из-за того, что фон у них статичен, в смысле не скроллится вместе с информацией. Мне кажется, что это плохо.
0
Большинство примеров действительно грамотные и очень интересны для изучения. Единственное что мне непонравилось так это "злоупотребление" курсивом.
А автору вот этого сайта http://jontangerine.com/ нужно вообще памятник поставить за верстку на емах. Очень интересная методика, которая позволяет масштабировать колесом мышки сайт во всех браузерах (включая firefox и IE). Отличный пример реализации такого подхода - ikea.com.
Недавно на глаза попалась советская агитация в виде блогнота выпущенного к какой-то годовщине д.р. Ленина. Так вот, типографика там такого уровня, которое не позволяет себе даже современные богатые компании. Грамотные отступы, размеры шрифтов, расположение агитационных материалов. И это все при том, что качество печатного оборудования оставляло желать лучшего - низкий ДПИ и кол-во цветов.
И все в полном соответствии с бренд-буком СССР!!!
А автору вот этого сайта http://jontangerine.com/ нужно вообще памятник поставить за верстку на емах. Очень интересная методика, которая позволяет масштабировать колесом мышки сайт во всех браузерах (включая firefox и IE). Отличный пример реализации такого подхода - ikea.com.
Недавно на глаза попалась советская агитация в виде блогнота выпущенного к какой-то годовщине д.р. Ленина. Так вот, типографика там такого уровня, которое не позволяет себе даже современные богатые компании. Грамотные отступы, размеры шрифтов, расположение агитационных материалов. И это все при том, что качество печатного оборудования оставляло желать лучшего - низкий ДПИ и кол-во цветов.
И все в полном соответствии с бренд-буком СССР!!!
+1
Насчёт http://jontangerine.com согласен полностью. На мой взгляд — образчик типографически корректной вёрстки.
0
Обожаю советскую верстку, на многих книгах можно учиться. Собираю коллекцию книг времен совка и анализирую качество верстки, пока лидируют 30-е и 50-е года.
0
Кстати, зря. :) Советская типографика очень отринула зрелищность ради экономии. И Гильо клеймил Гессена из-за буржуазного пристрастия к «украшательствам», а не к эффективности. Поэтому мы имеем кургузые поля по ГОСТам и мизерное количество шрифтов. Конечно, всех художников не передушили, остались отличные издания, но их бесконечно мало…
0
Не стоит путать типографику и дизайн. Типографика прежде всего призвана сделать информацию удобной для восприятия - это набор жестких правил, соблюдая которые мы получим качественный продукт. Но это не значит что нельзя проявлять креатив в дизайне. В Советском Союзе за креатив карали. Но при этом соблюдались все правила типографики, иначе книга или газет просто не шли в печать.
0
Выбор шрифта, макетирование страницы, выбор формата и расположения полосы набора, оформление колонтитулов — это всё тоже типографика, и конкретных правил здесь нет. Да, в Советском Союзе большинство книг (но не все книги) выходили с правильными кавычками, благозвучными переносами, с отсутствием коридоров — но это относится скорее к правилам набора, которые в большинстве случаев заставляли соблюдать, и чего не делается сейчас.
0
А кто-нибудь можеть обьяснить как высчитан размер картинки в емах?
width:48.125em;
height:12.375em;
У него картинка лежит в диве на котором эти размеры и на ней такие же, на боди размер шрифта 100... Как он это посчитал???
width:48.125em;
height:12.375em;
У него картинка лежит в диве на котором эти размеры и на ней такие же, на боди размер шрифта 100... Как он это посчитал???
0
12.375 × 16 = 198, 48.125 × 16 = 770
Размер шрифта по-умолчанию 16 px. То есть 1 em = 16 px. А дальше простая арифметика. :)
Размер шрифта по-умолчанию 16 px. То есть 1 em = 16 px. А дальше простая арифметика. :)
+1
Понятно, что перемножать, но почему дефолтное значение 16? В цссе на куче элементов в том числе и на боди font-size: 100%; Или 16 это внутрибраузерно?
0
DmitryBaranovskiy псе правильно написал. Но есть способ сделать работу с емами более комфортной, необходимо задать %-ый размер шрифта для body: body{ font: 62.5%/1.4 Arial, sans-serif }
И теперь все размеры выставляются в пропорции 1/10.
Более подробную информацию можно прочитать здесь:
http://cssing.org.ua/2006/10/16/font-siz…
И теперь все размеры выставляются в пропорции 1/10.
Более подробную информацию можно прочитать здесь:
http://cssing.org.ua/2006/10/16/font-siz…
0
может я чего-то недопонимаю, но почему в этих работах при всей типографике так мало подчеркнутых ссылок?
0
Буквальное следование правилам дизайна убивает мозг. Иногда лучше забить на правила и сделать красиво.
+1
потому что когда ссылок много это создает отвратительный визуальный шум и затрудняет чтение текста
во многих случаях достаточно выделения цветом
подчёркивание нужно лишь тогда, когда надо привлечь внимание к ссылке, выделить её из общей массы текста (к примеру, кнопка ответить здесь, на хабрахабре)
во многих случаях достаточно выделения цветом
подчёркивание нужно лишь тогда, когда надо привлечь внимание к ссылке, выделить её из общей массы текста (к примеру, кнопка ответить здесь, на хабрахабре)
0
Я уже приметил для себя из вашей статьи парочку дизайнерских идей, до которых не додумался сам. Всё сделано аккуратно и со вкусом.
0
Странно, чёрный, серый и оранжевый основные цвета на большинстве представленных сайтов
0
Не увидел здесь ничего особо интересного. Типовые примеры в духе Яна Чихольда. Просто очевидные архетипы традиционного дизайна. Простые акциденты, строгие колонки, скучные цветовые решения, никакой изюминки. Автор явно противник тенденций, идущих от Дэвида Карсона :) Экстремальная типографика уже не в ходу? А ведь если все начнут создавать такие «шедевры» аккуратными серифами в духе газетного дизайна для УоллСтрит?...
+1
Предыдущий дайджест оттуда же оказался намного интереснее. Как в композиционном и цветовом, так и собственно в шрифтовом исполнении: http://ilovetypography.com/2008/01/02/go…
0
оцените пожайлуста мой пример на емах, по-моему неплохо получилось
http://www.spravkavsem.ru/ (крутить колесо обязательно :)
http://www.spravkavsem.ru/ (крутить колесо обязательно :)
0
Ничего так, меняется… Отдельно понравилось "телефонное" расположение цифр в блоке кодов. Из недостатков: Поля ввода и кнопки при масштабировании ведут себя не совсем адекватно, что, в целом, понятно (Firefox/2.0.0.14). Да, и присмотритесь к ммм… алфавиту. Города на "Ь" и "Ъ" — сильно, а вот где "Я"? :-)
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
15 примеров отличной типографики