designing a typeface in bengali script for on-screen … of bengali script 4 mature proto-bengali...

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


Worked on more glyphs

Fine-tuning


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

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

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

designing a typeface in bengali script for on-screen … of bengali script 4 mature proto-bengali...

Documents