Ответы пользователя по тегу Типографика
  • Есть ли недочеты в этом макете сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    • Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
    • Странное смешение шрифтов с засечками и без. Никакой системы в этом не наблюдается. Какую задачу эта разница решает - непонятно.
    • Очень много разных размеров шрифтов и межбуквенных интервалов. Проблема та же - нет системы.
    • Отступы везде разные. Внизу их вобще нет. Проблема та же.
    • Местами намешана информация. Глаза разбегаются. Здесь явно прослеживается идея поэкранного скролла, или чего-то вроде него, но стоит подумать над тем, чтобы каждый экран был о чем-то одном. Первый про то, что это такое (зачем там какие-то характеристики про опыт и духов?), дальше описание сервера (зачем там реклама справа?), магазин вообще спрятался в куче рандомных фактов по краям, я его в первый раз даже не заметил.
    • Не совсем понятно, как это должно адаптироваться под разные размеры экранов.

    В целом докапываться можно много к чему, перечислять нет смысла, но общий посыл такой:

    1. Обращайте внимание на систему в дизайне. Загуглите, что такое дизайн-система и почему простота и последовательность - это хорошо.
    2. Думайте больше о доступности и адаптивности. Вы дизайн делаете для пользователей в первую очередь. Красочная картинка вторична.
    3. Не нужно нагромождать все, как в газете. Это очень редко работает. Управляйте вниманием пользователей, не давайте ему растекаться во все стороны.


    P.S.: Также в таких проектах всегда нужно быть готовым к диалогу с разработчиком и не допускать требований pixel-perfect по согласованным без него макетам. Это не так сложно сверстать, но вот эти штуки по краям с линиями и кубиками будут генерироваться на лету (для адаптивности). Они не будут 100% соответствовать нарисованному. Также тут так и напрашивается все эти картинки анимировать, как на текущем сайте mtg. Не знаю, как этот стиль называется, но WebGL - наше все. Да и эти кубики я бы сделал неспешно плывущими более-менее вниз с покачиваниями и поворотами... Но это уже следующий шаг. Первое - система в дизайне и доступность.
    Ответ написан
    1 комментарий
  • В macOS San Francisco, windows Segoe UI?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    На маке и под виндой, нужно отображение контента шрифтом по умолчанию

    Не стоит забывать и о других операционных системах. Есть более глобальная версия этого заклинания:
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif


    Здесь примерно такой расклад:
    • -apple-system - для macOS
    • BlinkMacSystemFont - обратно для macOS
    • Segoe UI - Windows (начиная с Висты)
    • Roboto - Ведроид
    • Oxygen - Линуксы с кедами
    • Ubuntu - Собственно Ubuntu и некоторые ее производные
    • Cantarell - Линуксы с гномами
    • Fira Sans - Шрифт от мозиллы (был сделан для Firefox OS, теперь не очень понятно, нужно это или нет, я так ни разу и не видел вживую устройства с этой ОС)
    • Droid Sans - Старый ведроид
    • Helvetica Neue - Еще немного старых маков
    • sans-serif - На всякий случай

    Emoji в этом варианте не включаются (обычно они и не нужны), но можно добавить так, как вы написали (в конце, после sans-serif). В отдаленном светлом будущем у нас еще будет system-ui, но пока будущее еще не до конца наступило.

    При использовании таких заклинаний нужно помнить о том, что "-apple-system" не стоит использовать в свойстве font, только в font-family, а то все может внезапно сломаться. Про проблемы с SEO ни разу не слышал, скорее будет небольшой положительный эффект за счет уменьшения скорости загрузки страниц. А может и не будет.
    Ответ написан
    Комментировать
  • Какой существует аналог Nunito или Proxima Nova Soft с поддержкой кириллицы?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Какие вы знаете аналоги вышеуказанных шрифтов с кириллицей?

    Proxima soft и так идет с кириллицей - https://www.myfonts.com/fonts/marksimonson/proxima..., зачем аналоги?
    Ответ написан
  • Откуда значения в этой формуле?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Комментировать