Не просто текст

Бухвалова Юлия LiveJournal

Предыдущие материалы по теме

How to Create (Animated) Text Fills
Оживляем текст (слайды)

Не просто текст

Темы

Кодировки
Юникод
OpenType
Кастомные, вариативные и цветные шрифты

Привет Русский ねぇ。 Японский هی Персидский Γεια σας Греческий

В начале было слово

ASCII

American Standard Code for Information Interchange

ASCII

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
0.	NUL	SOH	STX	ETX	EOT	ENQ	ACK	BEL	BS	HT	LF	VT	FF	CR	SO	SI
1.	DLE	DC1	DC2	DC3	DC4	NAK	SYN	ETB	CAN	EM	SUB	ESC	FS	GS	RS	US
2.		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/
3.	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?
4.	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
5.	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_
6.	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o
7.	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	DEL

Расширенные кодировки

Windows-1251

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
8.	Ђ 402	Ѓ 403	‚ 201A	ѓ 453	„ 201E	… 2026	† 2020	‡ 2021	€ 20AC	‰ 2030	Љ 409	‹ 2039	Њ 40A	Ќ 40C	Ћ 40B	Џ 40F
9.	ђ 452	‘ 2018	’ 2019	“ 201C	” 201D	• 2022	– 2013	— 2014		™ 2122	љ 459	› 203A	њ 45A	ќ 45C	ћ 45B	џ 45F
A.	A0	Ў 40E	ў 45E	Ј 408	¤ A4	Ґ 490	¦ A6	§ A7	Ё 401	© A9	Є 404	« AB	¬ AC	AD	® AE	Ї 407
B.	° B0	± B1	І 406	і 456	ґ 491	µ B5	¶ B6	· B7	ё 451	№ 2116	є 454	» BB	ј 458	Ѕ 405	ѕ 455	ї 457
C.	А 410	Б 411	В 412	Г 413	Д 414	Е 415	Ж 416	З 417	И 418	Й 419	К 41A	Л 41B	М 41C	Н 41D	О 41E	П 41F
D.	Р 420	С 421	Т 422	У 423	Ф 424	Х 425	Ц 426	Ч 427	Ш 428	Щ 429	Ъ 42A	Ы 42B	Ь 42C	Э 42D	Ю 42E	Я 42F
E.	а 430	б 431	в 432	г 433	д 434	е 435	ж 436	з 437	и 438	й 439	к 43A	л 43B	м 43C	н 43D	о 43E	п 43F
F.	р 440	с 441	т 442	у 443	ф 444	х 445	ц 446	ч 447	ш 448	щ 449	ъ 44A	ы 44B	ь 44C	э 44D	ю 44E	я 44F

KOI8-R

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
8.	─ 2500	│ 2502	┌ 250C	┐ 2510	└ 2514	┘ 2518	├ 251C	┤ 2524	┬ 252C	┴ 2534	┼ 253C	▀ 2580	▄ 2584	█ 2588	▌ 258C	▐ 2590
9.	░ 2591	▒ 2592	▓ 2593	⌠ 2320	■ 25A0	∙ 2219	√ 221A	≈ 2248	≤ 2264	≥ 2265	A0	⌡ 2321	° B0	² B2	· B7	÷ F7
A.	═ 2550	║ 2551	╒ 2552	ё 451	╓ 2553	╔ 2554	╕ 2555	╖ 2556	╗ 2557	╘ 2558	╙ 2559	╚ 255A	╛ 255B	╜ 255C	╝ 255D	╞ 255E
B.	╟ 255F	╠ 2560	╡ 2561	Ё 401	╢ 2562	╣ 2563	╤ 2564	╥ 2565	╦ 2566	╧ 2567	╨ 2568	╩ 2569	╪ 256A	╫ 256B	╬ 256C	© A9
C.	ю 44E	а 430	б 431	ц 446	д 434	е 435	ф 444	г 433	х 445	и 438	й 439	к 43A	л 43B	м 43C	н 43D	о 43E
D.	п 43F	я 44F	р 440	с 441	т 442	у 443	ж 436	в 432	ь 44C	ы 44B	з 437	ш 448	э 44D	щ 449	ч 447	ъ 44A
E.	Ю 42E	А 410	Б 411	Ц 426	Д 414	Е 415	Ф 424	Г 413	Х 425	И 418	Й 419	К 41A	Л 41B	М 41C	Н 41D	О 41E
F.	П 41F	Я 42F	Р 420	С 421	Т 422	У 423	Ж 416	В 412	Ь 42C	Ы 42B	З 417	Ш 428	Э 42D	Щ 429	Ч 427	Ъ 42A

