Как выбрать шрифт для сайта

С засечками или без?

Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.

Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста

При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой

Считается, что любые правила можно нарушать, так что шрифты с засечками на сайте использовать можно… но очень-очень аккуратно и в исключительных случаях. Например, шрифтом с засечками можно набрать заголовок, чтобы сделать его еще более отличающимся от основного текста.

Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.

Using Bold Text

You must add another rule containing descriptors for bold text:

Example

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
 
font-weight: bold;
}

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

❮ Previous
Next ❯

10 Best Web Safe Fonts that Work with HTML & CSS

This web safe font list includes the most popular fonts and the best widely used typography fonts. While some are free, please purchase genuine authorized fonts.

1. Arial

The Arial font is one of the most widely used designs in the last 30 years. Designed by Monotype Imaging designers Robin Nicholas and Patricia Saunders in 1982 for use with early IBM laser printers. Since Arial is easy to read in both large and small sizes and in a variety of applications, Arial has been the main screen font for decades.

Use for: advertising, book design, office communications, posters, large print ads

2. Calibri

The release of Calibri by Microsoft and its implementation as the default font in many applications is widely recognized. It is a humanistic sans serif font known for its warm and rounded lines. Calibri’s compact layout gives it the flexibility to work in a wide range of text sizes.

Use for: digital media

3. Times NewRoman

One of the most common font types is Times New Roman. This serif font comes from the British «Times». In 1929, font expert Stanley Morison criticized the magazine’s fonts as difficult to read and ugly. The magazine’s people accepted his criticism and asked him to design a new font suitable for magazine reading. So, Morison collaborated with Victor Lardent from the magazine to design the now famous Times New Roman.

Use for: books, periodicals, annual reports, brochures, newspapers

4. Helvetica

Helvetica is one of the most widely used sans serif fonts, created in 1957 by Max Miedinger and Eduard Hoffman. The neutral design of this font makes it quite usable in a variety of applications. Due to its usability, Helvetica is ubiquitous and has always been a popular choice for corporate identity. In addition, Helvetica is widely used by the US government, and the Helvetica font is used on the US tax bill.

Use for: brand trademark

5. Tahom

Tahoma is a very common sans serif font. The font structure is similar to Verdana, its character spacing is small, and its support for Unicode word sets is large. It was launched by Microsoft in 1999. Many people who don’t like the Arial font often use Tahoma instead. Specifically, Arial is criticized for certain style issues, such as uppercase «I» and lowercase «l» being difficult to distinguish

Use for: screen dialogs, menus

6. Georgia

Georgia is a serif font, designed by the famous font designer Matthew Carter for Microsoft in 1993. One of its strengths is good readability even in small font size.

Use for: e-book, mobile phone, computer webpage

7. Verdana

Verdana is a sans serif font designed by Matthew Carter for Microsoft. Like the font Frutiger, the Verdana design concept is adapted to the low-resolution computer screens of that time. The breadth and width of Verdana characters are key to the legibility of this font on the screen. Although the Verdana font family is small in size, it has a higher resolution and as such is one of the most popular fonts.

In 2010, IKEA abandoned Futura, which had been in use for many years, and turned to Verdana. According to IKEA, the reason for this change was to ensure that the font could be adapted to texts of various countries (previous IKEA fonts were not compatible with Asian characters), thus ensuring the consistency of the IKEA design. Thus, Verdana has a wide international appeal and usability.

Use for: e-book, mobile phone, computer webpage

8. Optima

The Optima font is a clear and precise font designed by the famous designer Hermann Zapf. Optima is inspired by classical Roman inscriptions, with slightly different curves and lines, leaving an elegant and clear impression. Therefore, Optima is often used to convey classic ideals, as well as current trends. For example, Estée Lauder uses it as an official typeface design.

Use for: poster design, bookbinding, album cover, product packaging design

9. Palatino

The Palatino font series is said to be one of the ten most used fonts in the world. Palatino’s design uses classic serif fonts in a strong, open style that is easy to read and very attractive. Its popularity has spawned many imitators.

