20 крутых шрифтов для веб-дизайна. Ознакомьтесь с этим списком современных… | by Abhijit Nayak
Ознакомьтесь с этим списком современных, сверхуниверсальных шрифтов для вашего следующего веб-сайта или приложения.
Опубликовано в
·
Чтение: 10 мин.
·
18 октября 2022 г.
Изображение предоставлено: Маркус Винклер, источник: Pexels.com никто из них не кажется работать?У меня есть.
И обычно нет хорошего способа решить эту проблему, кроме как попробовать следующий шрифт. Но поиск не должен быть случайным.
Этот пост — моя попытка упорядочить выбор и облегчить вам выбор. Я использовал информацию с лучших веб-сайтов по дизайну и свое собственное эстетическое чутье, чтобы составить этот список из 20 шрифтов. Шрифты в этом списке невероятно универсальны и оптимизированы для различных веб-приложений, будь то веб-сайт или приложение.
Я также убедился, что все шрифты в этом списке соответствуют следующим 5 критериям.
- У них должен быть современный и минималистский внешний вид и ощущение, а не выглядеть излишеством. Это придает лаконичный и чистый вид и обеспечивает удобочитаемость, что является основным требованием.
- Они должны быть масштабируемыми достаточными для использования на экранах разных размеров и универсальными достаточными для использования в различных сценариях использования и отраслях.
- Семейство типов должно быть открыто и свободно доступно онлайн ( не обязательно для коммерческого использования! ), и должно иметь различные веса и стили для дизайнеров на выбор. Я добавил ссылки для каждой семьи, так что вы можете скачать и использовать их бесплатно.
- Ими не следует злоупотреблять до такой степени, что они кажутся вездесущими и скучными (например, Futura).
С другой стороны, есть много популярных шрифтов, которые используются повсеместно и по-прежнему актуальны благодаря своей универсальности. Вездесущность не мешает, когда дело доходит до выбора шрифтов, и часто есть веские причины, по которым некоторые шрифты так часто используются. - Они должны использоваться как для отображения, так и для основного текста . Выбор дизайна шрифта для вашего основного контента сильно отличается от выбора шрифта для вашего заголовка и остается одним из основных решений для любого дизайна. Гарнитуры, которые можно использовать только в заголовках (и, следовательно, большинство декоративных шрифтов), не попадут в этот список.
Исторически UX-дизайнеры предпочитали шрифты без засечек шрифтам с засечками на веб-сайтах и в приложениях. Во многом это связано с их удобочитаемостью и более легкой масштабируемостью на цифровых экранах (хотя сегодня это стало менее актуальным, поскольку разрешение экрана с годами улучшилось, а многие шрифты с засечками были оптимизированы для использования на экране).
Кроме того, шрифты без засечек обычно имеют более современный, неформальный и минималистский вид. Вот почему вы найдете больше шрифтов без засечек в списке ниже.
Если вы не знакомы с основами типографики, вы можете прочитать эту статью.
Изучите типографику для дизайна… за 15 минут
Если вы графический или UX-дизайнер, этот пост для вас.
bootcamp.uxdesign.cc
Читая о шрифтах, вы можете встретить такие термины, как гуманистический, геометрический, негротескный и так далее. Знание этих классификаций поможет улучшить ваше понимание шрифтов, но это слишком широкая тема, чтобы охватить ее в этом посте. Чтобы узнать больше об этих классификациях, ознакомьтесь с этой статьей на сайте fontsmith.com.
Руководство по стилям шрифта
Когда дело доходит до общеизвестных категорий шрифтов, вы можете подумать о шрифтах без засечек, рукописных шрифтов и, возможно, плоских. Четыре…
www.fontsmith.com
Установив контекст и ожидания, давайте сразу перейдем к списку из 20 (в произвольном порядке).
Примечание. Для иллюстраций к этой статье я в основном использовал обычные, средние или полужирные начертания. Вы можете попробовать другие варианты стиля и веса, загрузив все семейство по ссылкам, которыми я поделился.
№1. Gotham Текст на языке GothamНикакой чепухи, минималистичность и офигенная читабельность. Вдохновленный архитектурными знаками 20-го века, Gotham представляет собой геометрический шрифт без засечек с достаточно хорошей высотой x, что обеспечивает хорошую читабельность.
Загрузите семейство шрифтов Gotham с веб-сайта Cufon Fonts.
#2. Proxima Nova
Текст в Proxima Nova Один из самых универсальных и хорошо известных шрифтов moser, Proxima Nova одинаково подходит как для печати, так и для использования в Интернете, и дизайнеры справедливо назвали его «Helvetica для Интернета». Гораздо старше, чем некоторые другие шрифты в этом списке, его популярности среди веб-дизайнеров отчасти способствовали другие простые геометрические шрифты без засечек, в первую очередь Gotham.
Proxima Nova сочетает геометрические формы с современными пропорциями и находит широкое применение как для отображения, так и для основного текста.
Загрузите семейство шрифтов Proxima Nova из Adobe Fonts.
#3. Lato
Текст на языке LatoПервоначально задуманный для корпоративного использования, Lato отличается гладким нейтральным внешним видом, что делает его идеальным для основного текста. В то же время он сохраняет некоторую оригинальность и формы при использовании в верхнем регистре и больших размерах, что придает ему гармоничный вид.
Загрузите семейство шрифтов Lato из Google Fonts.
#4. Avenir Next
Text in Avenir Next Avenir Next — один из самых популярных геометрических шрифтов без засечек, а оригинальный Avenir был разработан как реальная альтернатива кажущемуся жестким Futura (еще один вездесущий шрифт). Со временем веса и стили были расширены, а также были внесены дополнительные изменения для оптимизации шрифта для различных интерфейсов.
Он одинаково успешен как для экранных, так и для печатных приложений, а Avenir Next Pro — последний шрифт в этой серии.
Загрузите семейство шрифтов Avenir Next из Cofonts.
#5. Source Sans Pro
Текст в Source Sans ProРазработанный как первый шрифт Adobe с открытым исходным кодом, Source Sans Pro предназначался в основном для использования в проектах пользовательского интерфейса. Шрифт имеет высокую степень разборчивости и хорошо подходит для длинного контента.
Загрузите семейство шрифтов Source Sans Pro с сайта Fontsquirrel.
#6. Open Sans
Text in Open SansOpen Sans — второй по популярности шрифт, используемый в шрифтах Google, и на то есть веские причины. Он классифицируется как гуманистический шрифт, создающий нейтральный, но дружелюбный вид. Он может похвастаться отличной читаемостью в печатном, веб- и мобильном интерфейсах.
Загрузите семейство шрифтов Open Sans из Google Fonts.
#7. Roboto
Текст в Roboto Если вы дизайнер, вы знаете Roboto.
Разработанный Google в 2011 году для использования в ОС Android, нетрудно понять, почему это убийственный шрифт для цифровых пользовательских интерфейсов. По сей день он продолжает оставаться шрифтом по умолчанию для Android.
Загрузите семейство шрифтов Roboto из Google Fonts.
#8. Nunito
Текст в NunitoСбалансированный шрифт без засечек, Nunito использует закругленные концы символов (см. окончания строчной буквы «l» и прописной буквы «N») и изначально был разработан для использования в качестве отображаемого текста. Также доступна некруглая терминальная версия Nunito Sans.
Загрузите семейство шрифтов Nunito из Google Fonts.
#9. IBM Plex Sans
Текст в IBM Plex Sans Этот шрифт, вероятно, лучше всего описывается словами самой IBM: «Он глобальный, универсальный и определенно принадлежит IBM». спроектированный. Evergreen по своему дизайну задумывался как современная альтернатива знаменитой Helvetica Neue. Он также оптимизирован для улучшения разборчивости при меньших размерах.
Загрузите семейство шрифтов IBM Plex Sans из Google Fonts.
#10. Exo
Текст в ExoРазработанный как современный геометрический шрифт без засечек, Exo придает символам футуристический/технологический вид. С 9 весами он может похвастаться большой универсальностью. Чаще всего Exo используется для отображения текста, но он также хорошо работает с текстом малого и среднего размера.
Загрузите семейство шрифтов Exo из Google Fonts.
#11. Текст Ubuntu
в UbuntuКак следует из названия, Ubuntu является шрифтом по умолчанию в ОС Ubuntu и впервые был использован в 2010 году. Этот шрифт был в первую очередь разработан для использования на цифровых экранах, а интервалы и кернинг вручную оптимизируются для использования в качестве основного текста. . Он использует пышные концы букв и имеет отчетливый современный стиль.
Загрузите семейство шрифтов Ubuntu из Google Fonts.
#12. SF Pro Display
Text in SF Pro Display SF Pro Display наиболее примечателен тем, что используется Apple на macOS и iOS.
Этот нейтральный и универсальный шрифт без засечек имеет девять весов. Это переменный шрифт, который включает в себя переменную ширину в сочетании с весом и оптическими размерами.
Загрузите семейство шрифтов SF Pro Display из Cufon Fonts.
#13. Corbel
Текст в CorbelВпервые выпущенный в 2007 году, Corbel представляет собой гуманистический шрифт без засечек, специально разработанный с учетом пользовательского интерфейса. Он направлен на то, чтобы придать экрану упрощенный, чистый и лаконичный вид, а более плавные изгибы обеспечивают хорошую читаемость даже при небольших размерах. Отличный выбор для основного текста!
Загрузите семейство шрифтов Corbel с сайта Dafont.
#14. TT Norms Pro
Текст в TT Norms Pro Вероятно, это самый современный шрифт (на дату выпуска) в этом списке. Вдохновением для дизайнеров было создание чего-то, что будет чрезвычайно универсальным для различных приложений и использует классические пропорции персонажей, сохраняя при этом стильный, современный и нейтральный вид.
Загрузите семейство шрифтов TT Norms Pro с веб-сайта Cufon Fonts.
#15. Монтсеррат
Текст в МонтсерратеЯ намеренно оставил Монтсеррат напоследок. Этот геометрический шрифт без засечек, разработанный в 2011 году и вдохновленный городской типографикой, был невероятно популярен среди веб-дизайнеров и использовался на миллионах веб-сайтов на протяжении многих лет. Но, как указывалось ранее, повсеместность не является решающим фактором, когда речь идет о шрифтах. Montserrat также часто рассматривается как альтернатива аналогичным шрифтам без засечек, таким как Gotham и Avenir.
Загрузите семейство шрифтов Montserrat из Google Fonts.
Хотя шрифты с засечками относительно менее распространены в Интернете, чем их аналоги без засечек (особенно в приложениях), популярность шрифтов с засечками на веб-сайтах постепенно восстанавливается. Вот мои 5 лучших вариантов (в произвольном порядке).
#16. Playfair Display
Текст в Playfair Display Загрузите семейство шрифтов Playfair Display из Google Fonts.
#17. Merriweather
Текст в MerriweatherЗагрузите семейство шрифтов Merriweather из Google Fonts.
#18. Libre Baskerville
Текст в Libre BaskervilleЗагрузите семейство шрифтов Libre Baskerville из Google Fonts.
#19. PT Serif
Текст в PT SerifЗагрузите семейство шрифтов PT Serif из Google Fonts.
#20. Lora
Текст в LoraЗагрузите семейство шрифтов Lora из Google Fonts.
Как и все в дизайне, использование и восприятие шрифта на веб-сайте или в приложении зависит от аудитории, контекста и характера контента или обмена сообщениями. Конечно, универсальный подход здесь не работает. Как дизайнер, вы должны смотреть на контекст и выбирать наиболее подходящий шрифт.
И последнее замечание: помните об этих простых советах при применении шрифта к дизайну
- Ограничьтесь 1 или максимум 2 шрифтами . Если вы запутались, используйте разные веса из одного и того же семейства типов.
- Установите высоту строки на ~150% от размера шрифта для хорошей читабельности. Так что, если ваш шрифт 12 pt, высота строки может быть 18 pt.
- Используйте модульных масштабируемых размеров шрифта — это серия размеров шрифта, которые придают вашему дизайну более гармоничный вид. Это 8, 16, 24, 32, 48, 64. 16 pt лучше всего подходит для основного текста.
- Старайтесь избегать слишком часто используемых шрифтов (например, Futura или Helvetica) и используйте вместо них более новые, похожие альтернативы.
Удачного проектирования!
Понравился этот пост? Если да, пожалуйста, выразите благодарность, нажав кнопку « хлопать в ладоши ». Весёлые мелочи — вы можете получить до 50 раз! Это помогает донести контент до большего числа единомышленников.
Пожалуйста, поделитесь своими мыслями и отзывами в комментариях ниже. Это поможет мне стать лучше, а также вдохновит меня на создание большего.
Я стараюсь регулярно публиковаться на Medium. Подпишитесь на эту учетную запись, чтобы получать подобный контент в будущем, и нажмите здесь, чтобы получать каждое сообщение прямо на свой адрес электронной почты . Вы также можете найти меня на Linkedin и Twitter .
Лучший шрифт для веб-сайта: как сделать свой бренд популярным
Создание веб-сайта для вашего нового предприятия — это прекрасная возможность воплотить свою мечту в жизнь. Возможно, вы уже много думали о выборе и использовании фирменных цветов , или вы уже знакомы с дизайном логотипа. Но есть пара деталей, которые можно было бы упустить, например, выбор шрифта. Вы знаете тон голоса и индивидуальность своего бренда, но выбор правильного шрифта для вашего веб-сайта помогает передать целостный образ так же, как использование цвета или слогана.
Попробуйте Site Maker бесплатно
На выбор предлагаются буквально тысячи шрифтов, и многие из них бесплатны.
Тем не менее, с таким количеством доступных вариантов, как вы ориентируетесь в водах типографики? Как сохранить разборчивость и характер? К счастью, у нас есть то, что поможет вам выбрать правильный шрифт. Ознакомьтесь с этой разбивкой лучших шрифтов для веб-сайтов на основе ваших потребностей в брендинге и дизайнерских желаний.
12 лучших шрифтов для веб-сайтов
Чтобы считать шрифт лучшим шрифтом или одним из лучших, необходимо учитывать несколько факторов. Хотя личные предпочтения и узнаваемость бренда являются решающими факторами, шрифт должен быть читабельным. В частности, шрифт веб-сайта должен быть четким и чистым, потому что основная цель вашего сайта — донести информацию до ваших зрителей. Поэтому все 12 примеров в нашем руководстве легко понять, поэтому вы можете сосредоточиться на распространении своего сообщения.
1: Montserrat
Google Fonts
Montserrat — это популярный шрифт для создания веб-сайтов благодаря его смелому и откровенному виду.
Современность этого шрифта без засечек отлично подходит для всего: от привлекательных заголовков до мелкого текста. Благодаря обновлению, выпущенному летом 2017 года, корректировка веса делает варианты Montserrat Regular идеальными для более длинных текстов, таких как основной текст. Для брендов или личных веб-сайтов, предназначенных для провидцев в творческой сфере, Montserrat делает свое дело. Он молодой, свежий и инновационный.
2: Roboto
Google Fonts
Универсальность, присущая Roboto, делает его визуально привлекательным шрифтом, который лучше всего подходит для веб-дизайна или любого другого проекта, где вы хотите произвести впечатление доступного и профессионального. Он стал довольно модным, и легко понять, почему, благодаря его геометрической, но открытой форме кривой. И независимо от его готического происхождения, он не имеет суженных, узких форм, как его предшественники, занимая необходимое пространство для улучшения читаемости, сохраняя при этом свой отличительный стиль.
3: Open Sans
Google Fonts
Скорее всего, вы слышали об этом. Open Sans не требует представления, потому что это один из самых известных шрифтов без засечек. Он излучает характер и теплоту, отдавая предпочтение удобочитаемости, поэтому понятно, почему бренды отдают предпочтение его надежной библиотеке шрифтов. Он идеально подходит для сайта бренда в сфере здравоохранения или гостиничного бизнеса, потому что продвигает честность и хорошие ценности — сильный моральный компас, которому люди могут доверять.
4: Поппинс
Google Fonts
В геометрическом стиле без засечек Poppins нет ничего нового, но это альтернатива тому жанру, на который стоит обратить внимание благодаря своим округлым буквам и универсальности. Он мягкий, но доминирующий. Это просто для расшифровки, а также визуально динамичный выбор для различных копий веб-сайтов. И в результате его можно использовать для множества сайтов.
5: Arsenal
Google Fonts
Получив признание в 2011 году на Всеукраинском конкурсе шрифтов, Arsenal отлично подходит для основного текста и передачи профессиональной информации.
Многие шрифты предпочитают заголовки и крупный текст на экране, но Arsenal понимает тонкости контраста, элегантности и индивидуальности, которые делают типографику привлекательной.
6: Merriweather
Google Fonts
Merriweather напоминает Times New Roman — выдающегося пожилого джентльмена из мира типографики, которого мы знаем и любим. Тем не менее, Merriweather немного более расслаблен, что делает его идеальным современным шрифтом для веб-сайтов с большим количеством основного текста. Если вы хотите создать блог или иметь раздел своего сайта, посвященный статьям и размышлениям, то этот прочный шрифт с засечками с его потрясающей приятностью сослужит вам хорошую службу.
7: Monolith
Envato Elements
В семействе шрифтов без засечек Monolith гордится своей четкостью. Поэтому он отлично подходит для печати и чтения в Интернете. Кроме того, он обладает настоящим подходящим курсивом, поэтому любой акцент на печатном тексте выглядит как дома.
Это фантастическая альтернатива Open Sans, если вы ищете любимое дружелюбие с изюминкой. Современный и элегантный, этот шрифт подходит для заголовков, подзаголовков и основного текста.
8: Либре Франклин
Google Fonts
Libre Franklin — альтернатива Franklin Gothic. Это дань уважения этому шрифту 1912 года, развитие его блеска и перенос его в 21-й век. Новая версия, созданная литейным заводом шрифтов в Аргентине, включает девять весов шрифта. Этот шрифт гарантированно сделает заявление в заголовках или в рекламном баннере, разбросанном по главной странице вашего сайта.
9: Metropolis
Github
Альтернатива модному Proxima Nova, Metropolis имеет девять начертаний и курсив, и это идеальная копия для своего вдохновения. Бесплатный шрифт структурирован, динамичен и четок, поэтому вы можете легко использовать его в своем веб-сайте, не беспокоясь о читаемости. Он хорошо подойдет для любого фирменного стиля из-за простоты, которая делает его дизайнерским хамелеоном, поддающимся окружающей среде, в которой он обитает.
10: Pulse
Envato Elements
Минималистичный классический шрифт Pulse — высококачественная альтернатива Монтсеррату. У него есть только чутье, поэтому он может легко перемещаться между заголовками и основным текстом на веб-сайтах — отличительная черта лучших шрифтов для гибкости веб-сайта. Популярность ярких, но простых шрифтов без засечек проистекает из их простой эстетики с нужной долей элегантности, которая обеспечивает профессионализм и уравновешенность.
11: Нанум Готика
Google Fonts
Оптимальный для использования на экране, шрифт Nanum Gothic отличается теплотой и доступностью, которые радуют любителей прокрутки в поисках информации с первого взгляда. Шрифт Nanum Gothic, который подходит для разных размеров и языков, силен и надежен. Но не сбрасывайте со счетов его визуальную привлекательность, в которой реализованы современные типографские элементы, обеспечивающие как форму, так и функцию.
12: Enriqueta
Font Squirrel
Бесплатный дубликат Rockwell, популярного шрифта с засечками.
Enriqueta имеет изогнутые буквы и штрихи, которые шрифты с засечками обычно привносят в метафорический стол. В этом шрифте буквы немного ближе друг к другу, поэтому рассмотрите возможность использования их в более крупном тексте. Это делает эффектный заголовок или рекламный баннер, когда вам нужно сказать что-то важное и декларативное своим зрителям. Используйте шрифт экономно, и пусть последние штрихи на буквенных формах ослепят зрителей, когда вы удивите их своим остроумием.
Другие соображения по выбору шрифта для вашего веб-сайта
Лучший шрифт для вашего веб-сайта зависит от вашего усмотрения. Вы были свидетелями того, как несколько лучших претендентов выставляли напоказ свои вещи, и у вас может сформироваться четкое представление о том, что делает шрифт хорошим для посетителей вашего сайта. Но давайте остановимся на некоторых ключевых факторах, которые следует учитывать при выборе шрифта для вашего веб-сайта. Эти советы помогут вам в поиске идеального шрифта, который поможет вывести ваш бренд на новый уровень.
- Ваш бренд. В конечном счете, шрифт должен отражать ваш бренд, ваше руководство по стилю и запоминающийся визуальный образ, который вы довели до совершенства. Лирический или выдающийся шрифт может быть хорошим предзнаменованием в литературном секторе Интернета. Тем не менее, для бренда, подчеркивающего свою узнаваемость и солидный образ, более теплый и округлый шрифт является лучшим вариантом.
- Без засечек и без засечек. С засечками или без? Вот в чем вопрос. В Интернете благороднее заканчивать письмо декоративным украшением или отдавать предпочтение чистым, четким краям резкого окончания, мы никогда не узнаем по-настоящему. И все же стиль без засечек становится все более популярным среди брендов, которые хотят, чтобы их веб-сайты были легко читаемы для всех посетителей.
Шрифт с засечками по-прежнему читаем, но он более классический и традиционный, тогда как шрифты без засечек выглядят современно и свежо.
Опять же, выбор за вами — подумайте об идентичности вашего бренда и удобочитаемости в равной степени.
- Изменчивость. Когда шрифт является переменным, он допускает изменение веса и ширины шрифтов. Это важно учитывать при выборе шрифта, потому что для заголовка могут потребоваться буквы большего веса, в то время как основной текст может иметь обычный или более легкий оттенок. Шрифт с вариативностью выглядит правильно для всех начертаний, размеров и заголовков.
Какой шрифт лучше всего подходит для вашего сайта?
Типографика — это искусство, и выбор правильного шрифта требует глубокого понимания потребностей вашего бренда и веб-сайта. Это еще одна форма выражения, которая может помочь вашим зрителям понять миссию бренда — личную или профессиональную. Это еще один идентификатор, который демонстрирует вашу индивидуальность. Вы старомодны и серьезны, как Times New Roman, или хотите встряхнуть прошлое современным взглядом, достойным аплодисментов?
К счастью, с Генератором бесплатных шрифтов Namecheap у вас будет место, где можно найти лучшие шрифты, достойные любой формы выражения.