№ЯФкЯЬЯЯТвСкЯзСЮЩХ ЫЯЮУХЮдвЩвеХд СЮСЬЩдЩоХгЫЩЪ ЧЩвЯЩЮдХЧвСдЯв. ыЯЧЮЩдЩзЮСб гЯгдСзЬбРнСб ЧХЮХдЩоХгЫЩ вХФеУЩвеХд ФеСЬЩкЭ, одЯ аЯкжХ аЯФдзХвФЩЬЯги ЭЮЯЧЯоЩгЬХЮЮйЭЩ ЯайдСЭЩ. ц.ћЩЬХв, ч.чХдХ, ц.ћЬХЧХЬЩ Щ с.ћЬХЧХЬЩ зйвСкЩЬЩ дЩаЯЬЯЧЩоХгЫеР СЮдЩдХке ЫЬСггЩУЩкЭС Щ вЯЭСЮдЩкЭС оХвХк авЯдЩзЯаЯгдСзЬХЮЩХ ЩгЫеггдзС "ЮСЩзЮЯЧЯ" Щ "гХЮдЩЭХЮдСЬиЮЯЧЯ", аЯмдЯЭе СггЯУЩСУЩб ФСХд ШвСЭЯзйЪ ЫЯЭаЬХЫг, аЯгзбнХЮЮйЪ ФЩЬЭеЮгЫЯЭе ТЯЧе хЮЫЩ,. эЯУкй, ѓРЮпУкй Щ ФвеЧЩХ гоЩдСЬЩ, одЯ ЭХФЩСЭЩЫг ФХЫЬСвЩвеХд гСвЯг. чСЬСЫдЩЫС ЮСФЫегйзСХд ЦвЯЮд. №ЯмдЯЭе ЭЮЯЧЩХ ЧХЯЬЯЧЩ гоЩдСРд, одЯ вСгдзЯвХЮЩХ аСвСЬЬХЬиЮЯ.

Unicode

Универсальная кодировка

История

1988 — первый черновик
1991 — опубликована версия 1.0.0

Unicode over 60 percent of the web (Google, 2012)

Tired of looking at boring system fonts at websites? Look at this page with Safari 3.1! (2008)

OpenType

Расширяемый шрифтовой формат

Преимущества

кроссплатформенный
поддерживает Unicode, 65 000+ символов
эффективное сжатие
улучшенная типографика (лигатуры, дроби, исторические символы) с автозаменой
улучшенный кернинг
расширяемый формат 🔥

Форматы

EOT — поддерживается только в IE
OTF — на основе PostScript
TTF — на основе TrueType
WOFF — сжатый OpenType шрифт
WOFF2 — более лучше сжатый OpenType шрифт

Кастомные шрифты

Пример кода

@font-face {
  font-family: MyFont;
  src: local('MyFont'),
    url('path/MyFont.woff2') format('woff2'),
    url('path/MyFont.woff') format('woff');
}

body {
  font-family: MyFont, Helvetica, Arial, sans-serif;
}

Где брать?

fonts.google.com — бесплатно
fontsquirrel.com — бесплатно
fonts.adobe.com — в составе подписки на Creative Cloud
myfonts.com — покупка отдельных шрифтов
fontspring.com — покупка отдельных шрифтов, есть бесплатные
fontfabric.com — покупка отдельных шрифтов, есть бесплатные