Use for: newspapers and magazines, advertising, e-books, mobile apps, computer pages

10. Candara

Candara is a sans serif font developed byFont Designer Gary Munch for Microsoft and shipped with Windows Vista. ——Wikipedia

Различия между семействами шрифтов

Существуют несколько различных семейств шрифтов, которые используются в разработке сайтов.

Serif – шрифты с засечками (с хвостиками на концах строки, образующей букву). Одни из самых старых и классических семейств шрифтов. Именно такие шрифты использовали люди при создании первых дизайнов в мире. Шрифт с засечками хорошо читабелен на любом расстоянии, его можно использовать как в заголовках, так и для основного текста.

Black lettering – жесткий, тяжелый, трудночитаемый готический шрифт. Является древнейшим семейством шрифтов, именно с использованием таких шрифтов человечество писало свои первые книги. В настоящее время рекомендуется использовать его только в заголовках.

Slab-serif – семейство шрифтов с толстыми засечками. Являются современной версией шрифтов с засечками. Обычно такие шрифты ассоциируются с модой, молодежью, «хипстерами». Рекомендуется также использовать их только для заголовков или для выделения цитат в тексте.

Sans-serif – современный шрифт без засечек. Шрифты этого семейства могут быть различными: более округлыми, квадратными, легкими или более толстыми. В данном семействе достаточно много стилей шрифтов, поэтому разобрать их стоит отдельно.

Геометрический шрифт без засечек является достаточно читабельным и может использоваться как в заголовках, так и для основного текста. Однако нужно учитывать, что чтение длинных текстов, написанных шрифтом, составленным из символов у которых нет разницы в высоте, может вызывать дискомфорт и быстрое утомление.

Очень популярный шрифт без засечек – Helvetica. Причина его популярности – четкое сохранение разницы в высоте символов. Закруглённые символы шрифта делают чтение больших текстов комфортным и простым. Данный шрифт используется как в заголовках, так и для сносок, цитат и главного текста. Шрифт хорошо читается в любом размере.

Handwriting (рукописный) – семейство шрифтов, имитирующих рукописное написание. Отличаются мягкими, плавными линиями и считаются неформальными. Такие шрифты менее читабельны, поэтому рекомендуется использовать только для крупных коротких заголовков или цитат. Также нужно помнить, что использование таких шрифтов в официальных документах – дурной тон.

Display (декоративный) – шрифты без определенных принципов дизайна и построения. Такие шрифты используются в логотипах компаний, заголовках на сайтах. Существует их огромное количество, разнообразных форм и начертаний. Длинные тексты такими шрифтами не пишут.

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browsers and comes in formats such as TTF, WOFF, EOT and SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }

Шрифт без засечек

GORGEOUS

Дизайнер Rajesh Rajput создал этот современный, элегантный шрифт с колоссальными 20ю различными начертаниями и несколькими языковыми версиями. Идеально подходит для модных и стильных проектов, великолепно смотрится в больших титрах и переплетается с фоновыми элементами.

LUXIA

Этот современный элегантный шрифт, созданный по мотивам классических шрифтов Didot, может использоваться как с эффектами, так и без. Luxia — это очень стильный шрифт с множеством возможностей для самых разных творческих проектов. Он прекрасно подходит для заголовков, субтитров и длинных текстов.

SIMPLIFICA

Шрифты Sans, такие как simpifica, считаются элегантными шрифтами из-за их простоты. Заглавные буквы имеют прямые линии и идеально наклоненные диагонали. Строчные буквы имеют изогнутые клеммы, создавая особый тон в длинных текстах.

COCO

Дизайнер Хендрик Роландес создал Coco с мыслью о профессионале моды. Тонкие вытянутые буквы со специальной прозрачностью по краям создают прекрасные заголовки и короткие текстовые фрагменты. Коко прекрасно работает!

STEINER

Этот тонкий округлый шрифт в стиле ART-деко, разработанный Gabriele Magurno, подходит для тех проектов, которым нужен элегантный шрифт с небольшим поворотом. Разная ширина отдельных букв может потребовать корректировки кернинга для лучшего баланса.

