Web Symbols

    image

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

    Чтобы упростить себе эту работу мы сделали шрифт, в котором каждая буква — символ (как правило, часто используемый).

    Ну и собственно почему-бы им не поделиться со всеми?

    Web Symbols
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 51
    • +1
      А где его скачать и посмотреть в работе можно?
      • +3
        Ага, спасибо :-)
        • +1
          Сорри, забыл добавить ссылку. Теперь есть.
        • +2
          Просто супер! Спасибо.
          • +3
            Крутотень. Спасибо.
            • +4
              У меня предложение к вам есть, я не уверен что это возможно, но насколько я знаю можно выводить определенный символ при комбинации символов, и было бы неплохо если напишешь twitter то появлялась бы его иконка.
              • +1
                Это помогло бы как чисто семантически, так и в ситуациях когда кастомный шрифт не загрузился.
                • 0
                  Да, автозамена символа. Есть такое.
                  Но в linux и windows я не знаю где.
                  • 0
                    Лигатуры работают как соединения между буквами, поэтому этот вариант у нас не получился.
                    • 0
                      Для лигатур в OpenType шрифтах можно задать символы подстановки через feature liga, так что в теории это возможно, но на практике не всегда работает т.к. эти вещи не всеми подерживаются.
              • +1
                Класс
                • 0
                  Креативно, спасибо за статью.
                  • 0
                    На странице с примерами, там, где показана смена букв «Чат / Чат с сообщением», заметно, что у второй буквы нижняя граница «облака» прыгает ~ на 1 пиксель.
                    • 0
                      А у меня правая граница прыгает. Видимо зависит от рендеринга шрифта.
                    • +1
                      Спасибо!
                      • +19
                        Позвольте внести ряд предложений:

                        1) Вынесите, пожалуйста, блогозапись «из-под замкá», чтобы она была доступна для чтения всем посетителям «Хабрахабра» с его заглавной страницы, на которую заслуженно попала.

                        2) Если Вы намерены поделиться этим шрифтом со всеми, подумайте, не поместить ли указание какой-нибудь свободной лицензии (OFL, например) на странице шрифта.

                        3) Подумайте о помещении своего шрифта в хранилище Google Web Fonts, имеющее такой API, посредством которого из шрифта можно по необходимости вытаскивать на сайт отдельные символы вместо целого шрифта — и тем в несколько раз (до считанных десятков килобайтов) сократить скачиваемое читателем содержимое и ускорить отображение желаемых символов.
                        • +7
                          3) Из Гугла пришел ответ что они пока не размещают шрифты из символов.

                          2) На самой странице не указывали (сделаем чуть позже), но в самом шрифте указан OFL.

                          1) Сделал
                      • +2
                        Арканоид на главной странице прекрасен. Гляньте ещё на redmadrobot.com, у них тоже хорошо.
                        • 0
                          Дополненная реальность на упаковке азу это шедевр, спасибо!
                        • +2
                          Удобнее вектор.
                          И вообще — thenounproject.com/
                          • –5
                            Вектор для веба — неудобен.
                            • +1
                              Для веба — нет, для дизайна — да. Или вы будете подгружать шрифт для того, чтобы отображать иконки, которые всё равно визуально будут кастомные?
                              • 0
                                Ну так и о чем разговор если шрифт называется Web Symbols и предназначен для веба?
                            • +2
                              Сервис, супер!
                          • 0
                            А можно в выложить виде векторных иконок?
                            • –5
                              Большинство иконок, взятые из пака от Helveticons и скорее всего, не купленного, а просто «скаченного бесплатно без смс». Даже если вы и купили эти иконки, то лицензия не позволяет использовать их в данном варианте. Вы, как студия довольно неплохими работами, могли бы и сами нарисовать. На худой конец можно было использовать иконки от thenounproject, они GPL насколько я помню.
                              • +10
                                К вашему большом сожалению, все иконки нарисованы, мотивы некоторых — похожи у всех, например иконка картинки. Она одинаковая и у helveticons, thenounproject и интерфейса apple. Спасибо что не обвинили в краже логотипа твиттера или фейсбука.
                              • 0
                                Спасибо! Из пожеланий: побольше бы разных буллетов для списков.
                                • +1
                                  есть еще один аналогичный шрифт из иконок pictos.drewwilson.com/
                                  • 0
                                    Крутой, но я бы не заплатил.
                                  • +1
                                    Отличная идея, не хватает:
                                    телефон
                                    почта
                                    главная
                                    • +4
                                      Главную решили не делать, так как символ — бесполезный. Все уже привыкли нажимать на логотип чтобы вернуться на главную.

                                      Телефон и почту — делаем.
                                  • 0
                                    Круто, но:
                                    1. Мало. Обязательно попадется задача использовать изображение, не входящее в шрифт. Здесь, например, иконок намного больше thenounproject.com/ru/
                                    2. Сглаживание.
                                    • 0
                                      Сглаживание вопрос времени. Браузеры на macosx отображают все прекрасно, на xp почти все отображают нормально, но растрируют все по-разному. Тут больше задумка на будущее. Интернет неуклонно идет к векторному формату. C появлением «ретина» экрана на телефонах, у всех появились проблемы с увеличением системных иконок. Представьте что будет когда появится первый «ретина» дисплей, скажем дюймов так на 27.

                                      В студии у нас глобальная идея что веб должен быть проще, как для использования так и для создания. Чтобы вставить в векторную картинку (svg) нужно сделать большое количество лишних действий. Добавить такой шрифт 4 строчки в стилях. В шрифте мы оставили только самые часто используемые иконки, зачем добавлять еще штук 100, которые никому не нужны.
                                      • +1
                                        > зачем добавлять еще штук 100, которые никому не нужны.
                                        Зачем тогда делают сеты из тысяч иконок, которые никому не нужны?
                                    • +6
                                      А в Юникоде пошли еще дальше.
                                      У них теперь есть специальные символы для дерьма (1F4A9) и пидорасов (1F46C).
                                      • 0
                                        Можно как-нибудь получить ваши шрифты в виде иконок в png? Очень красивые. Хочу добавить их в Launcher 7 для Android, а то стандартный набор скуп, а ваши иконки очень походят для интерфейса метро!
                                      • 0
                                        В наборе социальных иконок, добавить бы ещё иконку для livejournal.
                                        • 0
                                          Кстати, огромное спасибо за шрифт!
                                        • 0
                                          Этот шрифт, да на www.google.com/webfonts добавить бы. Было вообще классно.
                                          • 0
                                            Супер!!! Очень выручили!:)
                                            • 0
                                              Было бы круто, если бы вы сконвертили на том же fontsquirel шрифт в base64. Это бы позволило избежать скачка при загрузке шрифта…

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.