Проблема кастомных шрифтов

Вариативные шрифты

Настройки шрифта

Низкоуровневые настройки

font-feature-settings: "liga" on, "zero" on;

Высокоуровневые настройки

font-variant-ligatures: common-ligatures;
font-variant-numeric: slashed-zero;

Вариации

font-variation-settings: "ital" 1;

Ital

Возможности

font-feature-settings: "liga" on;

fine

Стандартные настройки

Fusce semper id arcu id porttitor. Etiam sed quam vel ante laoreet varius at sed purus. Morbi commodo est nec felis tempor sollicitudin. Aliquam gravida nunc quis vestibulum volutpat. Sed quis dui sodales, congue risus vel, blandit lectus. In porta odio purus, id posuere tortor viverra vel. Etiam nunc quam, rutrum non diam eu, cursus tincidunt lorem.

Move
is life

Кастомные настройки

Пример кода

font-variation-settings: "BLDA" 913.8, "BLDB" 162.8, "SKLB" 1000;

Text Text Text Text Text Text

Использование

@font-face {
  font-family: 'MyFontVariable';
  src: url('source-sans-variable.woff2') format('woff2');
  font-weight: 1 999;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('source-sans-black.woff2') format('woff2');
  font-weight: 900;
}

html {
  font-family: 'MyFont', sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: 'MyFontVariable', sans-serif;
  }
}

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

Плюсы

гибкость
небольшой вес

Минусы

подержка браузерами
мало шрифтов
мало шрифтов с кириллицей

Песочницы

Инструменты

Бесплатные шрифты

Цветные шрифты

Text Text Text Text

Text

😃 🐙 🎵 💃

Shigetaka Kurita, Emoji, 1998-1999 (MoMA, 2016)

Emoji Proposals

Date	Title	Authors
2000-04-26	NTT DoCoMo Pictographs	Graham Asher (Symbian)
2006-11-01	Symbols (scope extension)	Mark Davis (Google)
2007-08-03	Working Draft Proposal for Encoding Emoji Symbols	Kat Momoi, Mark Davis, Markus Scherer (Google)
2007-08-09	Symbols draft resolution	Mark Davis (Google)
2007-09-18	Japanese TV Symbols (ARIB)	Michel Suignard (Microsoft)

Emoticons are now available in Gmail (2008)

iPhone 2.2 Includes Hidden Japanese Emoji Icons (2008)

Emoji Proposals

Date	Title	Authors
2000-04-26	NTT DoCoMo Pictographs	Graham Asher (Symbian)
2006-11-01	Symbols (scope extension)	Mark Davis (Google)
2007-08-03	Working Draft Proposal for Encoding Emoji Symbols	Kat Momoi, Mark Davis, Markus Scherer (Google)
2007-08-09	Symbols draft resolution	Mark Davis (Google)
2007-09-18	Japanese TV Symbols (ARIB)	Michel Suignard (Microsoft)
2009-01-30	Emoji Symbols Proposed for New Encoding	Markus Scherer, Mark Davis, Kat Momoi, Darick Tong (Google); Yasuo Kida, Peter Edberg (Apple)
2009-03-05	Proposal for Encoding Emoji Symbols
2010-04-27	Emoji Symbols: Background Data
2011-02-15	Wingdings and Webdings Symbols	Michel Suignard

Why the White House Is Using Emoji (The Atlantic, 2014)

Почитать

Emoji на unicode.org
Emojipedia
Что не так с эмоджи Алексей Авдеев, WSD в Минске, 2017

Text Text Text Text

Форматы

Формат	Растр	Вектор
SBIX (Apple)	✔︎	—
CBDT/CBLC (Google)	✔︎	—
COLR/CPAL (Microsoft)	—	✔︎
SVG Open Type (Mozilla/Adobe)	✔︎	✔︎