COCOMAT

Дизайнеры Zetafont создали Cocomat, вдохновленные стилем двадцатых годов и искусством итальянских футуристов. Детали нижних планок придают этому элегантному шрифту особую изысканность.

CLEARLIGHT

Clearlight — это шрифт, который органично сочетает элегантность с индустриализмом. Дизайнеры из Nima Visual разработали Clearlight для использования в качестве заголовков, субтитров и коротких абзацев. Это отлично подойдет для модной робототехнической компании или высококлассного бренда технологических услуг.

DINER

Diner — еще один шрифт, вдохновленный ар-деко. Это очень длинный и тонкий шрифт, который представлен только в верхнем регистре, но имеет четыре совершенно разных веса. Разработанный Дэвидом Раковски, Diner идеально подходит для заголовков и логотипов и будет отлично смотреться в сочетании с закругленным шрифтом каллиграфии.

Coves — это тот тип элегантного шрифта, который работает практически с любым стилем проекта. Не привязываясь к какой-либо конкретной эпохе или движению, элегантность в Coves проистекает из идеально геометрического стиля, как светлых, так и жирных, прописных и строчных. Дизайнер Джек Харватт создал один из самых универсальных шрифтов, доступных сегодня.

CASUAL

Если бы элегантность могла объединиться в шрифте, она была бы в этом. У Casual есть уникально закругленные точечные клеммы, придающие букве особый вид небрежности. Этот шрифт отлично подходит для наклеек и приглашений. Заголовки выглядят прекрасно, в то время как более длинный текст может выглядеть немного переполненным.

PRESTAGE

Prestage — еще один великолепный шрифт от Craft Supply — высокий элегантный шрифт с твердыми и контурными вариациями. Этот шрифт отлично подходит для печати или Интернета и идеально подходит для творческой индустрии. Он отлично смотрится как в заголовках, так и в тексте, желательно для коротких, кратких абзацев. Prestage — отличный выбор для элегантной упаковки, обложек журналов, блогов и даже логотипов.

AUDREY

Дизайнер Кристина Пагнотта создала шрифт Audrey как элегантную альтернативу без засечек для названий и типографских композиций. Шрифт доступен в трех вариациях, жырный, регулярный или наклонный. Варианты внутри шрифта предоставляют множество возможностей для любого элегантного проекта в Интернете и печати.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Самые рекомендуемые Google веб-шрифты

Здесь вы найдете подборку шрифтов, которые оказались в этом списке из-за их эстетического аспекта, но, прежде всего, функциональности, в том числе семейства с множеством стилей и весов.
Мы выделили шрифты, оптимизированные для интерфейсов, и другие, которые или удобны для чтения на мобильных устройствах, а также разборчивы на любом устройстве, будь то смартфон, стационарный компьютер или планшет.

• Alegreya

• B612

• Muli

• Titillium Web

• Varela

• Vollkorn

• IBM Plex

• Crimson Text

• Cairo

• BioRhyme

• Karla

• Lora

• Frank Ruhl Libre

• Playfair Display

• Archivo

• Spectral

• Fjalla One

• Roboto

• Montserrat

• Rubik

• Source Sans

• Cardo

• Cormorant

• Work Sans

• Rakkas

• Concert One

• Yatra One

• Arvo

• Lato

• Abril FatFace

• Ubuntu

• PT Serif

• Old Standard TT

• Oswald

Как использовать веб-шрифты

На данный момент большинство дизайнеров знают, как пользоваться веб-шрифтами, но, если вы не уверены, вот два основных способа. Первый —использовать библиотеки веб-шрифтов, такие как Google Fonts, Webtype, Fonts.com или Typekit и загружать шрифт с их серверов, как вы увидите в этом примере:

Второй — разместить шрифт на своем сервере и использовать правило @font-face в таблице стилей, как показано здесь:

Сервисы встраивания веб-шрифтов

