Комментарии 64
У меня на айфоне сайт Vanity Fair выглядит так:
Если это - прекрасно, то что же тогда чудовищно? На экране отображено порядка 50 символов текста и куски постороннего изображения. Это, причём, айфон, который стандартен до предела.
Из-за таких сайтов в браузере придуман замечательный вид "Для чтения". Но эти горе-дизайнеры даже и его ухитрились заблокировать.
У вас вопрос точно про шрифты? Обсуждать корректность UX на разных регионах Ярморки — это отдельная статья нужна и желательно с доступом к аналитике. Думаю у ребят все хорошо и с этим, раз у них такая большая разница по региональным зонам. Сайт очень гибок. А в вырезанном с серидины страницы вашем скриншоте я не вижу ошибок, тем более с точки зрения сочетаемости шрифтов и их функциональной принадлежности.
Друзья мои, пользователю глубоко неинтересны ваши эксперименты со шрифтами. Стиль отображения сайта я хочу устанавливать сам настройками браузера, и нормальные сайты (в том числе Хабр, хотя и не без косяков) это позволяют. А вы промдизайн (а настройка передачи текста на экране - это именно он) превращаете в эстетические эксперименты.
Нормальный человек на сайте не разглядывает красоту страницы. Он приходит прочесть нужную ему информацию.
Я бы спасибо сказал, если бы сайт отдавал голый XML. По большому счёту.
каждый продукт рассчитан на свою ца. Я не в восторге от 99,9999% контента продуктов с которыми работаю, но это не мешает мне адаптировать внешний вид под инсайты пользователей и позиционирование бренда — это работа.
Дизайн — это то что позволяет увеличить добавочную стоимость продукта. От этой парадигмы я тоже не в восторге. Но кушать надо)
Речь не о сайтах, моя основная мысль, что выпускают творческих импотентов и неучей.
забавно слышать "я хочу" от пользователя яблочной техники.
Идея ваша мне интересна очень. Только желание остальных пользователей в действительности не учтено вами, кажется мне. Да и про систему «классов» из XML поподробнее бы — глядишь, там и стандарт новый родится... Маркдаун-2 броузер эдитион. Тёмные времена нынче :)
Мне, как ни странно, плевать на остальных пользователей. Статью опубликовали на айтишном сайте, получили реакцию айтишников. Предлагаю опубликовать, например, на юридическом сайте и узнать, нужно ли юристам десять шрифтов и привлекающие внимание вставочки на странице или нет. Почему-то подозреваю, что тоже не нужно. И так далее. Может, собаководам это нужно? Или любителям гей-порно? Да тоже, честно говоря, думаю, что их не шрифты интересуют.
Возможно, предпубертатные девочки, которые являются целевой аудиторией журнала Cosmopolitan, действительно выбирают журнал по эстетическому впечатлению от обложки. Но обобщать их поведение на пользователей произвольного сайта представляется мне необоснованным.
В статье обсуждается только конструкция Шрифтовая пара. Она родилась в айти среде. И выдернута из типографского контекста и является сегодня в том же айти ненужным ограничением. Почему ? Я подробно написал в статье. Мы с вами живём в диджитализированном мире и делаем массовые цифровые продукты.
Понятие шрифтовой пары относится к психологии восприятия и по этой причине никак не должно зависеть от носителя изображения.
Другое дело, что по-хорошему в диджитализированном мире вообще не должно быть никаких указаний шрифтов на сайте, а должны быть логические стили. Откуда дизайнеру сайта знать, гламурненько у меня настроена визуальная среда или готичненько?
Шрифтовая пара к психологии восприятия никак не относится. Количество, подбор, начертания иерархия и акценты относятся. А Пара не относится. Чем хуже трио или моно? Сегодня ничем тк полгода бесплатных шрифтов. О проблеме восприятия и культурной революции писал чихольд 80 лет назад. Цитата в начале статьи. А результат в любом интерфейсе. А пара только в головеинеучей)
Какой-то чувак 80 лет назад написал свои мысли про оформление книг, а вы почему-то их распространяете на содержимое окна браузера, которое является мелкой и зачастую не главной частью визуальной темы экрана современного компьютера.
В понятиях книгопечатания это как оформление врезки по отношению к основному тексту.
А потом приходится применять такие вот советы, чтобы оставить один шрифт из всего этого разврата.
Эйнштейн тоже какой то чувак со 100 летней давности теорией. И неподтвержденной ничем Копенгагенской интерпретацией. Однако. Все что вы читаете, облик постов, и на этом сайте — наследия Яна Чихольда.
Подобные советы не направлены на увеличение прибыли и массового потребителя. А дизайн в первую очередь - инструмент создания добавочной стоимости)
Если я вас правильно понял, вы сильно заморочились вечным вопросом формы и содержания, отдавая приоритет содержанию и пытаясь найти удобный способ абстрагироваться от формы. Я вам рассскажу ржачную историю: у меня есть два кореша, и вот один говорит: «она такая-сякая, не буду с ней общаться», а второй: «а я буду». И это не единичный случай. Если проводить параллели, то мне в вашем подходе XML очень похож на простое механическое «потыкать» в кого-то, не сочтите за пошлятину.
Очень темные и конструкция Шрифтовая пара — поражение безграмотности.
То есть подчёркивание всего текста вас не смущает?
Я где-то слышал краем уха, что текст подчёркивается, чтобы показать, что это ссылка. Что в этом должно смущать?
Меня смущает, что в окно терминала 80x25 влезает 2000 символов, а здесь на целый экран их 50.
Есть разные способы показать, что это ссылка, в том числе и менее обструктивные, не усложняющие чтение текста.
без onhover этого подчеркивания нет. не верьте никому)
Какой ещё ховер на мобилке?
Прикосновение отрабатывается как ховер. Вы шо **нуху не смотрите, там все действие по предпросмотру контента в списке на этом построенно. даже иконка такая появилась проведите влево/вправо.
Вы же, вроде, как-бы в теме. клик в мобайле отрабатывается когда палец отжимается а не в момент касания. если отдельно это не прописано. так что все эффекты и в мобиле есть
Я не смотрю порнуху на мобилке. Зачем на ней ховеры по отпусканию показывать?
лик в мобайле отрабатывается когда палец отжимается
Вы не поверите, на десктопе событие click это два последовательных события mousedown+mouseup. И конечно оно тоже срабатывает на "отжатии". hover в мобилах тоже как бы есть, эмулируется через долгое нажатие на элементе
Через долгое нажатие в мобильных браузерах открывается контекстное меню (в лучшем случае) или просто ничего не происходит. Нету на мобилах ховера. И это очень плохо.
Контекстное меню будет на ссылке. Сейчас проверил, hover есть, имитируется mousedown, но не пропадает после mouseup. hover state снимается вместе с фокусом, то есть клик наружу его снимает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hovered {
height: 80vh;
background-color: red;
}
.hovered:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="hovered"></div>
</body>
</html>Вот запись с экрана, Android + Chrome
Поведение Вашего мобильного устройства можете проверить https://nickyx3.ru/hover-test.html
По размеру кегля все корректно. клиповость мышления как раз к этому и приучает - к акценту только на одном месседже. Размер не так важен в данном случае - важны интрументы навигации и здесь они - горизонтальный слайдинг.
Акценты расставлены корректно.
Никак нет, тк это подчеркивание случилось после зажатия текста. отработал оновер ивент. А речь не о нем в статье, а о количестве и причинах использования. шрифтов. Проверяйте плиз информацию. Мало ли кто что в комментариях запостит - это середина страницы с лонгтапом на заголовке.
Ага, это не у дизайнера с разработчиком руки кривые, раз всунули такой ховер эффект, который мешает читать текст, это пользователь сам дурак, что куда-то нажал, а весь текст почему-то подчеркнулся.
Для этого достаточно посмотреть обложку или разворот любого глянца
ИМХО современная обложка в вашем примере достаточно аляпистая, и изобилие шрифтов — если не главная, то одна из главных причин тому.
а на старой обложке я вижу 2 шрифта (рукописный и нет) разных размеров. название журнала напечатано если и отдельным шрифтом, то явно выдержанном в том же стиле.
А вот сегодня и в цифре у нас действительно нет таких ограничений, ни технических, ни финансовых. Однако, данную конструкцию продолжают тиражировать ведущие платформы и образовательные проекты
если вспомнить, то как раз в девяностых в вебе было популярно использование кучи разномастных шрифтов, выделение начертанием/цветом/спецэффектами, всё могло переливаться и мигать.
в итоге от этого ушли к более сдержанному дизайну.
На старом журнале 7 шрифтов. я пересчитал, дважды.
Тот момент, когда старая обложка выглядит куда приятней новой. И дело даже не в количестве, а в том, как они подобраны.
Если сравнивать с обложкой нового Cosmo, то старый выглядит лаконично и понятны акценты, при этом на новом - мы накидали разные шрифты и их вариации (словно в "голове у блондинки" - всё в одном месте и сразу), но при этом, менее разнообразное оформление будет уже внутри самого журнала, если рассматривать его не как единый набор текста, а как отдельные статьи и/или секции.
В этом и заключается основное отличие: в давние времена ограничение шрифтов в обложке (буклете, рекламе, брошюре и тд) было связано с тем, чтобы доставить информацию конечному пользователю, при этом, в текущее время, продать (выделить) бренд на фоне других подобных.
Именно "продажа" и есть основная причина, а не обоснованность.
В рамках одной статьи шрифт используют по правилу, о котором говорят вам "столпы"
Шрифтовая пара — это два шрифта, которые используют в дизайне для оформления текстов на одном пространстве
Говоря другими словами, в каждом пространстве (блоке) вы можете использовать другие шрифты с целью привлечения внимания пользователя к той или иной поднимаемом в блоке теме, либо отсечению одного блока от другого.
Маленький пример: У вас может быть два шрифта для одной статьи (заголовок и основной текст), но для блока цитат вы можете использовать совершенно другой, а для рекламы - и вовсе ещё 2 дополнительных шрифта.
Вы в праве использовать любое количество шрифтов, если у этого решения есть обоснование. Ограничений к этому больше нет.
И, в общем ключе, я согласен с тем, что использовать можно любое количество шрифтов, но, главное не обоснованность, а результат достижения цели (привлечь, удержать, "продать" и тд)
выделение цветом и переливания - это не разный шрифт. Даже функция болд не всегда была отдельным шрифтом. Да и вместо шрифтов были растровые и гиф изображения.
Сдержанный дизайн — это не ограничение «пара» шрифтов, а целый комплекс и принципы дизайна. например воздух. Идея сайтов 90х заключалась в том, чтобы показать ВСЕ на главном экране. а сегодян мы пользуемся лонгридами, за что обязаны появлению соцсетей.
Ограничений к этому больше нет.
Пока грузятся ваши 100500 шрифтов, что видит пользователь?
Шрифты грузятся быстро. Одно не оптимизированное изображение куда как плачевнее сделает итог. Ведь подгрузить можно не всю гарнитуру а только начертание. посмотрите это пара десятков килобайт, а вот картинки подготовленные к ретина и боже упаси используемые и для десктопа и для мобилы одновременно может и вме 2 метра весить. Если дизаайнер не продумал фреймирование, а разрабы не сделали 2 отдельных ресайза.
Они грузятся быстро если они есть у пользователя.
Помедленнее если они грузятся из библиотеки гугла.
Ещё медленнее если это какой нибудь извращенный собственноручно сделанный шрифт и грузится он из библиотеки ресурса
И самый медленный вариант если шрифт грузится откуда нибудь из мелкого третьего ресурса.
Ну а основная проблема вариантов 2-4, это стремительно продолжающаяся фрагментация интернета, в результате которой может оказаться так что вчера ещё работавший шрифт, сегодня заметной части пользователей тупо недоступен.
Ну а основная проблема вариантов 2-4, это стремительно продолжающаяся фрагментация интернета, в результате которой может оказаться так что вчера ещё работавший шрифт, сегодня заметной части пользователей тупо недоступен.
А как быть с теми фриками, которые злонамеренно блокируют сторонние шрифты и благополучно живут с этим и не парятся? Например, со мной?
Шрифт ниоткуда не грузится если он есть пользователя. Что значит помедленнее? помедленнее чего? Развесовка начертаний робото в аттаче. Откройте любой сайт и посмотрите сколько занимают изображения и какой мизерный от них процент занимают шрифты.
170кб * хотя бы 2 начертания * 8 шрифтов. Сами посчитаете?
а сколько верит одно изображение для ретины? а сколько таковых на сайте обычно? зайдите на венити, увидите как молниеносно подгрузытся шрифты и как долго будут грузится изображения.
Метр бесполезная картинка на тинькоф банке и это одна картинка
Вы не ответили на вопрос.
Ответил. шрифт грузится быстро. быстрее любой картинке на сайте. Но если так случилось что в момент загрузки пропала связь, о отобразится шрифт встроенный в ос.
То есть вы не в курсе чем текст от картинки отличается? Подсказка: его читают. Изменение шрифта при загрузке сбивает с чтения.
Сначала идет процесс «считывания» для ориентации что стоит читать, что нет. На этом этапе изображения предоставляют больше информации для решения Читать или не читать. пока мозг отработает этот запрос шрифт загрузится. Или вы читаете как робот, все подряд не разбирая интересно вам это или нет.
Простите, по такой логике и один то шрифт не нужен. Только безопасные. Но безопасными вы не продадите ненужную вещь. А вопрос всегда про деньги.
Небыло... ежегодние... диджитализации... большинство типографских шрифты
Просто кровь из глаз.
А статья интересная.
Кажется верстальщики многих сайтов даже не слышали о всех этих заморочках.
Забавные комментарии конечно, шрифты не нужны.
По статье — про шрифтовую пару говорят на всяких тильдах именно потому, что инструкции на тильде для начинающих создателей сайтов. Да, можно использовать много шрифтов. Но только не везде. Вы привели в пример сайт Vanity Fair, я знаю еще хороший — https://www.inverse.com/, там правда опять сменился дизайн, раньше со шрифтами играли еще больше.
Между ними общего как раз то, что это онлайн-журнал, по сути. Но какой процент людей такое делает? Material Design предполагает, что с ним будут делать приложение для какой-нибудь доставки еды, а Tilda — что сайт для небольшого бизнеса (условно). Понятно, что они не будут советовать кучу шрифтов — потому что это и не нужно в таком случае. В приложении со сложными интерфейсами бывает лучше обойтись одним шрифтом, на каком-нибудь лендинге — одним или двумя. Можно больше, но кто из целевой аудитории это вытянет, чтобы выглядело нормально?
Так что 7 шрифтов на одной странице — это очень специфическая ситуация для достаточно редких кейсов. Человек, который это будет делать, учился типографике не на яндекс практикуме, он и так знает, как можно.
Да, комментарии хорошая почва для новых статей, вот думаю вторую часть написать. Не думаю что шрифтовое разнообразие специфичный кейс - оформление того же кавера на лендосах - типовая и центральная задача. К тому же, что считать не-парой — разные начертания? Я сегодня на тильду зашел там из 24 пар 23 один и тот же шрифт для заголовков и текста. Если следовать основному правилу о контрастности, то начертания куда как важнее шрифтов. увидеть разницу у PSSans и Tilda sans обывателю не под силу.
Публикации
Шрифтовая «не-пара»