Поддержка браузерами

Формат
SBIX (Apple)	✔︎	—	✔︎	✔︎
CBDT/CBLC (Google)	✔︎	—	—	✔︎
COLR/CPAL (Microsoft)	✔︎ ^{Win 8.1}	✔︎	✔︎	✔︎
SVG Open Type (Mozilla/Adobe)	✔︎	✔︎	✔︎ ^{MacOS 10.14}	—

Поддержка приложениями Adobe

Формат	Поддерживается
SBIX (Apple)	✔︎ AI CC 2018+, PS CC 2017+
CBDT/CBLC (Google)	—
COLR/CPAL (Microsoft)	—
SVG Open Type (Mozilla/Adobe)	✔︎ AI CC 2018+, PS CC 2017+

Примеры шрифтов

Использование

Браузер без поддержки

.myFancyLetters {
  font-family: 'Gilbert';
}

@supports (-webkit-background-clip: text) {
  .myFancyLetters {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background: linear-gradient(...);
  }
}

Браузер c поддержкой

Используем ChromaCheck

.chromacheck-svg .myFancyLetters {
  background: none;
}

Слоеный шрифт

Бесплатные шрифты

Bixa Color (SVG OpenType)
Bungee — доступен во всех форматах + слоёная версия
Colortube (SVG OpenType)
Gibert (SVG OpenType)
Rocher Color (COLR/CPAL) — цветной и вариативный
Trajan Color Font (SVG OpenType)

Aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur

sed quia non ut enim ad minima eos numquam eius modi tempora incidunt, unde omnis iste natus error sit voluptatem accusantium sequi doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur

That's all, folks!

Вопросы?

Слайды: yoksel.github.io/not-just-text-04-2019

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
0.	NUL	SOH	STX	ETX	EOT	ENQ	ACK	BEL	BS	HT	LF	VT	FF	CR	SO	SI
1.	DLE	DC1	DC2	DC3	DC4	NAK	SYN	ETB	CAN	EM	SUB	ESC	FS	GS	RS	US
2.		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/
3.	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?
4.	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
5.	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_
6.	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o
7.	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	DEL

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
0.	NUL	SOH	STX	ETX	EOT	ENQ	ACK	BEL	BS	HT	LF	VT	FF	CR	SO	SI
1.	DLE	DC1	DC2	DC3	DC4	NAK	SYN	ETB	CAN	EM	SUB	ESC	FS	GS	RS	US
2.		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/
3.	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?
4.	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
5.	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_
6.	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o
7.	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	DEL

Об авторе

Предыдущие материалы по теме

Не просто текст

Темы

В начале было слово

ASCII

Расширенные кодировки

Unicode

История

OpenType

Преимущества

Форматы

Кастомные шрифты

Пример кода

Где брать?

Проблема кастомных шрифтов

Вариативные шрифты

Настройки шрифта

Низкоуровневые настройки

Высокоуровневые настройки

Вариации

Возможности

Стандартные настройки

Кастомные настройки

Пример кода

Использование

Плюсы

Минусы

Песочницы

Инструменты

Бесплатные шрифты

Цветные шрифты

Почитать

Форматы

Поддержка браузерами

Поддержка приложениями Adobe

Примеры шрифтов

Использование

Браузер без поддержки

Браузер c поддержкой

Слоеный шрифт

Бесплатные шрифты

Вопросы?

	.0	.1	.2	.3	.4	.5	.6	.7	.8	.9	.A	.B	.C	.D	.E	.F
0.	NUL	SOH	STX	ETX	EOT	ENQ	ACK	BEL	BS	HT	LF	VT	FF	CR	SO	SI
1.	DLE	DC1	DC2	DC3	DC4	NAK	SYN	ETB	CAN	EM	SUB	ESC	FS	GS	RS	US
2.		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/
3.	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?
4.	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O
5.	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_
6.	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o
7.	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	DEL