Google Web Fonts (GWF) или Typekit — это сервисы которые позволяют использовать шрифты, размещенные на их серверах. GWF бесплатен, не требует наличия учетной записи и не ограничивает трафик или домены. Typekit же устанавливает стоимость услуги в зависимости от количества доменов, на которых используется шрифт, или от ежемесячного трафика сайта. Одной из наиболее ценных характеристик GWF является возможность загрузки версии шрифтов для стационарных компьютеров для использования на этапе разработки проекта.

Реализация

Это действительно быстро и просто:

1. Выберите шрифт. Вы можете добавить его в свою коллекцию или использовать “quick-use” для генерации кода и опций для этого шрифта.

2. Скопируйте и вставьте сгенерированный код в <Head>

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. Шрифт теперь доступен в вашем коде CSS

   body { font-family: 'Tangerine', serif; font-size: 48px; }

Здесь вы можете обратиться к расширенному руководству по стилям, подмножествам сценариев и использованию нескольких шрифтов.

Встраивание шрифтов с использованием правила @font-face

Шрифты размещаются на сервере пользователя независимо от внешних сервисов. @font-face — это устаревшее правило CSS2, которое было повторно введено в спецификации CSS3 и поддерживается почти всеми современными браузерами. Веб-шрифт — это настраиваемый шрифт, который поддерживается различными браузерами и доступен в таких форматах, как TTF, WOFF, EOT и SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }

Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Шрифты используемые в веб-дизайне

Arial

Компактный шрифт, имеет преимущество благодаря высоте букв.

Tahoma

Подходит больше для технической тематики, имеет средне-широкие буквы.

Verdana

Хороший вариант использования шрифта для сайта. Будет хорошо и удобно читаться, благодаря ширине букв и между буквенном расстоянии.

Trebuchet MS

Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman

Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif

Системный шрифт Windows, хорошо читается при разных режимах.

Чтобы правильно выбрать нужный шрифт для сайта, можно написать несколькими выбранными шрифтами, чтобы визуально сравнить, какой шрифт лучше смотрится и воспринимается для чтения. Еще можно попробовать изменить расстояние между буквами и размер шрифта.

Так какой все таки шрифт считается самым оптимальным?

Тот, от которого меньше устают глаза. По мнению ученых из Лаборатории зрительной эргономики США, это шрифт Verdana. Врачи утверждают, что он максимально снижает напряжение глазных мышц при чтении.

Американские специалисты отмечают: шрифт Verdana 10-13 кегля наиболее комфортен для восприятия с экрана. Преимущества шрифта — отсутствие засечек, увеличенный межстрочный интервал, большая высота строчных букв без выносных элементов и четкие различия между знаками схожего начертания (такими как i/I/L/l/1).

Создатель шрифта Verdana — художник Мэттью Картер (Matthew Carter). Он разработал данный шрифт для компании Microsoft в 1996 году. Целью было создание шрифта, который легко читается с экрана даже при малом размере букв. Сегодня Verdana входит во все версии Windows, Office и Internet Explorer для операционных систем Windows и Macintosh. Плюс все перечисленные выше шрифты.

В настоящее время все больше используются подгружаемые Google fonts шрифты:

Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию.

Данный сервис позволяет использовать любые понравившиеся вам шрифты на своем сайте. Выбранные шрифты подгружаются на ваш сайт с CDN-хостинга. Не рекомендуется загружать большое количество шрифтов, так как это сказывается на скорости загрузки страниц сайта.

What is a “Web Safe Font”?

Simply put, this term is used to describe a font that is universally installed across all devices. Since they are stored locally, your website should load faster when you use a web-safe font.

This will ultimately affect SEO as page loading speed is one of the factors taken into account when ranking pages on the SERP.

That’s why we recommend using a web-safe font – to make sure your readers can view content easily and your website’s performance is not negatively impacted.

Keep in mind that there are alternatives to website safe fonts, which usually share the same characteristics as popular typefaces. For example, the alternatives for the Sans Serif font like Helvetica are Acumin and Univers.

But unlike their web-safe counterparts, alternative fonts are often not prepackaged on all OS. That being said, you may want to use one of them because it may seem that a popular font is overused.  Just remember that you might sacrifice the speed of your website in exchange.