designing a typeface in bengali script for on-screen … of bengali script 4 mature proto-bengali...
TRANSCRIPT
-
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