-
Notifications
You must be signed in to change notification settings - Fork 0
/
JS_BC_theory.tex
293 lines (233 loc) · 32.7 KB
/
JS_BC_theory.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
\documentclass[a4paper]{article}
\usepackage{geometry}
\geometry{
a4paper,
total={120mm,257mm},
left=20mm,
top=20mm,
}
\usepackage{titlesec}
\usepackage{graphicx}
\newcommand{\sectionbreak}{\clearpage}
\renewcommand{\figurename}{Obr.}
\usepackage{times}
\usepackage{hyperref}
\usepackage{marginnote}
\setlength{\marginparwidth}{5cm}
\setlength{\marginparsep}{1cm}
\usepackage{lingmacros}
\usepackage[document]{ragged2e}
\usepackage{booktabs}
\usepackage{graphicx, float}
\graphicspath{ {pics/} }
\begin{document}
\section*{VYSOKÁ ŠKOLA\\UMĚLECKOPRŮMYSLOVÁ V PRAZE}
\thispagestyle{empty}
Bakalářská práce\\
\vfill
2019\\
Jan Šindler
\section*{VYSOKÁ ŠKOLA\\UMĚLECKOPRŮMYSLOVÁ V PRAZE}
\thispagestyle{empty}
Tvorba písma a typografie\\
Bakalářská práce\\
Jan Šindler\\
\vspace{20mm}
Písmo pro digitální zobrazování\\
\vfill
Praha, 2019\\
Vedoucí bakalářské práce: Tomáš Brousil\\
Konzultant bakalářské práce: Lukáš Pilka\\
\section*{ACADEMY OF ARTS, ARCHITECTURE AND DESIGN IN PRAGUE}
\thispagestyle{empty}
Typography and typeface designing\\
Bachelor thesis\\
Jan Šindler\\
\vspace{20mm}
Typeface for digital displaying\\
\vfill
Prague, 2019\\
Bachelor Thesis Supervisor: Tomáš Brousil\\
Bachelor Thesis Consultant: Lukáš Pilka\\
\section{úvod}
\setcounter{page}{1}
Téma jsem si vybral hlavně kvůli vlivu stáže ve firmě LucasFonts v létě 2018. Při stáži jsem se dozvěděl spoustu nového a zjistil jsem, že naše praxe není pouze o tvarování křivek. LucasFonts se věnují navrhování a produkci těch nejkvalitnějších fontů, které vydrží spoustu let. Rád jsem byl součástí týmu a doufám, že zase někdy budu. Poprvé když jsem od Lucase slyšel magická slova jako VTT a hinting, tak jsem mohl pouze předstírat, že vím o čem je řeč. První pokusy s hintingem proběhly už na stáži, šlo především o pokus-omyl metodu aplikování hintingu, moc jsem si z toho neodnesl. Po stáži jsem se začal věnovat oborům jako je programování a začal jsem se zajímat o strukturu fontového souboru. Hinting pořád neodmyslitelně patří k písmové produkci a je škoda, že o tomto řemeslu už moc lidí neví. Je důležité znát jeho sílu abychom mohli lépe navrhovat a uspokojit nejen svojí neukojitelnou autorskou touhu ale i koncového spotřebitele. O hintingu chci mít hlubší ponětí abych mohl dělat lepší písma, znát okolnosti a získat výhodu na trhu práce. Během studia jsem žil v naivní představě o nadvládě tvarosloví nad vším ostatními odvětvími navrhování písma, už to tak není a svou bakalářskou prací posouvám tvarosloví dané beziérovými křivkami ještě dále. Budu zpracovávat písmo, které bude vycházet z dat, které představuji dále v mé bakalářské práci. Zajímá mě hlavně vztah bitmapové rasterizované kontury a kontury samotné. Kdy se stane to, že naše milované písmo ztratí všechno co jsme mu dali a je z něho pár pixelů? Mohu navrhnout písmo, které bude vycházet z omezení mřížky, do které se navrhuje a nevypadalo jako z 90. let? Chci udělat písmo pro 1bitové displeje, protože právě pro tyto systémy vidím hinting jako obrovský potenciál. Chci navrhnout alternativu k písmu Verdana a Tahoma, která bude nabízet trošku jiný pohled na věc a bude stejně dobře zpracovaná. Samotná teoretická práce se zabývá analýzou situace ve světě digitálních písem, a přehledem nad tzv. big daty, které jsem sesbíral a analyzoval. Výsledky analýz jsou fakta, na kterých zakládám svůj projekt.
\section{Co je to vlastně hinting?}
Hinting, nebo optimalizace pro obrazovky, je proces při kterém jsou TrueType or PostScript fonty upraveny k maximální čitelnosti na displejích (Petr Biľak, typotheque.com/articles/hinting) Hint je v překladu nápověda, hinting je tedy jakési dávání rad rasterizéru, který je hloupý a bez rad by písmo dobře nezobrazil. Jsou 4 druhy rastrování křivky (Beat Stamm, rastertragedy.com/RTRCh2.htm)
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/o_1bit.png}
\caption{celopixelové - pixely jsou buď zaplé a nebo vyplé, 1bitový princip.}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/1bit_fullanti.png}
\caption{celopixelové s celopixelovým vyhlazováním - Celé pixely doplňují pixely ve stupních šedi, které opticky zaplňují pixelové zuby v distribuci pixelů celopixelového rastrování.}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/o_TT.png}
\caption{asymetrické s necelopixelovým vyhlazováním - Pixel je horizontálně složen ze 3 podpixelů, RGB - červené, zelené a modré. Tyty podpixely svití různou intenzitou dle komplexních algoritmu založených na optice a fyzice. S vzdálenostním odstupem spolu tvoří celek, kde už vnímáme jen černou a bílou. }
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/o_TT_antialiasing.png}
\caption{Hybridní – V ose X se chová jako předešlý způsob. V ose Y se chová podobně jako druhý způsob rasterizace akorát taky pracuje se samotnými barvami pixelů}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/o_TT_antialiasing_preview.png}
\caption{Náhled toho jak ve skutečnosti vypadá hybridní rasterizace na RGB LCD obrazovce. RGB (red, green, blue) je pořadí barev v jednom pixelu, existují i BGR monitory.}
\end{figure}
\subsection{Historie hintingu}
Hinting je samotným programovacím jazykem, před příchodem vizuálního programování hintingu se křivky musely programovat tak jak programování si asi běžně představujeme. S příchodem vizuálního hintování ovšem tento způsob textového programování úplně nevymizel a někteří inženýři jej stále používají. Vizuální způsob ale ulehčil ono řemeslo hlavně nám designérům, kteří nejsme zaměřeni jenom na hintování a věnujeme se i ostatním disciplínám typografie.
\subsection{Hinting dnes}
Hinting dnes je zřejmě umírajícím řemeslem, designéři o tuto kvalitu fontu nejeví zájem zřejmě protože pracují na zařízení s vysokým rozlišením a samotné nedostatky ani nejsou schopni vidět na svém zařízení. Špatný hinting se ale projeví až u koncového uživatele. Nutno přiznat, že hinting není tak potřeba jak dříve při užití na stolních počítačích, větší část zařízení zobrazí písmo kvalitně i bez něj. Přesto i já s poměrně moderním počítačem si stále všímám špatně vyhintovaných fontů na webu, ty často velmi znepříjemňují čtení na digitálních zařízeních, mluvím to o webech jako je BBC a nebo YouTube, což rozhodně nejsou periferní záležitosti. Jsou profese, u kterých lidé tráví několik hodin denně u počítače, na čitelnosti jim záleží. Příkladem může být například opensourcové písmo Fira, které je velmi rozšířené mezi programátory. Uživatelé si nesprávného hintingu všímají a i když často neví, jak tento problém pojmenovat, tak ho nahlásí tvůrci písma aby jej opravil (github.com/tonsky/FiraCode/issues?utf8=%E2%9C%93&q=hinting). Nesmíme si dělat iluze, že hinting nikoho nezajímá, kde se vlastně vzala tahle nálada, když věnujeme takovou péči písmu pro tisk?
\subsection{Druhy Hintingu}
\begin{enumerate}
\item \textbf{TrueTypový hinting}
je velmi silný nástroj, který umožňuje modifikace písmen u každé velikosti a to do těch nejmenších detailů, jako posunutí bodu pro určitou písmovou velikost klidně i o 1/16 pixelu. Nástroj je to silný a jeho ovládání je velmi komplexní. TT hinting jak ho známe dnes si můžeme představit jako vizuální programování, kde nastavujeme pravidla. Je nutno si uvědomit, že je to programovací jazyk a každý znak má program v takovémto jazyku k sobě přiřazen, který komunikuje s rasterizérem a radí mu jak se vykreslit, pak je už na samotném rasterizéru jak s takovýmito radami naloží.
\item \textbf{PostScriptový hinting}
Postcriptový hinting je modernější forma hintingu, je jednodušší než TrueTypový ale neumožňuje takové modifikace.
\item \textbf{Autohinting}
Je automatické vytvoření hintingového programu pro znaky fontu. TrueTypový může fungovat buď na základě postscriptového hintingu a dobrého nastavení měr ve fontu samotném (bude fungovat přesněji než kdyby se algoritmus pokoušel o automatizaci hintingu bez nich). TT autohinting může narazit v případě kdy jde o nestandardní písmo, například když konce tahů nekončí přímo na dotažnicích. Autohinting taky nemůžeme aplikovat na písma, kde je důležité vědomí o souvislostech v písmu. To jsem už sám pocítil při práci na variabilním písmu, kde jsem mohl hintovat pouze v ose Y. To by ještě nebyl takový problém, všechny znaky byly ve skupinách zástupných znaků a ty musely být vyhintované úplně stejně jako děti této skupiny.
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/no_hinting.png}
\caption{ukázka textu bez aplikace žádného hintingu při 1bitovém rasterizování. Maličký rozdíl v bodech vyústí k nechtěnému zaokrouhlování. Písmena mají typicky jinačí tlouštky tahů }
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/autohinting.png}
\caption{Autohinting si počínal o trochu lépe. Je vidět že algoritmus nemá pojem o symetrii a souvislostech v typografii. Horizontální tah u 'O' je o pixel tlustší protože kontura je taky o pár bodů tlustší, to je ale potřeba kvůli optické kompenzaci pro tištěnou typografii. Tloušťku tahu nastavujeme větší aby znaky byly opticky stejně tmavé. V tomto případu je tloušťka tahů konkrétně 42 bodů u verzálek a 40 u minusek, vzdálenost 42 bodu se při této velikosti už zaokrouhluje na 2 pixely nicméně vzdálenost 40 bodů se ještě zaokrouhluje na 1 pixel. Těžko říct, co se honilo algoritmu hlavou, když aplikoval kompenzaci u napojení oblevo tahu na dřík u písmene 'm'. Až velikosti 255 a více by měly mít takovou optickou kompenzaci, protože právě ve velikosti 255 začíná horizontální tah u verzálek mít 21 pixelů, u mínusek to může být tedy 20. Každých 21 pixelů navíc u horizontálního tahu verzálek může přidat 1 pixel navíc k rozdílu mezi tímto tahem u verzálek a minusek }
\end{figure}
\section{programy okolo hintingu}
Hinting se může dělat přímo v písmovém editoru a nebo v externím editoru. Implementovaný editor má nevýhodu, že není tak specializovaný a silný jako ten externí. Na druhou stranu, je produkce takového písma s implementovaným hintingovým editorem jednodušší, protože jsou všechna data na jednom místě a nemůže dojít k problémům například při změně pořadí bodů v kontuře.
\subsection{VTT}
VTT je nejsilnější a nejprofesionálnější editor na hinting, který existuje. Vyvíjí ho firma Microsoft a produkuje v něm také písma pro systém Windows.
\begin{enumerate}
\item Link - základní nástroj pro, kterým určujete jaký vztah jeden kotevní bod naplňuje k druhému. Může jít o jednoduchá pravidla - zaokrouhlí-li se jeden doleva, zaokrouhlí se i druhý doleva a nebo že tyto dva 'a' a 'b' body budou od sebe vzdáleny stejný počet pixelů jako druhé dva body 'x' a 'y'.
\item Interpolate - interpoluje jeden bod na základě dalších dvou – něco jako když na pružinu umístíme bod a pak s ní natahujeme, bod bude vždy ve stejném vzdálenostním poměru ke krajům pružiny.
\item Delta – posouvání buď globálních a nebo lokálních hodnot - nastavíme li že všechny body na x-výšce\marginpar{X-height je v češtině střední dotažnice, je výška hlavní hmoty mínuskových znaků, vede právě tam kde končí výška malého písmene 'x'} jsou označeny proměnnou, nástrojem delta můžeme určit v jakých velikostech se případně výška o bod zvedne, nejsme-li spokojeni s plynulostí gradace velikostí. Lokální deltou pak ovládáme body stejným způsobem a to od nejjemnější nuance 1/16 bodu až po 8 bodů do plusu i záporu, pokud by to mělo nějaký důvod, můžeme nastavit, že písmeno 'o' je širší nebo užší až o 8 bodů ve zvolené velikosti.
\end{enumerate}
\subsection{rasterizéry}
\begin{enumerate}
\item ClearType - rasterizer Windowsu, funguje na bázi rozdělení pixelu na sub-pixely. RGB = 1 pixel, R = 0.33 pixelu
\item FreeType - opensourcový projekt, který najdeme ve velkém množství zařízení. Od Androidu/Linuxu až po telefony společnosti Apple. Jde o opensourcovou variantu ClearTypu
\item Quartz - rasterizer MacOs, ten ignoruje veškteré hintingové instrukce a rastr vytvoří podle vlastního algoritmu, tak aby text vypadal na obrazovce co nejvíce jako jeho tištěná podoba. To má za důsledek, že písma jsou velmi špatně čitelná v malých velikostech.
\item CoolType - je metoda rastrování textu, kterou využívá Adobe a jejich řada programů
\end{enumerate}
\section{analýzy}
Proto abych lépe pochopil data okolo fontů a digitální stopu, kterou ve světě zanechávají, tak jsem použil služby od Googlu se jménem BigQuerry. Ta umožňuje prohledávat ohromné množství dat za pár vteřin. BigQuery\footnote{https://bigquery.cloud.google.com/queries/fontsize} navíc nabízí svoje vlastní datasety a to zdarma. Já využil hlavně datasetu\marginpar{
Dataset je soubor dat, který je v případě BigQuery zadarmo. Může jít jak
}od githubu, zajímalo mě hlavně v jakém poměru se používají patkové a nepatkové písma na webu a také jaká velikost písma je nejpoužívanější.
\subsection{font-size}
Obrazovky dnešních počítačů ve většině světa se zobrazováním písma nemají skoro žádný problém, nesmíme ovšem opomenout oblasti a nebo instituce, kde je velmi náročné přejít na novější systém, buď kvůli kvůli vlastním interním nástrojům, které je velmi náročné aktualizovat a nebo kvůli nedostatku financí. Velké firmy by měly mít písmo, které obstojí v jakékoliv situaci a to i na tom nejslabším zařízení nebo v aplikaci, kde se třeba dlaždičky a nebo dlažební kostky jsou samotnými pixely. Typickým příkladem může být displej pračky, displej bojleru, digitální cenovka v supermarketu, úvodní obrazovka monitoru při zapnutí a nebo při nastavování menu na obrazovce a taky každý další jednoduchý počítačový systém, který nepodporuje nejmodernější zobrazovací technologie. Nesmíme zapomenout i na stále poměrně silnou uživatelskou základnu, která pořád pracuje na Windows XP dle dát z roku 2017 by těchto uživatelů mělo být více než uživatelů Linuxu a nebo MacOs Sierra(businessinsider.com/how-many-people-use-windows-xp-chart-2017-5). Windows Xp umožňuje dodatečnou instalaci rastrového enginu ClearType, tím ale velmi pravděpodobně dipsonuje pouze malá část těchto počítačů. Všechna tato zařízení vyžadují buď aplikace firemních písem, log a nebo piktogramů. Zde všude přijde hinting vhod. Písmo jsem navrhoval primárně pro nějakou velikost, která je lidmi nejpoužívanější, svůj požadavek jsem zadal pouze na nastavení webových stránek, hlavně protože je ustálené a programátoři velikost vybírají s vědomím, že neví na jakém zařízení se jejich web zobrazí a předpokládám že zvyky z navrhování pro jednu platformu se mohou projevit i při navrhování na druhou platformu. Jelikož jde o akademický úkol, tak ani já nevím na jakém zařízení bude moje písmo zobrazováno. O to zajímavější to je, neboť mi jde o to aby vypadalo, četlo se a fungovalo dobře na všech zařízeních a mnoha okolností. Pro mojí analýzu jsem využil služby BigQuery od Googlu, která dovoluje zkoumat velká množství dat pomocí jejich vlastních počítačů. Google nám v této službě už připravil nějaká data, takovému balíčku dat se říká dataset. Takový dataset si můžeme představit jako hrozně velkou excelovou tabulku, která je tak velká, že bychom ji na našem počítači neotevřeli, pravděpodobně by se zasekl a nedošel by ani do půlky. Jeden z datasetů jsou data GitHubu\marginpar{
GitHub je platforma pro vývojáře, kde si lidé mohou ukládat a sdílet právě vyvíjenou aplikaci buď mezi sebou a nebo veřejnosti.
} má 2,3TB \marginpar{TB jako Terabyte, GB jako Gigabyte jsou jednotky pro popis velikosti digitálních dat}, já jsem svůj pokus dělal pouze na neplacené části 30GB a i tak jsem dostal uspokojující množství dat, kterou jsou svojí kvantitou dostačující. Z analýzy vyplynulo, že programátoři využívají z velké části jednotky PX oproti PT. Plný dataset má tedy 2,3TB, to je 80krát více než dataset, který jsem použil já. Nechci přepočítávat terabyty na hodiny filmu, ale řekl bych že 2,3TB je kapacita paměti 5-7 notebooků v roce 2019. PT jsou určené spíše pro tištěné výstupy, programátoři jsou si tedy vědomi specifiky digitálního písma. Z dat vyplynulo, že nejpoužívanější velikostí pro weby je 14PX a 10PT což se rovná 13.3PX. Základní velikostí pro navrhování písma určeného k digitálnímu zobrazování je tedy velikost 14PX. To je velikost, kde se právě začínají lámat rozdíly mezi hintingovými unibody písmy a písma se už začínají lišit. Mřížka B/W monitoru je omezena a proto mohou působit nějaká písma dost podobně i když jde původně buď o egyptienkové písmo a knižní serif. V případě malých velikostí ovšem nemůže jít o to se odlišit ale zaručit, že písmo bude fungovat i v malých velikostech. Nemluvě o přizpůsobení piktogramů a log k takovýmto zobrazení.
\begin{tabular}{r|rrr}
jednotka & \\
& medián & \\
& & m. průměr & \\
& & & počet nálezů\\
\midrule
PX & 14.0 & 26.8330 &13352 \\
PT & 10.0(13.3330PX) & 12.3086 & 1231 \\
EM & 1.2 & 3.0410 & 7225 \\
\% & 100.0 & 114.9932 & 6295\\
\end{tabular}
\subsection{font-family}
Mým dalším cílem zkoumání pomocí služby BigQuery bylo i jaké písma uživatelé používají. Výsledky ukazují, že převažují písma bezserifová a většinou systémová. Z toho vyplývá, že programátoři jsou si vědomi výhod takových písem. Systémová se nemusí zobrazovat a bezserifová jsou lépe čitelná na obrazovkách nižších rozlišení. Těmito dvaceti nejpoužívanějšími fonty je pouze jedno serifové, velmi překvapivé je, že Times New Roman se do téhle dvacítky vůbec nedostal. Zdali absence patkových písem je následkem slabé nabídky a nebo zkrátka nejsou určena pro digitální formu zobrazování je na diskusi. Fonty se pro weby nastavují buď konkrétně a nebo jako skupina, tedy název fontu – Arial – nebo druh fontu - Sans Serif. Font se nemusí nastavit jenom jeden v případě, že by font na cílové mašině nebyl, nahradil by se nekontrolovatelně na základní font platformy. To nechceme a proto můžeme v pořadí naších preferencí nastavit fonty dle libosti, pokud první v systému není, aplikuje se ten další atd. příklad font-family="Arial, Helvetica, Verdana".
\begin{tabular}{r|rlr}
název písma/skupiny & \\
& počet nálezů & \\
&& distribuce&\\
\midrule
sans-serif & 25895 & Skupina\\
Arial & 20070 & WIN\\
Helvetica & 11886 & MAC\\
Helvetica neue & 6560 & MAC\\
Verdana & 5618 & WIN\\
monospace & 4881 & Skupina\\
Courier & 4315 & WIN\\
Tahoma & 2953 & WIN\\
inherit & 2943 & Skupina\\
Lucida console & 2239 & WIN\\
Font Awesome & 2163 & ID\\
serif & 2146 & Skupina\\
Lucida grande & 1733 & OS X\\
Monaco & 1413 & OS X\\
Lato & 1191 & G\\
Open sans & 1135 & G\\
Courier new & 1119 & WIN\\
Consolas & 1099 & WIN\\
Georgia & 1038 & WIN\&MAC\\
Segoe ui & 819 & WIN\\
\end{tabular}
\section{Pixel a pixel mimo digitální svět}
rastr vektoru - pixelizaci nesmíme striktně chápat jako něco co se vyskytuje výhradně na obrazovkách, jde o rozložení křivek na pravidelnou mřížku. O pravidelnou a ovladatelnou distribuci bodů rastrovéné křivky nám jde především když je hustota mřížky omezena. Uvádím zde tři příklady, kdy se taková distribuce hodí i pro aplikace jiné, než je obrazovka. Všechny tyto aplikace jsou velmi pravděpodobné a pokud firma písmo s hintingem má jednou, tak už problém rasterizace kdekoliv nikdy nebude muset řešit.\\
\begin{enumerate}
\item \textbf{Jehličkové tiskárny} s povinností tisknout všechny účtenky, roste i spotřeba thermopapíru, ten je ovšem nerecyklovatelný a na tento fakt často ochránci životního prostředí poukazují. Obchody, které jsou s touto problematikou obeznámeny používají staré jehličkové tiskárny, protože jde o tisk barvou na recyklovaný a dále recyklovatelný papír.Jde o jakýsi trend, který se šíří napříč bioobchody a kavárnami, řeší problém s nerecyklovatelnými thermopapíry a ukazuje nám, že žádná technologie není mrtvá a je velká šance, že se brzy či později opět vrátí.
\item \textbf{Práce se samotným pixelem}
Digitální rastrový obraz není jenom sled tvarů a bodů ale přesná mřížka s přesnými údaji, to v dnešní době můžeme využít a můžeme pracovat se samotnými pixely. Není vůbec těžké si jako designér vytvořit nástroj, který přemení pixel na jiný tvar. Takový nástroj nám pak bude tvořit například vizuál festivalu pouhým aplikováním nástroje na fotografii. To nám skvěle předvedl Just van Rossum a Hansje van Halem při vizuálech na vizuálních stylech festivalů Lowlands a nebo studio Norm při navrhování nové podoby švýcarských bankovek. Pokud mám pole typu šachovnice o veliksoti 2x2 pixelů, data obrázku by vypadala asi takto [[255, 0], [0, 255]]. S daty pak můžeme libovolně pracovat. Můžeme například všechna políčka, kde je bíla (255) spojit čárou a nebo je nahradit nějakým symbolem. Můžeme je nahradit třeba obličeji a nebo srdíčky, síť by pak byla asi v mnohem větší velikosti, než bychom očekávali od obrázku s rozlišením 2x2 pixelů. Z tohoto obrázku se nyní stává síť, kde každý bod může být pozorován samostatně. Dohromady však tvoří celek, kde rovnoměrná distribuce je důležitá.
\item \textbf{Průmyslová produkce návrhů}
jsou technologie, kdy při realizaci návrhu je míra detailu velmi omezena. Typicky může jít o pletení, tkaní, vyšívání a nebo perforace do nejrůznějších materiálu a nebo třeba i vyskládání nápisu do dlažby nebo do kachliček.
\end{enumerate}
\subsection{\textit{O} u Timesu je stejné jako u Arialu}
Unikátní tvar písmene, který jsme zvyklí posuzovat z papíru a jsme na něj jako typografové tak pyšní, se na obrazovkách promění a je z něho něco o čem jsme vůbec netoužili. V těch nejmenších velikostech naše výmysly zanikají, písmo je nečitelné a my jsme naštvaní. Hinting zaručí čitelnost i v těch nejmenších velikostech. Při mřížce, která může být vysoká i třeba jen 20 bodů zanikají ty nejmenší detaily a jedno písmo začíná připomínat to druhé. Jestli si někdo myslí, že tvorba písma je o tom dělat písmena jinak, než ty před námi, tak se mýlí. Jestli jsou písma opravdu identická zkoumám v následujícím pokusu. Porovnávám bitmapy u písmen arial.ttf, georgia.ttf, tahoma.ttf, verdana.ttf, consola.ttf , lucon.ttf a times.ttf ve velikostech 8, 9, 10, 11 a 12 pixelů v jednobitovém režimu zobrazování.\\
\begin{tabular}{r|cccccccccccc}
\rotatebox[origin=l]{90}{počet shod}&
\rotatebox[origin=l]{90}{shodné písmeno}&
\rotatebox[origin=l]{90}{písmo a velikost}&\\
\midrule
5 & o & A 9 & o & G 9 & o & Ta 9 & o & Ti 9 & o & Ti 10\\
4 & O & A 9 & O & Ti 9 & O & Ti 10 & 0 & Lu 11\\
4 & 8 & A 9 & 8 & G 9 & 8 & Ta 9 & 8 & Ti 10\\
3 & i & A 8 & l & A 8 & I & A 8\\
3 & D & A 8 & D & Ta 8 & D & Co 10\\
3 & e & A 9 & e & G 9 & e & Ta 9\\
3 & t & A 9 & t & Ti 9 & t & Ti 10\\
3 & j & G 9 & j & Ti 9 & j & Ti 10\\
3 & l & G 9 & l & Ti 9 & l & Ti 10\\
3 & u & G 9 & u & Ti 9 & u & Ti 10\\
3 & 0 & Ta 9 & 0 & Ti 9 & 0 & Ti 10\\
3 & e & G 10 & e & Ta 10 & e & Ti 11\\
3 & 0 & G 10 & o & Ta 10 & o & Ti 11\\
3 & o & G 11 & o & Ta 11 & o & Ti 12\\
\end{tabular}
\vspace{20mm}\\
A=Arial, G=Georgia, Ta=Tahoma, Ti=Times, Lu=Lucida Console, Co=Consolas\\
\section{návrh písma Delta}
Po všech těchto průzkumech a pochopení problematiky jsem teprve mohl začít navrhovat konturu. Potenciál pro využití této technologie vidím hlavně u velkých firem, kde není známo kde všude se jejich písmo může objevit. Chci nabídnout alternativu k písmu Verdana, která bude odrážet vizuální kulturu dnešní doby a bude stejně kvalitně přizpůsobena jednobitovým displejům. Při hledání písma pro takové displeje jsme velmi omezeni a pravděpodobně nejčastěji stejně skončíme u Verdany. Do tohoto boje jsem šel s optimistickými představami, že objevím něco neobjeveného. Kvalitu Verdany jsem si ale krátce na to uvědomil a došlo mi, že tvarosloví, které má, nepůjde úplně tak opustit. Verdana je klasické písmo a nemůže si dovolit být trochu expresivnější protože jde o celosvětový projekt. Proces mé tvorby popisuji chronologicky.
\subsection{Konzultace}
Na fóru TypeDrawers\marginpar{typedrawers.com, je forum se silnou komunitou, kde si lidé radí ohledně problémů tykajících se snad všech odvětví tvorby písma} jsem narazil na písmového inženýra – Mika Duggana, byl velmi ochotný se mnou konzultovat a vysvětlil mi nejzákladnější principy, které člověk aplikuje při hintování písma. Mike pracuje v Microsoftu a má za sebou hintování například písma Times New Roman. Dal mi tedy dostatečně velký vhled do problematiky hintování a vysvětlil mi s jakými problémy se potýkají inženýři v praxi.
\subsection{Mřížka a kontura v ní}
Při navrhování samotné kontury jsem chtěl vycházet z omezení daných tou nejpoužívanější mřížkou, tedy jak data ukazují, mřížkou o velikosti 14px. Právě velikosti okolo této, by měly být ty nejpoužívanější. Omezení, která určuje, by se měly promítnout do finální podoby kontury, aby originální kontura neztratila svou originalitu ve své bitmapové verzi. Skicoval jsem si do čtverečkovaného bloku a nebo kreslil rovnou v počítači v jednobitovém režimu. Doufal jsem, že najdu tímto způsobem něco unikátního a písmo v jednobitové aplikaci bude velmi připomínat to, které známe v tištěné podobě. Pro výšku x jsem vymezil 8 bodů, verzálky jsou o 2 body vyšší a spodní dotažnice o 2 body nižší, horní dotažnice je pak o jeden bod vyšší než verzálky. Rozdíl mezi výškou x a verzálkami o právě 2 body je důležitý pro primární velikost 14px hlavně kvůli identičnosti kontur napříč verzálkami a mínuskami v této velikosti. Rozlišení mřížky přenesl do mřížky fontu, tak že jeden čtverec mřížky má rozměry 44*40. Vertikální dřík má tedy tloušťku 44 bodu a horizontální tah 40. Písmo je navrhováno do několika kuželek, nejčastěji o šířce 4-6 bodů. Což vychází z faktu, že písmena v těchto kuželkách při 1bitovém zobrazování skončí, tak proč je tak nenavrhnout rovnou?
\subsection{Bezpečné úhly}
pro rovnoměrnou distribuci pixelů na diagonálách je velmi důležitý úhel ve kterém diagonály jsou. Úhel diagonály v písmu je jedním z úhlů diagonály obdelníku s poměrem stran 1:celé číslo. U 1:1 to je 45 stupňů, u 1:2 to je 26.5 atd. Tento tvar pak vyplňuje konturu, buď stoupá po jednom bodu doprava a nahoru a nebo o jeden doprava a dva nahoru.
90,
45,
26.5 a
18.5 stupňů jsou ty nejužitečnější bezpečné úhly pro obrazovku. V mém písmu se snažím všechny diagonály přizpůsobit těmto úhlům. Mezi 45 a 26.5 je poměrně velký rozdíl a když diagonála nespadá ani k jednomu z těchto úhlů, tak používám umělý bezpečný úhel, tzn. například úhel obdelníku 1:x.5. Jen ale ve velmi ojedinělých případech jsem byl přinucen bezpečný úhel vypustit.
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/1bit.png}
\caption{vlevo tři diagonály pod úhlem 90, 26.5 a 18.5 stupňů, vpravo totéž ale vše o 10 stupňů zkoseno doprava. Jednobitové renderování}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/bw.png}
\caption{stejné diagonály. Jednobitové renderování, velikost 14px (Aplikované delty na levý tah)}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/truetype.png}
\caption{stejné diagonály, TrueType render}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/truetype_bw.png}
\caption{náhled intenzity svítivosti pixelů pří rendrování TrueType}
\end{figure}
\begin{figure}[H]
\includegraphics[width=\linewidth]{pics/pseudo.png}
\caption{tahy pod pseudo-bezpečnými úhly 33.7 a 21.8 stupňů. Distribuce pixelů není úplně rovnoměrná jako u bezpečných úhlů, určitý a stále čitelný vzor se zde ale nachází.}
\end{figure}
\subsection{Kontura}
Kontura je výsledkem nekonečného překreslování a zkoumání chování kontur při hintingu. Jak jsem již zmínil, důležitým faktorem pro písmena v 1bitovém režimu je rovnoměrná distribuce pixelů, ideálně pod úhlem 45 stupňů a nebo pod jiným z bezpečných úhlů. Diagonály písmen se snaží držet úhel 45 stupňů. Kontura nepotřebuje striktně držet mřížku ze které vychází, to by škodilo na druhou stranu užití tištěnému. V mém písmu je pár momentu, kterými si usnaďnuji hintování. Může jít i o navíc umístěný bod, který by byl běžně považován za chybu ale pro hinting se nám hodí, protože od něj můžeme například interpolovat. Tento přístup je více viditelný například u písmene 'x', kde zdůrazňuji verikální dřík, který se v malých velikostech bitmapových písem často objevuje. Tento element taky hodně pomáhá hintování samotnému. Potencionální digitální užití písma může být v případě mé práce primární ale určitě ne jediné, je důležité tedy myslet na to, aby písmo bylo kvalitní a originální v každé aplikaci. Písmo tedy musí splňovat i kvality které vyžadují tištěná média i digitální užití.
\subsection{Hinting}
Udržení rovnoměrné distribuce pixelů je velmi náročné při 1bitovém renderování, můžeme sami porovnat obr. 2 \& 3. Osa X disponuje v případě TrueTypu třikrát větším rozlišením, což nejsme schopni lehce na zařízeních pozorovat. Je důležité si vzpomenou, že pixel může být jakkoliv veliký a pozorován z jakékoliv vzdálenosti jak v kontextu tak bez kontextu. Subpixelu na monitoru počítače si nevšimneme, všimneme si ale subpixelu na velike LED instalaci, ke které můžeme přistoupit z jakékoliv vzdálenosti? Estetika písma vychází z části z nástrojů, kterým disponuje hintovací program VTT. Nastavit zde úhel nejde přímo, se vzdálenosti se ovšem dá pracovat několika způsoby. Známe-li vzdálenost dvou stran trojúhelníku, můžeme nastavit úhel diagonály pomocí nich. Tenhle způsob je limitován pouze dvěma věcmi. 1. je přehlednost pracovního souboru, pro každou vzdálenost si musíme do šuplíku vzdáleností uložit jednu proměnnou. Jestli je takových proměnných spoustu, je pravděpodobné, že nad proměnnými ztratíme přehled. 2. výška trojúhelníku je omezena ještě neznámou proměnnou - výškou dotažnic. Pro vertikální pohyb je tedy zapotřebí volný prostor pro natahování vertikální strany trojúhelníku. Jednoduše řečeno - výška diagonály natažené od účaří k výšce x je dána výškou x, nemůžeme jí tedy nastavit absolutní hodnotou.
\subsection{Prezentace a testování na displayích Nokia}
Nokia display 5110 se nyní prodává jako otevřený modul a je připravený na to abych se do něj dostal a zároveň je zástupcem jednobitových displejů na které se zaměřuji a proto to byla jasná volba pro prezentaci a testování mého písma Delta. Jako počítač pro vykreslování písmen používám Raspberry Pi Zero WH, na kterém běží program napsaný v Pythonu 3, který jako rasterizér používá knihovnu FreeType, výsledek je tedy totožný s tím jak by se písmo chovalo na zařízení které je postaveno na Linuxu. Testovat písmo právě na tomto rasterizéru je dobrou myslím dobrou volbou hlavně proto, že je velká možnost, že koncové užití písma bude právě na zařízení s tímto rasterizérem.
\subsection{Budoucnost mé bakalářské práce}
Projekt bych budu sdílet na Githubu a začnu postupně přidávat podporu dalších jazyků. Zkušenosti, které jsem nabral na latince bych rád aplikoval i do jiných písmových systémů, kde technologie nemusí být tak vyvinuta a potřeba dalšího současného písma s hintingem je potřeba.
\end{document}