Веб и типографика.

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

Посмотри много-много современных забугорских сайтов и сделай свои выводы. На пальцах этого не объяснить. Напримет, тут: http://www.awwwards.com/, http://www.selected-webdesign.com/, http://www.cssawards.net/ Из чтива недавно нашел статью: http://webdesign.tutsplus.com/articles/typography-articles/a-beginners-guide-to-pairing-fonts/ (на английском). Часто рекомендуют «Типографику» Рудера.

+1 типографика - темный лес, все говорят «говно», почему - скажут немногие :)

Я когда учился, нам препод по шрифтам говорила: — Расстояние между буквами - один пункт, но это не обязательно, делайте как чувствуете.

Надеюсь понятно объяснил.

Джеймс Феличи. Типографика: шрифт, верстка, дизайн - одна из лучших книг на русском языке про типографику и верстку. При чем все по делу.

Вот хороший пример несочитающихся шрифтов А вот тут уже классно смотрятся

[/quote] ну это придет с опытом) шрифты слишком разные по форме, присмотрись к засечкам

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

FunFun в верхнем варианте вроде называется «конфликт», когда разные шрифты одного типа (с засечками). в нижнем варианте шрифтовой контраст... поправьте меня, если я не прав

:D Объяснил-то понятно, только вот как из всего разнообразия шрифтов (тысячи их) выбрать. Вот как выбирался шрифт для выражения «Типографика спасёт мир!» (красивый шрифт кстати), т.е. по каким критериям??? Тупо все шрифты перебирать? Для примера, какой шрифт подошел бы для сайта городской Думы?

Это шрифт Meta его делал Эрик Шпикерманн, поэтому он крутой и его выбрали для этой надписи. Чтобы понять как «оттипографить» текст прочтите Королькову «Живая типографика», и 90% вопросов отпадут. Там все есть: и какие шрифты бывают, и какие расстояния должны быть, и как, и почему. Для просто сайтов я обычно выбираю сочетание 16рх как кегль, и 1.5 как коэффициент высоты строки (то есть 24рх). Но сейчас я уже начал замечать что с легкостью используют коэффициент больше 1.5. http://elliotjaystocks.com/blog/ – он кстати использовал всего один размер шрифта на весь сайт, но различными типографическими приемами сделал это красиво и интересно. Шрифт для чего? Для заголовков? Первого, второго или третьего уровня? Для пометок? Для основного текста?

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

+1

Для заголовков. Для основного текста.

Для заголовков. Для основного текста.[/quote] Вот уже точнее. Но все равно, надо знать какую задачу будет решать тот или иной текст. Если это заголовок, то должен привлекать внимание, разбивать текст на части. Какой он будет, с заечками или без, дело вкуса. Надо просто знать несколько названий шрифтов и знать какие они и чем характерны, каким размером читаемы, каким нечитаемы. Ну явно на сайте думы Лобстер, например, не в кассу. А Верданой можно набирать длинные тексты. На сайте Думы скорее всего будут публиковаться разные документы в деловой форме. И хорошая типографика такого сайта только на 10-15% будет зависить от выбора шрифта. Остальное решит, каким кеглем, с каким интерлиньяжем, каким цветом будет набран текст. Как будут выделены его смысловые части. Хватает ли заголовку воздуха, не слишком ли он прилипает, не слишком ли далеко от своего параграфа. Еще есть хорошая вещь — вертикальный ритм, его тоже надо сохранять. Лучше такие тексты прогонять через типограф, и не выравнивать по ширине. И вообще в вебе выравнивать по ширине нельзя. Скорее всего контент на этот сайт будут добавлять через админку люди очень далекие от хорошей типографики. Поэтому в некоторых случаях заложенная дизайнером типографика в два счета убивается несведующим контент-менеджером, который делает красный жирный курсив увеличенным кеглем еще и капсом, чтобы привлечь внимание. Поэтому визивиги — зло. А для привличения внимания надо делать на сайте отдельный блок, который контрастен по цвету всему сайту. Если есть конкретный сайт/текст, я могу дать простые рекомендации по шрифтам. В общем случае рассуждать какой и где можно бесконечно долго.

Был бы премного благодарен :yes:. С пониманием типографики у меня пока слабо. Буду читать литературу, которую посоветовали в этом посте. Планируется редизайн данного сайта http://dumatlt.ru. Сейчас - редкостный кал. Очень много текста. Хочу «крутизну» не за счет картинок, а за счет хорошей типографики.

Картинкам нужно свое место, то что текст их обтекает — не очень хорошо. Картинка без подписи тоже плохо, теряет свою ценность. А на сайте в основном лица, хотелось бы знать кто они и как зовут, не вчитываясь в текст. Длину строки побольше, вообще, я бы две колонки оставил. Сделал бы их воздушнее. Сейчас новости на главной слипаются в одну. В текущем сайте и композиционных ошибок много. А переделать что-то есть множество путей, у каждого дизайнера свой =) Так что надо начать переделывать, начать со структуры сайта и структуры страниц. И выложить на критику. По выбору шрифта, например. Можно оставить какой сейчас есть, только обеспечить подход к параграфам текста. Сложное обстоятельство — заголовки на этом сайте, они длинные. То есть, либо кегль меньше, либо заголовки редактировать усердней. Можно поподбирать размеры на сайте http://www.gridlover.net/

Огромное спасибо.