Upload
dodien
View
400
Download
15
Embed Size (px)
Citation preview
Designing a typeface in Bengali script for on-screen usageAnvesh Dunna, 116250004
Bengali LanguageSecond most spoken language in India Sixth most spoken language in the world
Spoken in West Bengal and parts of Tripura and Assam
Official language of Bangladesh
Written using Bengali (also called Bangla) script
2
Bengali ScriptIt is an abugida
There is no uppercase or lowercase
Written from left to right
Horizontal line runs along the top of the letters
The glyphs can be divided into vowels, consonants, vowel diacritics, consonant clusters, modifiers, numerals and punctuation marks
3
Brahmi lipiNorthern script
Eastern* variety
Western* variety
Nagari script*
Proto-Bengali* forms
MatureProto-Bengali forms
100 B.C. 300 A.D.
Mauryan Kushan Gupta Pala Deva Sena Muhammedan conquestsPratihara
4th-6th century
9th-10th century
11th-12th century
13th-14th century
* Siddham script/ for bengali it is also called Kutila script
Evolution of Bengali Script4
MatureProto-Bengali forms
Bengali script Bengali lettersModern Bengali letters
Muhammedan conquests Sri Chaitanya Charles Wilkins
13th-14th century
15th century
20th century
1778
Brahmi lipiNorthern scriptEastern varietyProto-Bengali forms
5
Origin and Development of Bengali Script
source: Asiatic Society of Bangladesh
6
Final alphabet
7
Srikrisnakirtana by Chandidasa
14th Century
Bengali manuscriptBangiya Sahitya Parishadsource: The Origin of the Bengali Script, R.D.Banerji
8
Vidyasundara by Bharatachandra Raya
18th Century
Bengali manuscriptThe British Library
9
Charles Wilkin's first Bengali fount
18th Century
10
Dr. W. Careys translation in Bengali language of New Testament of Bible
Printed by William Ward
First edition 1800-1801
11
Bengali GlyphsVowels (Shoroborno)
12
Bengali GlyphsConsonants (Byonjonborno)
13
Bengali GlyphsVowel diacritics (-kar)
14
Up to four consecutive consonants not separated by vowels can be orthographically represented as a ligature called a "consonant conjunct"
Bengali GlyphsConsonant clusters (Juktakkhor)
15
ascender
baseline
rounding or blob
main stroke or stem
finial orstroke termination
kerning vowel sign
matra (headline)
counter kana (vowel sign)
ligature
subscriptvowel sign
bowl
Bengali typeface nomenclature
reference: The Printed Bengali Character and its Evolution, Fiona Ross
16
Existing typefaces for on-screenVrinda
Nirmala UI
SiyamRupali
17
Examples of on-screen usage18
Examples of on-screen usage19
Graphic and web designers sayNot many web safe fonts options available
Not aware of the available web fonts
Most of them use print fonts for web
Believe in typing faster using Bengali typing softwares
20
Users sayMost of them prefer prints/books to websites
Not many good web designs in Bengali
The content makes them to visit a website even if it is a bad design
Their preference for modulated and monothickness font varied
Letterspacing matters a lot
21
Personal observationThe -akar protrusions above the matra made the users like the font
The -akar protrusions is one of the key recognizing features of Bengali script
Modulated fonts were easy to read
Most of them are used to the Linotype Bengali letterforms
22
Design process timeline
Jul 8 -14 Sep 4-24
Data Collection
Case study of Verdana, Georgia
Studied about Hinting/ Rendering technology
Calligraphy
Comparison of onscreen fonts
Studying Fontlab manual
Finished reading books
Form explorations
Discussion regarding Bengali letters
Study of typeface grids
Desirable qualities of typeface
Form explorations
Form explorations
Primitives/ main features
Digitizing letterforms
Sep 24 - Oct 1 Oct 1-8 Oct 8-15
23
Design process timeline
Oct 15-22 Oct 22-29
Tried hinting
Digitizing letterforms
Studied Vrinda and Raghubengali letterforms
Worked on basic glyphs
Fine-tuning
Testing of fonts on browser
Worked on more glyphs
Fine-tuning
Testing of fonts on browser
Worked on more glyphs
Fine-tuning
Testing of fonts on browser
Oct 29 - Nov 5 Nov 5- now
24
Understanding the tools and letterforms25
Calligraphy
Using cut nib pens
26
Calligraphy
Using chisel markers
27
On-screen vs. Print typefacesOptimized for low resolutionsUses screen rendering technologiesRasterized gridFont scaling is based on ppem
source: FontLab
28
wide letter spacing wide punch width
large countertall x-height
IllusionsVerdana
29
Illusionswide letter spacing large counter
good bold to regular contrast
Georgia
30
Qualities of a good on-screen fontGenerous letter width and spacingOpen letterformsLarge countersDerived from pixelsMono-thicknessSymmetry
and many more
31
Form explorations
Mono-thickness attemptHas -aakaar extensionsWithout the filled-in loops
32
Flat terminalsMore rectangular formsThinking in terms of grid
Form explorations33
Form explorations34
Form explorations
Different stroke to height ratiosDifferent joinery positionsDifferent character widths
1:12 1:12 1:12
1:11
35
Study of GridsMinimum Stroke WidthHeightHalf-form HeightAscenderDescenderStroke to Height ratio
36
Grid Structure
Descender
Ascender
HeightHalf-formHeight
37
x
5.7x
5.2x
6.2x9.7x
Vrinda Stroke to Height ratio 1: 9.7
20.6x
38
Study of grids
1: 9.7 1: 10.1 1: 10.9
1: 10 looks optimum for Regular styleHalf-form height is more than the mathematical halfExtra space for conjuncts below baseline
39
Designing the grid
Ascender
Matra line
Half-form
Baseline
Descender
40
Designing the glyphs
Grid was filled like a pixel art Outlines wrapped around the filled area
41
Creating the vector outlines
PostScript outlines
42
Creating the PostScript outlines (Draft 1)
43
Hinting
Unhinted uppercase H Uppercase H after hinting
img src: beatstamm.com/typography
44
HintingMathematical instruction added to fontDefines which pixels to turn on/offDistorts outline at particular sizesCreates the best bitmap image
Rasterization and Gridfitting
45
source FontLab
Hinting
Gridfitting Symmetry plays a role in hinting
46
Different types of HintingTrueType and Type 1 hintingTrueType is more flexible and powerful
Type 1 hints depend on rasterizerTrueType hints guide the rasterizer
47
Hinting the glyphs
Hinting the letter Cha at 19ppem
48
Hinting the glyphs
15ppem 16ppem 17ppem 18ppem 19ppem
Black and White
GrayScale
ClearType
49
ClearType rendering of hinted Ga
hinted
unhinted
50
Black and White rendering of hinted Ga
Unhinted
Hinted
51
Initial shapes
52
Initial shapes
53
Initial shapes
54
Initial shapes
55
New shapes
Flat base for stems
56
New shapes
Flat ends for terminals followed by curves
57
New shapes
Angled cuts for angled crossbars
58
Font design process59
Font design process60
Font design process61
Font design process62
Font design process63
Font design process64
Font design process65
IDC Screen BanglaVowels
66
Consonants
IDC Screen Bangla67
Numerals
Vowel diacritics
Modifiers
IDC Screen Bangla68
Conjuncts
IDC Screen Bangla69
Conjuncts
IDC Screen Bangla70
Sample
, , ,
, , ,
- ,
, ,
, , ,
18/22 pt
71
Sample
, , ,
, , ,
- ,
, ,
, , ,
72
Testing the font in browsersGoogle Chrome / PC
73
Testing the font in browsersMozilla Firefox / PC
74
Testing the font in browsersChrome / Mac OS X
75
Testing the font in browsersSafari / Mac OS X
76
Simulating the font on websites77
Simulating the font on websites78
Simulating the font on websites79
Simulating the font on websites80
Simulating the font on websites81
Users' feedback82
Users' feedbackSome of the glyphs were jumping
Way too rounder shapes
Looks minimalistic but pleasing
looks bigger than the rest of the alphabets
should start from the headline's height
Not much difference observed in the reading time with text set in Vrinda and my typeface
83
Anvesh Dunna, 116250004