Я хочу углубить свои знания в типографике, точнее, в веб-типографике.
Я ищу хорошую информацию для этой цели, но я не нахожу ничего хорошего.
Я вижу, что многие люди плохо отзываются о некоторых шрифтах, потом я захожу на другой сайт, и мне рекомендуют эти же шрифты. Кажется, что люди говорят о шрифтах как о личном выборе, а не по «техническим» причинам.
Итак, я немного смущен. Выбор типографики кажется мне очень важным, и не только в том смысле, красиво это или нет.
Кто-нибудь знает хороший веб-сайт, где я могу начать изучать семейства шрифтов, рекомендуемых для Интернета, и какие моменты мы должны учитывать при выборе веб-шрифта?
Обычно я выбираю веб-шрифты, основываясь на трех вещах: визуализация, доступность и эстетика.
Рендеринг
Не все шрифты отображаются одинаково. В то время как некоторые из них отлично смотрятся на рабочем столе, веб-это совершенно другая область. В какой-то степени это зависит от вашей аудитории, ОС и браузеров, которые они используют. У нас есть довольно много вопросов по рендерингу шрифтов, и это лишь некоторые из них:
Лично мне нравится брать кучу понравившихся мне шрифтов и тестировать их с помощью разных браузеров, виртуальных машин или онлайн-сервисов. Я даю каждому шрифту оценку для каждой основной ОС/браузера, а затем выбираю между шрифтами с лучшими оценками.
Доступность
Это не такая большая проблема, но вы должны спросить себя: вы размещаете свой собственный шрифт или используете онлайн-сервис, такой как Google Fonts of Font Squirrel ? Будет ли @font-face доступен для всех (вспомните старые версии IE)? Если нет, то какой шрифт вы выберете?
Эстетика
И последнее, но не менее важное: вам нужен шрифт, который хорошо сочетается с сообщением/услугой, которую вы предлагаете. Вы выберете шрифт с засечками или без засечек? Какой размер? За выбором шрифта стоят «теории», но большинство дизайнеров согласятся, что это, вероятно, вопрос «вкуса».
Некоторые связанные вопросы:
Вам нужен хороший резервный стек шрифтов, потому что вы не найдете 100% решение на каждом устройстве и в каждом браузере.
Вы должны обернуть свои шрифты в @font-face с охватом всех форматов, чтобы обеспечить максимальное покрытие браузером желаемого шрифта. font squirrel создаст синтаксис @font-face и преобразует ваши файлы для вас.
Google Fonts и Typekit хороши в нескольких вещах, но у них также есть некоторые накладные расходы: вы не контролируете их на 100%, вам приходится делать дополнительные HTTP-запросы для их служб, их службы не оптимизированы, и вы зависите от их. сторонние решения неизбежны, но их следует избегать любой ценой; в моем случае я полностью избегаю сторонних решений для шрифтов, следуя правилам, изложенным выше.
Что вам действительно нужно, так это шрифт открытого типа, потому что CSS3 позволяет браузеру использовать шрифты полностью, по сути, позволяя вам разблокировать функции открытого типа, которые мы не видим сегодня в Интернете, такие как маленькие заглавные буквы, лигатуры и т. д., если шрифт, который вы хотите использовать, не является OTF, вы все равно можете без проблем реализовать его в методах, описанных выше; если это OTF, вы можете использовать CSS3 для настоящей реализации веб-типографики.
Существуют библиотеки JavaScript, помимо сервисов шрифтов, таких как шрифты Google, которые заставляют браузеры подчиняться; Я обычно уклоняюсь от них, но они, безусловно, работают. Cufon — лучший, но он также использует флэш-память, поэтому не iOS. Еще есть Lettering.js, который сразу пришел мне в голову.
Что касается чтения: вы должны начать с основ, понимания @font-face и того, как он взаимодействует с браузерами/пользовательскими агентами; понимание форматов шрифтов, особенно .otf и свойств CSS3, раскрывающих возможности OTF. Вы также захотите прочитать о различиях между браузерами и функциями шрифтов .OTF/CSS3, если вы планируете сражаться на этой арене. Лучшее место для их поиска — это сайты со спецификациями отдельных браузеров, где можно узнать, что каждый из них может или не может делать, но святым Граалем являются developer.mozilla и webplatform.org, где можно найти ссылки на HTML5/CSS3, а также работающие решения.
Этот список не является окончательным, однако поможет вам на вашем пути. Обратите внимание на пуленепробиваемый пост @font-face Пола Айриша; он написал серию постов о кросс-браузерном/платформенном синтаксисе @font-face, и это «пуленепробиваемый» синтаксис @font-face, который есть в наборах инструментов большинства веб-разработчиков. Font Squirrel реализует его полностью, когда вы поручите им выкатить для вас комплект @font-face.
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://blog.fontdeck.com/post/15777165734/opentype-1
http://webtypography.net/
http:/ /www.w3.org/wiki/Typography_on_the_Web
http://nicewebtype.com/
http://ffffallback.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature- настройки
https://developer.mozilla.org/en-US/
https://docs.microsoft.com/en-us/archive/blogs/ie/css-corner-using-the-whole-font
читать этот блог, не только этот пост -> http://www.broken-links.com/2012/07/10/unlocking-opentype-features-with-css/
потрясающий инструмент -> http://clagnut.com/sandbox/css3/
блог Clagnut тоже хорош! -> http://clagnut.com/
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
http://opentype.info/blog/2010/08/14/better-web-typography- with-opentype-features/
и снова читайте блог -> http://opentype.info/blog/
http://elliotjaystocks.com/blog/expert-subsets-for-css-in-123/
, отличный блог -> http://elliotjaystocks.com/blog/
http://dev.w3.org/csswg/css-fonts/
открытый список функций шрифта http://www.microsoft.com/typography/otspec/featurelist.htm
открытый тип пользователя руководство (pdf) https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf
Я мог бы перечислить намного больше; если бы вы могли дать мне отзыв о том, насколько это близко к тому, что вы хотите, или насколько оно далеко, я могу ответить более подходящим содержанием. Типографика в Интернете почти готова, и это захватывающее время для разработки в Интернете.
Скотт