u and uː vowel signs of Malayalam

The reformed or simplified orthographic script style of Malayalam was introduced in 1971 by this government order. This is what is taught in schools. The text book content is also in reformed style. The prevailing academic situation does not facilitate the students to learn the exhaustive and rich orthographic set of Malayalam script. At the same time  they observe a lot of wall writings, graffiti, bill-boards and handwriting sticking to the exhaustive orthographic set.

The sign marks for the vowels ഉ and ഊ (u and ) have many diverse forms in the exhaustive orthographic set when joined with different consonants. But in the reformed style they are always detached from the base consonant with a unique form as ു and ൂ respectively for the vowel sounds u and . Everyone learns to read both of these orthographic variants either from the school or from everyday observations. But while writing the styles, they often gets mixed up as seen below.

u sign forms on wall writings
The green mark indicates the usage of reformed orthography to write പു (pu), blue indicates the usage of exhaustive set orthography to write ക്കു (kku). But the one in red is an unusual usage of exhaustive orthography to write ത്തു (ththu). Such usages are commonplace now, mainly due to the lack of academic training as I see it.

 

Redundant usage of vowel sign of u is indicated in circle

In this blog post I  try to consolidate the vowel signs of u and  referring to early script learning resources for Malayalam.

Vowel signs in Malayalam

There are 37 consonants and 15 vowels in Malayalam (additionally there are less popular consonant vowels like ൠ, ഌ and ൡ). Vowels have independent existence only at word beginnings. Otherwise they appear as consonant sound modifiers, in form of vowel signs. These signs often modify the glyph shape of consonants and this is a reason for the complex nature of Malayalam script. These marks can get distributed over the left and right of the base consonant. See the table below:

As seen in the table, the signs ു, ൂ, ൃ ([u] ,[uː], [rɨ] ) changes the shape of the base consonant grapheme. It was not until the 1971 orthographic reformation these signs got detached from the base grapheme. You can see the detached form as well in the rows 5,6 and 7 of the above table.

How does the vowel sign for ‘ു’ [u] and ‘ൂ’ [uː] affect the base consonant?

In the exhaustive script set of Malayalam there are in fact 8 ways in which ‘ു’ [u] and ‘ൂ’ [uː] sign marks change the shape of base consonant grapheme. These 8 forms (u- 4 forms and uː – 4 forms) are consolidated below.

‘ു’ [u] sign induces 4 types of shape variations to base consonant.

  • ക(ka) , ര(ra) gets modified by a shape we hereby call as hook. The same shape change applies to all conjuncts that ends with ക as in ങ്ക(n̄ka), ക്ക(kka), സ്ക(ska) and സ്ക്ക(skka). As the conjuncts that ends with ര(ra) assumes a special shape the hook shaped sign does not apply to them.
  • ഗ(ga), ഛ(ʧʰa), ജ(ʤa), ത(t̪a), ഭ(bʱa), ശ(ʃa), ഹ(ɦa) gets modified by a shape that resembles a tail that comes back to right after moving left. Those conjuncts which end with these consonants also assume the same tail shape when when ‘ു’ [u] vowel sign appear after them.
  • ണ(ɳa) and ന(na/n̪a) changes their shape with an inward closed loop. Those conjuncts which end with these consonants also assume the same loop shape when when ‘ു’ [u] vowel sign appear after them. For example ണ്ണ(ɳɳa), ന്ന(nna), ക്ന(kna) etc.
  • All other 24 consonants use the drop shape. As it is the most popular among all [u] signs, it is often mistakenly used instead of the other signs mentioned above. This case is indicated in the red circle in figure captioned u sign forms on wall writings.

‘ൂ’ [uː] sign induces 4 types of shape variations to base consonants.

  • ക(ka) , ര(ra), ഗ(ga), ഛ(ʧʰa), ജ(ʤa), ത(t̪a), ഭ(bʱa), ശ(ʃa), ഹ(ɦa) can have two alternate uː sign forms. First shape is hook and tail shape while the second one is hook and rounded tail.
    • Hook and rounded tail is more popular with the consonants ക(ka) , ര(ra) and ഭ(bʱa)
    • Hook and tail is more popular with the consonants ഗ(ga), ഛ(ʧʰa), ജ(ʤa), ത(t̪a), ശ(ʃa) and ഹ(ɦa)
  • The outward open loop shape is assumed by the ‘ൂ’ [uː] sign mark when associated with the consonants ണ(ɳa) and ന(na/n̪a)
  • All other 24 consonants use the double-drop shape. As it is the most popular among all [u] signs, it is often mistakenly used instead of the other signs mentioned above

Note: The sign shape names drop, double-drop, hook, hook and tail, hook and rounded tail, tail, closed loop and open loop are author’s own choice. Hence there is no citations to literature.

Early texts on Malayalam script and orthography

Modern textbooks do not detail the ‘ു’ [u] and ‘ൂ’ [uː] vowel sign forms. The earliest available reference to the script of Malayalam and its usage is the book from 1772, Alphabetum grandonico-malabaricum sive samscrudonicum.It was a text book meant to be used by western missionaries to Kerala to learn the Malayalam script and its language of description is Latin. Alphabetum describes various vowel sign forms but it does not give any indication on the hook and tail form. ക(ka) , ര(ra), ഗ(ga), ഛ(ʧʰa), ജ(ʤa), ത(t̪a), ഭ(bʱa), ശ(ʃa), ഹ(ɦa) etc. uses the hook and rounded tail form only. This being the first ever compilation of Malayalam script usage, that too by a non-native linguist, there are chances for unintended omissions about which I am not sure of.

The metal types used in this book were movable, and were the first of its kind to be used to print a Malayalam book. The same types were used to print the first ever complete book in Malayalam script Samkshepavedartham.

Excerpt from Alphabetum grandonico-malabaricum sive samscrudonicum describing the usage of ‘ു’ [u] and ‘ൂ’ [uː] signs
A still later work in this regard was done by Rev. George Mathan, almost a century later to Alphabetum. He introduces drop/double drop for ‘ു’ [u]/ ‘ൂ’ [uː] as the common sign form and all others shapes are indicated as exceptions. He clearly mentions about the two alternate forms of hook and tail as well as hook and rounded tail in his book on the Grammar of Malayalam.Grammar of Malayalam- George Mathan

Grammar of Malayalam- George Mathan

Contemporary usage of orthographic styles

The early attempts to describe the script of Malayalam with all its complexity is seen in these books in the initial days of printing era. Much later, in 1971 reformed script orthography was introduced to the language and culture aiming at overcoming the technological limitation of Malayalam typewriters. But the language users never abandoned the then existing style variants. Now we see around us a mix of all these styles.

Note: This is a translation of an earlier blog post written in Malayalam

പുതിയൊരു മലയാളം ഫോണ്ട് നിർമിക്കുന്നതെങ്ങനെ?

ഈ ചോദ്യം ധാരാളം പേർ എന്നോടു് ചോദിക്കാറുണ്ടു്. പലപ്പോഴും വിശദമായ രീതിയിൽ തൃപ്തികരമായി ഉത്തരം കൊടുക്കാൻ പറ്റാറില്ല – പ്രത്യേകിച്ച് ചാറ്റിലും മറ്റും ചോദിക്കുമ്പോൾ. അതുകൊണ്ട് എല്ലാവർക്കും വേണ്ടി കുറച്ചു് കാര്യങ്ങൾ സ്വന്തം അനുഭവങ്ങളുടെ വെളിച്ചത്തിൽ ഇവിടെ എഴുതാമെന്നു കരുതുന്നു. ഇതുവായിച്ചാൽ ഒരു ഫോണ്ട് നിർമിക്കാനാവുമെന്നു തെറ്റിദ്ധരിക്കരുത്. ഒരു ഫോണ്ട് നിർമാണത്തിലെ സ്റ്റെപ്പുകൾ വളരെ ചുരുക്കിയെഴുതിയിരിക്കുന്നുവെന്നു മാത്രം. ഇംഗ്ലീഷ് ഫോണ്ടുകളുടെ നിർമാണം സംബന്ധിച്ച് ഇന്റർനെറ്റിൽ തിരഞ്ഞാൽ കിട്ടുന്ന വിവരങ്ങൾ മിക്കവയും മലയാളത്തിനും ഉപകരിക്കും.

ഇന്നത്തെ യുണിക്കോഡ് ഫോണ്ടുകൾ ഓപ്പൺടൈപ്പ് സാങ്കേതികവിദ്യ അടിസ്ഥാനമാക്കിയാണു് പ്രവർത്തിക്കുന്നതു്. ഫോണ്ടിൽ അക്ഷരങ്ങളുടെ വരച്ച രൂപങ്ങളും, അക്ഷരങ്ങൾ കൂടിച്ചേരുന്നതിനെ സംബന്ധിച്ച ചിത്രീകരണ നിയമങ്ങളും ആണുള്ളതു്.

എങ്ങനെ തുടങ്ങാം?

പുതിയൊരു ഫോണ്ട് നിർമിക്കുന്നതു് കലാപരമായ ഒരു പ്രവൃത്തിയാണു്.  ഇതു് മനസ്സിലാക്കുന്നതു് വളരെ പ്രധാനപ്പെട്ട ഒരു കാര്യമാണ്. ഒരു ചിത്രകാരൻ ചിത്രം വരക്കുന്നതുമായി ഇതിനെ സങ്കൽപിക്കുക. ചിത്രം ആർക്കും വരക്കാം. പക്ഷേ എല്ലാം നല്ല ചിത്രങ്ങളാവില്ല, ജനങ്ങൾ ഒരേപോലെ ആസ്വദിക്കില്ല. അപാരമായ ക്ഷമയും കലയോടുള്ള താത്പര്യവും നിർബന്ധമാണു്. അതുപോലെത്തന്നെയാണു് ഫോണ്ടിന്റെ കാര്യവും. നല്ലൊരു ഫോണ്ടിന്റെ രൂപകല്പനയ്ക്ക് ധാരാളം ഫോണ്ടുകൾ ആസ്വദിക്കണം, അതിനു പരിശീലിക്കണം. നിത്യജീവിതത്തിൽ കാണുന്ന വിവിധങ്ങളായ അക്ഷരരൂപങ്ങളെ വെറും അക്ഷരങ്ങളായല്ലാതെ അവയിലെ വരകളെയും വളവുകളെയും അനുപാതങ്ങളെയും ആഴത്തിൽ മനസ്സിലാക്കാനുള്ള നിരീക്ഷണപാടവം വളർത്തിയെടുക്കണം. കുറച്ചു ദിവസങ്ങളിലെ ഒരു ഫോണ്ട് വർക്ക് ഷോപ്പുകൊണ്ട് ആർക്കും ഒരു ഫോണ്ട് ഉണ്ടാക്കാൻ കഴിയില്ല. സാങ്കേതികവശങ്ങളും നടപടിക്രമങ്ങളും മനസ്സിലാക്കാൻ മാത്രമേ സാധിക്കൂ.

  1. നിലവിലുള്ള ഫോണ്ടുകളെ വിശദമായി വിലയിരുത്തുക. ഏതൊക്കെ ശൈലികൾ ഉണ്ടു്, വരകളെങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു, ഏതുതരം ഉപയോഗത്തിനാണ് മുൻതൂക്കം കൊടുക്കുന്നതു്. അക്ഷരങ്ങളെങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. ഇവ മനസ്സിലാക്കണം. എനിക്ക് ഇവ മനസ്സിലാക്കാൻ സാധിച്ചതു് ഫോണ്ട് ഡിസൈൻ ചെയ്യുക എന്ന ഉദ്ദേശ്യമില്ലാതെ ഫോണ്ടിന്റെ സാങ്കേതികവശങ്ങളിലും പ്രോഗ്രാമിങ്ങിലും പ്രവർത്തിച്ചാണു് ഞാൻ ഈ മേഖലയിലെത്തിയതു് എന്നതുകൊണ്ടാണ്. അഞ്ചാറുവർഷം അങ്ങനെ നിരന്തരം പല ഫോണ്ടുകളുടെ രൂപങ്ങൾ നമ്മുടെ മുന്നിൽ വന്നപ്പോൾ മേൽപ്പറഞ്ഞ കാര്യങ്ങളിൽ കൂടുതൽ അറിവുനേടാനായി.
  2. അക്ഷരങ്ങൾ, കൂട്ടക്ഷരങ്ങൾ തുടങ്ങിയവയെ സംബന്ധിച്ച  ഭാഷാപരമായ അറിവ് അത്യന്താപേക്ഷിതമാണ്. ഉദാഹരണത്തിന് മ്പ = മ്+പ ആണ്, ന്+പ അല്ല എന്നൊക്കെ കൃത്യമായി അറിഞ്ഞിരിക്കണം.
  3. ഫോണ്ടുകളെക്കാൾ വൈവിധ്യം മലയാളത്തെ സംബന്ധിച്ചിടത്തോളം ഉള്ളതു് വഴിയോരങ്ങളിലെ ചുമരെഴുത്തുകൾക്കാണ്. ഫ്ലക്സുകളുടെ കയ്യേറ്റമുണ്ടെങ്കിലും.

ഇതൊക്കെ ചെയ്താലും ടൈപ്പോഗ്രഫിയിൽ പ്രാവീണ്യമുള്ളവരുമായി നേരിട്ട് സംസാരിച്ചും ചർച്ച ചെയ്തും മനസ്സിലാക്കേണ്ട ഒരുപാടു പ്രായോഗികവശങ്ങളുണ്ടു്. അവയൊക്കെ ഇതുവരെ മലയാളത്തിൽ രേഖപ്പെടുത്തിയിട്ടില്ല എന്ന വലിയൊരു കുറവുണ്ടു്.  മലയാളം ടൈപ്പോഗ്രഫി ഗൌരവപരമായി ഒരു കോഴ്സ് ആയി നടപ്പാകുന്നൊരുകാലത്തൊക്കെ അത്തരം ഡോക്യുമെന്റേഷനുകൾ വരുമായിരിക്കും.

ഏതൊക്കെ ടൂളുകൾ ഉപയോഗിക്കണം?

ഫോണ്ട് ഡിസൈനിങ്ങിനു പല സോഫ്റ്റ്‌വെയർ പാക്കേജുകൾ ലഭ്യമാണു്. ഞാനുപയോഗിക്കാറുള്ളതു് ഫോണ്ട്ഫോർജ് ആണു്. ലിനക്സധിഷ്ഠിത ഓപ്പറേറ്റിങ്ങ് സിസ്റ്റങ്ങളിൽ ഇതു് സൗജന്യമായി ലഭ്യമാണ്. വിൻഡൊസിലും മാക്കിലും പ്രവർത്തിക്കുന്ന സ്വതന്ത്ര സോഫ്റ്റ്‌വെയറാണ്. ഫോണ്ട്ഫോർജിൽ അക്ഷരരൂപങ്ങൾ വരക്കാനുള്ള സൌകര്യമുണ്ടെങ്കിലും അവ പ്രയാസമായിട്ടാണ് എനിക്ക് തോന്നിയിട്ടുള്ളതു്. അതുകൊണ്ടു് വരകൾ ഇങ്ക്‌സ്കേപ് ഉപയോഗിച്ചാണ് ചെയ്യാറു്. അങ്ങനെ വരച്ച SVG ഫയലുകൾ ഫോണ്ട് ഫോർജിൽ ഇമ്പോർട്ട് ചെയ്ത് ഉപയോഗിക്കും. ഇങ്ക്‌സ്കേപ്പും എല്ലാ ഓപ്പറേറ്റിങ്ങ് സിസ്റ്റങ്ങളിലും സൌജന്യമായി ലഭ്യമായ സ്വതന്ത്ര സോഫ്റ്റ്‌വെയറാണ്. ഈ ടൂളുകളുടെ ഉപയോഗം പരിശീലിക്കുകതന്നെ വേണം.

ഫോണ്ട്ഫോർജ്

ഫോണ്ട്‌ഫോർജ് പക്ഷേ ടൈപ്പ് ഡിസൈൻ ടൂളുകളിൽ മെച്ചപ്പെട്ടതെന്നു പറയാനാകില്ല. മാക്കിനു മാത്രമുള്ള Glyphs, Robofont തുടങ്ങിയവയൊക്കെയാണു് ഈ മേഖലയിലെ പ്രൊഫഷണലുകൾ ഉപയോഗിക്കുന്നതു്. പക്ഷേ ഇരുപതിനായിരത്തിലധികം രൂപ വിലയുണ്ടു് ഇവയുടെ ലൈസൻസിന്.

എങ്ങനെ വരയ്ക്കാം

പേപ്പറിൽ വരച്ചു് സ്കാൻ ചെയ്ത് അതിന്റെ ഔട്ട്‌ലൈൻ ട്രെയ്സ് ചെയ്യുന്ന രീതി പിന്തുടരുന്ന ടൈപ്പോഗ്രഫേഴ്സ് ഉണ്ടു്. ഞാൻ പേപ്പർ ഉപയോഗിക്കാറില്ല. പൂർണ്ണമായും ഇമേജ് എഡിറ്ററിൽ മൌസ് കൊണ്ടുതന്നെയാണ് മഞ്ജരി, ചിലങ്ക ഫോണ്ടുകൾ വരച്ചതു്. നിങ്ങൾക്കിഷ്ടമുള്ള രീതി പിന്തുടരാം.

വരയ്ക്കുമ്പോൾ ശ്രദ്ധിക്കാൻ ഒരുപാടു കാര്യങ്ങളുണ്ടു്. അക്ഷരങ്ങളുടെ ഉയരം, വരകളുടെ കട്ടി എന്നിവ എല്ലാ അക്ഷരങ്ങൾക്കും ഒരുപോലെ ആവണമല്ലോ. ഗ്രിഡ് മാർക്ക് ചെയ്ത ഒരു ടെമ്പ്ലേറ്റ് ഇമേജിലാണ് ഞാൻ വരയ്ക്കാറ്. അതിൽ ബേസ് ലൈൻ, x-height, Em-size, bearings തുടങ്ങിയ ടൈപ്പൊഗ്രഫി അളവുകൾ എല്ലാം അടയാളപ്പെടുത്തിയിരിക്കും. ഈ വാക്കുകൾ പരിചയമില്ലെങ്കിൽ പേടിക്കേണ്ട, പഠിച്ചെടുക്കാവുന്നതാണ്. പക്ഷേ ഈ ഒരു ലേഖനത്തിൽ ടൈപ്പൊഗ്രഫി അനുപാതങ്ങളെപ്പറ്റി പറയാനുദ്ദേശിക്കുന്നില്ല. ഈ അളവുകൾ ഓരോ ഡിസൈനിനും ഓരോന്നാണ്. അവ എങ്ങനെ തീരുമാനിക്കുന്നു എന്നതു് വളരെ പ്രധാനമാണ്.

Source: https://pica-ae.deviantart.com/journal/Project-Educate-About-Typefaces-293238420

ചിലങ്ക, മഞ്ജരി എന്നിവയുടെ സോഴ്സ് കോഡിനോടൊപ്പം ഉപയോഗിച്ച എല്ലാ svg ഇമേജുകളും കൊടുത്തിട്ടുണ്ടു്. അവ റെഫർ ചെയ്യുന്നതു് മേൽപ്പറഞ്ഞ കാര്യങ്ങൾ മനസ്സിലാക്കാൻ സഹായിച്ചേക്കും.

bezier കർവുകളാണ് ഒരു ഫോണ്ടിലെ അക്ഷരരൂപങ്ങളെ നിശ്ചയിക്കുന്നതു്. പേപ്പറിൽ വരച്ചാലും ട്രേയ്സ് ചെയ്ത് ഫോണ്ടിലേക്ക് ചേർക്കേണ്ടതു് ബെസിയർ കർവുകളാൽ നിർവചിച്ച രൂപമാണ്. വൃത്തിയായി കൃത്യതയോടെ ഈ കർവുകൾ എങ്ങനെ വരക്കാമെന്ന് മിക്ക ഇമേജ് എഡിറ്റിങ്ങ് സോഫ്റ്റ്‌വെയറുകളും പരിശീലിക്കുമ്പോൾ പരിചയിക്കുന്നതാണ്. തുടക്കക്കാർക്ക് വേണമെങ്കിൽ http://bezier.method.ac/ എന്ന ഒരു ഗെയിം ഉപയോഗിച്ചിത് പരിശീലിക്കാം.

മഞ്ജരി ഫോണ്ടിലെ യ എന്ന അക്ഷരത്തിന്റെ വര. ബെസിയർ കർവുകളും ടൈപ്പോഗ്രഫി മെട്രിക്സ് ഗൈഡുകളും ശ്രദ്ധിക്കുക.

അക്ഷരങ്ങളുടെ രൂപകല്പന

Source: https://medium.com/type-talk/the-typography-lettering-and-calligraphy-cousins-d66543b0ff3c

സ്വന്തമായൊരു ഡിസൈൻ ആശയം മനസ്സിലുണ്ടാകണമെന്നു പ്രത്യേകം പറയേണ്ടതില്ലല്ലോ. കാലിഗ്രഫിയിൽ നിന്നും ടൈപ് ഡിസൈനിങ്ങിനെ വ്യത്യസ്തമാക്കുന്നതു് കാലിഗ്രാഫി ആശയങ്ങൾ പലപ്പോഴും കുറച്ചു അക്ഷരങ്ങൾക്കു വേണ്ടി ആ അക്ഷരങ്ങളുടെ പ്രത്യേകതകൾ ഉൾക്കൊണ്ടുകൊണ്ട് ചെയ്യുന്നതാണ്. അതേ സമയം ടൈപ്പ് ഡിസൈനിൽ ഒരു ആശയം മലയാളത്തിലെ എല്ലാ അക്ഷരങ്ങളിലും പ്രയോഗിക്കണം. ഉദാഹരണത്തിനു് നാരായണഭട്ടതിരി “കാക്ക” എന്ന വാക്ക് കാക്കയുടെ രൂപം ആവാഹിച്ചുകൊണ്ടു വരയ്ക്കും. പക്ഷേ അതു് ടൈപ്പ് ഡിസൈനിനു പറ്റില്ല – കാരണം അറുനൂറോളം അക്ഷരരൂപങ്ങളിലേക്ക് ആ തീം പകർത്താനാവില്ല. അതുകൊണ്ടു് മനസ്സിലുള്ള ഡിസൈൻ ടൈപ്പ് ഡിസൈനിലേക്ക് ഉപയോഗിക്കുന്നതിനുമുമ്പ് ഈ ശൈലിയിൽ എല്ലാ അക്ഷരങ്ങളും വരയ്ക്കാൻ സാധിക്കുമോ എന്നൊക്കെ ആലോചിക്കണം.

ഇവിടെയും നിലവിലെ ഫോണ്ടുകൾ – മലയാളത്തിലൊതുക്കേണ്ടതില്ല – വിശദമായി ആസ്വദിക്കുകയും അനലൈസ് ചെയ്യുകയും ചെയ്യുന്നതുപകാരപ്പെടും. എന്തായാലും മലയാളത്തിൽ വളരെ ചുരുക്കം ഫോണ്ടുകളേ ഉള്ളൂ എന്നതുകൊണ്ടു് അനന്യമായ ഒരു ആശയം കണ്ടുപിടിക്കാൻ ബുദ്ധിമുട്ടേണ്ടിവരില്ല. ഇംഗ്ലിഷ് ഫോണ്ട് ഒക്കെ ചെയ്യുന്നവർ പറയാറുണ്ടു്, ആ ഭാഷയിലെ ഡിസൈൻ വളരെ സാചുറേറ്റഡ് ആയതുകൊണ്ടു് എങ്ങനെ വരച്ചാലും അതുപോലത്തെ ഒന്ന് വേറേ ആരെങ്കിലും ചെയ്തിട്ടുണ്ടാവുമെന്ന്.

എന്തൊക്കെ വരയ്ക്കണം?

മലയാളം യുണിക്കോഡ് ബ്ലോക്കിൽ നിലവിൽ നൂറോളം അക്ഷരങ്ങളുണ്ട്. ഇവയെല്ലാം വരച്ചാൽ മാത്രം പോര. ഇവ ചേർന്നുള്ള കൂട്ടക്ഷരങ്ങൾ വരക്കണം. മഞ്ജരി ഫോണ്ടിൽ മലയാളത്തിനു മാത്രമായി അറുനൂറോളം ഗ്ലിഫുകളുണ്ടു്.  മഞ്ജരി താരതമ്യേന കൂട്ടക്ഷരങ്ങൾ കുറഞ്ഞ ഫോണ്ടാണ്. രചനയിൽ ഇതു് ആയിരത്തിനപ്പുറം കടക്കും. ഇത്രയും ഗ്ലിഫുകൾ ഉണ്ടെങ്കിലും ഏകദേശം 200-250 എണ്ണം ആണ് ഡിസൈൻ ചെയ്യേണ്ടതു്, ബാക്കിയുള്ളവ മിക്കവാറും ഇമേജ് എഡിറ്ററിന്റെ സഹായത്തോടെ കൂട്ടിച്ചേർക്കാവുന്നതാണ്.

സാധാരണ മലയാളം ഫോണ്ടുകളിൽ ബേസിക് ലാറ്റിൻ ഗ്ലിഫുകളും ചേർക്കാറുണ്ട്. മലയാളം അക്ഷരങ്ങളുടെ ശൈലിയുമായി മാച്ചാവുന്ന ഇംഗ്ലീഷ് അക്ഷരങ്ങളാണ് വരയ്ക്കാറ്. ഇതു് ഇംഗ്ലീഷ് ചെറിയക്ഷരം വലിയക്ഷരങ്ങളിൽ ഒതുങ്ങില്ല കെട്ടോ, ചിഹ്നങ്ങൾ, അക്കങ്ങൾ, കറൻസികൾ, ഡയാക്രിറ്റിക് മാർക്കുകൾ ഒക്കെ വേണം. മഞ്ജരി ഫോണ്ടിൽ ഇതെല്ലാം ചേർന്ന് 850 ഗ്ലിഫുകളുണ്ടു്.

പുതിയ ലിപി ഫോണ്ടാണെങ്കിൽ വരകൾ കുറയ്ക്കാമല്ലോ എന്നൊരു സംശയം ഉണ്ടാവും. അതുശരിയാണ്. നോട്ടോസാൻസ് മലയാളം ഫോണ്ടിൽ 320 ഗ്ലിഫുകളുണ്ടു്. വ്യക്തിപരമായി എനിക്ക് ഇത്തരം ഫോണ്ടുകളോടു് മമതയില്ല. ഒരു ഡിസൈനറെ സംബന്ധിച്ചോളം തൃപ്തിതരുന്നതു് മലയാളത്തിന്റെ ലിപിസങ്കീർണത അതിന്റെ പരമാവധി പൂർണതയിൽ ആവാഹിക്കാൻ കഴിയുമ്പോഴാണ്. മലയാളത്തിന്റെ കൂട്ടക്ഷരങ്ങളിലാണ് അതിന്റെ സൌന്ദര്യം ഇരിക്കുന്നതു്. അതുവിട്ടുകളഞ്ഞ് ചെറിയൊരു സബ് സെറ്റ് മാത്രം ചെയ്യുന്നതിൽ ടൈപ് ഡിസൈനർ എന്ന നിലയിൽ എനിക്ക് നല്ല അഭിപ്രായമില്ല. എന്നുവെച്ചു് ഈ എളുപ്പപ്പണി ആരെങ്കിലും ചെയ്യുന്നതിലെനിക്കു വിരോധമൊന്നുമില്ല. ഒരുപാടുപേർ പുതിയലിപി ഇഷ്ടപ്പെടുന്നുണ്ടല്ലൊ.

മഞ്ജരി ഒരു ടൈപ്പ് ഫേസാണ്, ഫോണ്ടല്ല എന്നു പറയാറുണ്ടു്. ഒരു പ്രത്യേക ശൈലിയിൽ, കനത്തിൽ ഉള്ള അക്ഷരരൂപങ്ങളുടെ കമ്പൈലേഷനാണ് ഒരു ഫോണ്ട്. ഉദാഹരണത്തിന് മഞ്ജരി റെഗുലർ, മഞ്ജരി ബോൾഡ്, മഞ്ജരി തിൻ ഒക്കെ ഓരോരോ ഫോണ്ടുകളാണ്. ആ ശൈലിയുടെ വകഭേദങ്ങൾ. ഇവയെല്ലാം ചേർന്ന ഫാമിയ്ക്കാണ് ടൈപ്പ് ഫേസ് എന്നോ ഫോണ്ട് ഫാമിലി എന്നോ പറയുന്നതു്.

മഞ്ജരിയാണെന്നു തോന്നുന്നു ഇത്തരത്തിൽ 3 സ്റ്റൈൽ വേരിയന്റുകൾ ആദ്യം മലയാളത്തിൽ കൊണ്ടുവന്നതു്. ബാക്കിയുള്ള മിക്ക ഫോണ്ടുകളും ഒരു ശൈലിയിൽ ഒരു തിക്ൿനസ്സിൽ ഉള്ള ഫോണ്ടാണ്. രചനയ്ക്ക് ബോൾഡ്, റെഗുലർ വകഭേദങ്ങളുണ്ടു്.

ഒന്നിലധികം വകഭേദങ്ങളുള്ള ഒരു ഫോണ്ട് ഫാമിലി രൂപകല്പന ചെയ്യുന്നതു് വളരെ സങ്കീർണ്ണവും സമയമെടുക്കുന്നതുമായ പ്രൊജക്ടാണെന്നു പറയേണ്ടതില്ലല്ലോ.

പ്രോഗ്രാമിങ്ങ് അറിയേണ്ടതുണ്ടോ?

ടൈപോഗ്രാഫർ വരച്ചു തയ്യാറാക്കിയ അക്ഷരരൂപങ്ങളെ ഒരു ഫോണ്ടാക്കി മാറ്റുന്നതു് ഫോണ്ടിന്റെ ചിത്രീകരണനിയമങ്ങളാണു്. ഓപ്പൺടൈപ്പ് സ്പെസിഫിക്കേഷൻ അനുസരിച്ചുള്ള ഇത്തരം നിർദ്ദേശങ്ങൾ പ്രോഗ്രാമിങ്ങ് കഴിവുള്ളവരാണ് തയ്യാറാക്കുന്നതു്. എന്നിരിക്കലും ഒരിക്കൽ തയ്യാറാക്കിയാൽ പുനരുപയോഗിക്കാം എന്ന മെച്ചമുണ്ടു്. സ്വതന്ത്ര മലയാളം കമ്പ്യൂട്ടിങ്ങിന്റെ ഫോണ്ടുകളിലെ ഈ ചിത്രീകരണനിയമം പുനരുപയോഗിക്കാവുന്ന രീതിയിൽ തയ്യാറാക്കിയതാണ്. ഒരു പ്രത്യേക രീതിയിൽ അക്ഷരരൂപങ്ങൾക്കു പേരിട്ടാൽ വളരെക്കുറച്ചു സമയം കൊണ്ടുതന്നെ ഫോണ്ട് നിർമാണത്തിലെ ഈ ഭാഗം ചെയ്തു തീർക്കാം. ഈ നിർദ്ദേശങ്ങൾ പക്ഷേ വർഷങ്ങളെടുത്തു് തയ്യാറാക്കിയതാണെന്നോർക്കണം. ഇതുകൂടാതെ സ്വതന്ത്ര മലയാളം കമ്പ്യൂട്ടിങ്ങ് ഫോണ്ടുകളുടെ സോഴ്സ് കോഡിൽ ഓട്ടോമാറ്റിക് ഫോണ്ട് കമ്പൈൽ ചെയ്യാനും, പല ഫോർമാറ്റുകളിൽ തയ്യാറാക്കാനും ഉള്ള സ്ക്രിപ്റ്റുകളും ഉണ്ടു്. ഇവയും പുനരുപയോഗിക്കാം. ഇങ്ങനെ നിർമിക്കുന്ന പുതിയ ഫോണ്ടുകൾ സ്വതന്ത്ര ലൈസൻസിലുള്ള ഫോണ്ടുകളാവണം എന്നു പ്രത്യേകം പറയേണ്ടതില്ലല്ലോ. ഇതിനെപ്പറ്റി SMC യുടെ ബ്ലോഗിൽ ഒരു ലേഖന പരമ്പര ഉണ്ടു്. വായിക്കുന്നതു് നന്നാവും.

എത്ര സമയമെടുക്കും?

പുതിയൊരു ഫോണ്ട് നിർമിക്കുന്നതു് കലാപരമായ ഒരു പ്രവൃത്തിയാണു്. അതുകൊണ്ടുതന്നെ എത്ര സമയം എടുക്കും എന്നതു് പറയാൻ പറ്റില്ല. ടൈപ്പോഗ്രഫർക്കു തൃപ്തിയാവും വരെ അതു് മാറ്റിമാറ്റി വരച്ചുകൊണ്ടിരിക്കും. രചന, മീര ഫോണ്ടുകളൊക്കെ വർഷങ്ങളോളം നീണ്ടുനിന്ന അധ്വാനത്തിന്റെ ഫലമാണ്. ഞാൻ ചെയ്ത ചിലങ്ക ഫോണ്ട് രണ്ടു മാസത്തെ സമയമെടുത്തുവെങ്കിൽ രണ്ടാമതു ചെയ്ത മഞ്ജരി ഫോണ്ട് ഒന്നരക്കൊല്ലം എടുത്തു. എല്ലാ ദിവസവും രാവിലെ മുതൽ വൈകുന്നേരം വരെ ഫോണ്ട് നിർമാണത്തിൽ ഏർപ്പെട്ടു എന്ന് തെറ്റിദ്ധരിക്കരുതു്. ജോലിയും മറ്റു തിരക്കുകളും കഴിഞ്ഞു കിട്ടുന്ന ചുരുക്കം ചില മണിക്കൂറുകളൊക്കെ ഉപയോഗിച്ചാണ് ഫോണ്ടിന്റെ നിർമാണത്തിൽ സമയം ചെലവഴിക്കുന്നതു്. കണ്ണിന്റെ സൂക്ഷ്മമായ ഉപയോഗം ആവശ്യപ്പെടുന്ന പ്രവൃത്തിയായതിനാൽ അധികസമയം ഒരു ദിവസം വരക്കാൻ സാധിക്കുകയുമില്ല.

പൊതുവായ ഉപയോഗത്തിനുള്ള ഫോണ്ടുകൾ റിലീസ് ചെയ്ത ശേഷം വിവിധ കമ്പ്യൂട്ടിങ്ങ് ഉപകരണങ്ങൾക്കു വേണ്ടിയും പുതുതായിറങ്ങുന്ന ഓപ്പറേറ്റിങ്ങ് സംവിധാനങ്ങൾക്കു വേണ്ടിയും ടെസ്റ്റ് ചെയ്യുകയും പുതുക്കിക്കൊണ്ടിരിക്കുകയും വേണം. ഇതു് ഒരുപാടു സമയവും ഒരുപാടുവർഷത്തെ തുടർച്ചയായ മെയിന്റനൻസും ആവശ്യപ്പെടുന്ന പ്രവൃത്തിയാണ്. ഒരു സോഫ്റ്റ്‌വെയർ പോലെ ഫോണ്ടുകളുടെ പുതിയ പതിപ്പുകൾ റിലീസ് ചെയ്യുന്നു. ഉദാഹരണത്തിനു് സ്വതന്ത്ര മലയാളം കമ്പ്യൂട്ടിങ്ങ് പുറത്തിറക്കിയ എല്ലാ ഫോണ്ടുകളിലും സജീവമായ മെയിന്റനൻസ് നടക്കുന്നതും പുതിയ പതിപ്പുകൾ ഇറക്കുന്നതും കാണാൻ സാധിക്കും. റിലീസ് ചെയ്യുന്നതോടെ തീരുന്നതല്ല ഫോണ്ട് നിർമാണമെന്നർത്ഥം.

പൊതു ഉപയോഗത്തിനുള്ള നല്ലൊരു ഫോണ്ടെന്നാലെന്താണ്?

പരീക്ഷമെന്നതിലുപരി സീരിയസ്സായി എല്ലാവർക്കും ഉപയോഗിക്കാവുന്ന ഒരു ഫോണ്ട് രൂപകല്പന ചെയ്തു പുറത്തിറക്കുക എന്നതു് ശ്രമകരമായ ജോലിയാണ്. ഇത്തരം ഒരു ഫോണ്ടു് ചിത്രീകരണപ്പിഴവുകളില്ലായെന്നുറപ്പു വരുത്താനുള്ള ടെസ്റ്റിങ്ങ് ചെയ്യണം. അതു് പല ഓപ്പറേറ്റിങ്ങ് സിസ്റ്റങ്ങളിൽ, പല അപ്ലികേഷനുകളിൽ ടെസ്റ്റ് ചെയ്യണം. ഫോണ്ടിന്റെ പല വലിപ്പങ്ങളിൽ വായനയ്ക്കനുയോജ്യമാണെന്നു ഉറപ്പുവരുത്തണം. അതുതന്നെ പ്രിന്റ്, സാധാരണ കമ്പ്യൂട്ടർ സ്ക്രീൻ, മൊബൈൻ ഡിവൈസുകൾ, ഉയർന്ന റെസലൂഷനും പിക്സൽ ഡെൻസിറ്റിയുമുള്ള സ്കീനുകൾ എന്നിവയിൽ ടെസ്റ്റ് ചെയ്യണം.  ഒറ്റയൊറ്റ അക്ഷരങ്ങളായും വാക്കുകളായും പാരഗ്രാഫായും പേജായും തലക്കെട്ടായും ടെസ്റ്റ് ചെയ്യണം.

ഇതിനുള്ള ഒരു സൂത്രപ്പണി സ്വന്തം കമ്പ്യൂട്ടറിലെ ഡിഫോൾട്ട് ഫോണ്ടായി തുടക്കം മുതലേ ഉപയോഗിക്കുക എന്നതാണ്. കൂടാതെ എല്ലാ അക്ഷരങ്ങളും വരച്ചുകഴിഞ്ഞാൽ അടുത്ത സുഹൃത്തുക്കളോടും ഇങ്ങനെ ചെയ്തു സഹായിക്കാൻ ആവശ്യപ്പെടുക. അങ്ങനെ നിത്യോപയോഗത്തിൽ കാണുന്ന പ്രശ്നങ്ങൾ പരിഹരിച്ചാൽതന്നെ നല്ലൊരു ഫോണ്ടായി മാറും.

ചെറിയൊരു പരിശീലനം

ഇത്രയൊക്കെ വായിച്ചാലും പുതിയൊരു ഫോണ്ട് ചെയ്യാൻ മാത്രം ആത്മവിശ്വാസം ഉണ്ടാവില്ലെന്നറിയാം. അതിനാൽ ഒരു കൈ നോക്കാൻ ചെറിയൊരു പരിശീലനം താഴെക്കൊടുക്കുന്നു. കാര്യങ്ങൾ വേഗത്തിലാക്കാൻ വേണ്ടി നമ്മൾ ചെയ്യാൻ പോകുന്നതു് നിലവിലെ ഒരു ഫോണ്ടെടുത്തു് അതിലെ ചില അക്ഷരങ്ങൾ മാറ്റിവരച്ചു് കമ്പൈൽ ചെയ്തു ഇൻസ്റ്റാൾ ചെയ്തു് ഉപയോഗിച്ചുനോക്കലാണ്. അധികം പഴയതല്ലാത്ത ഒരു ലിനക്സ് ഓപ്പറേറ്റിങ്ങ് സിസ്റ്റം നിങ്ങൾ ഉപയോഗിക്കുന്നുവെന്നും അതിലെ ടെർമിനൽ അത്യാവശ്യം ഉപയോഗിക്കനറിയാം എന്നുമുള്ള വിശ്വാസത്തോടെ. (സ്വതന്ത്ര സോഫ്റ്റ്‌വെയറുപയോഗിച്ചുള്ള ഫോണ്ട് രൂപകല്പനയേ എനിക്ക് ഏറ്റവും പരിചയം. അതുകൊണ്ടാണ്).

  1. ആദ്യപടിയായി നിലവിലെ ഒരു ഫോണ്ടിന്റെ സോഴ്സ് കോഡ് എടുത്തു് കമ്പൈൽ ചെയ്യാൻ പഠിക്കലാണ്. ഇതിനായി https://github.com/smc/chilanka എന്ന ചിലങ്ക ഫോണ്ടിന്റെ റിപ്പോസിറ്ററിയിൽ പോയി Clone or Download എന്ന ബട്ടണിൽ ക്ലിക്കു ചെയ്ത് Zip ആയി സോഴ്സ് കോഡ് ഡൌൺലോഡ് ചെയ്യുക. അതൊരു ഫോൾഡറിലേക്ക് തുറന്നിടുക(extract)
  2. നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ താഴെപ്പറയുന്ന സോഫ്റ്റ്‌വെയർ പാക്കേജുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക:
    1. fontforge
    2. python-fontforge
    3. build-essential
    4. python-pip
  3. അതിനുശേഷം ചിലങ്ക കോഡുള്ള ഫോൾഡറിൽ നിന്ന് താഴെപ്പറയുന്ന കമാന്റ് റൺ ചെയ്യുക. pip install -r tools/requirements.txt
  4. ശേഷം make all എന്ന കമാന്റ് റൺ ചെയ്യുക. അപ്പോൾ test എന്ന ഫോൾഡറിൽ ഒരു പിഡിഎഫ് ഫയൽ കാണാം. അതിൽ ഇപ്പോൾ നിങ്ങൾ കമ്പൈൽ ചെയ്ത ഫോണ്ട് ഉപയോഗിച്ച് കുറേ സാമ്പിൾ മലയാളം റെൻഡർ ചെയ്തിരിക്കുന്ന കാണാം.

ഇപ്പോൾ നിങ്ങൾ ഒരു ഫോണ്ട് വിജയകരമായി കമ്പൈൽ ചെയ്ത് ടെസ്റ്റു ചെയ്തു. ഫോൾഡറിൽ കാണുന്ന Chilanka-Regular.ttf ഫയൽ ഇൻസ്റ്റാൾ ചെയ്യുകയുമാവാം. ജിഞ്ജാസുക്കൾക്ക് ഇപ്പോൾ എന്താ സംഭവിച്ചതു് എന്നറിയാൽ ഫയലുകളൊക്കെ തുറന്നു നോക്കാം. Chilanka-Regular.sfd എന്ന ഫയൽ ഫോണ്ട് ഫോർജ് കൊണ്ടു തുറന്നാൽ ചിലങ്ക ഫോണ്ടിലെ എല്ലാ ഗ്ലിഫുകളും കാണാം. features എന്ന ഫോൾഡറിൽ ചിത്രീകരണനിയമങ്ങൾ കോഡ് ചെയ്തതും കാണാം.

ഇനി നമ്മൾ ഇതിലെ ഏതെങ്കിലും ഒരു അക്ഷരം മാറ്റി വരയ്ക്കാൻ പോവുകയാണ്. glyphs എന്ന ഫോൾഡറിൽ കാണുന്ന നൂറുകണക്കിനു svg ഫയലുകളിലാണ് ചിലങ്ക ഫോണ്ടിന്റെ അക്ഷരങ്ങൾ വരച്ചിട്ടുള്ളതു്. അതിലേതെങ്കിലും ഒന്നു തുറന്ന് എഡിറ്റ് ചെയ്യാം. പുതുതായി ഒന്നു വരയ്ക്കണമെങ്കിൽ template.svg എന്ന ഫയൽ തുറന്ന് അതിലെ ഗ്രിഡ് ഒക്കെ ഉപയോഗിച്ച് വരയ്ക്കാം. ഇങ്ക് സ്കേപ്പ് ഉപയോഗിക്കാം. അല്ലെങ്കിൽ വേറേതെങ്കിലും നിങ്ങൾക്കറിയുന്ന svg എഡിറ്റർ ഉപയോഗിക്കാം. ക എന്ന ഒരൊക്ഷരം ഇങ്ക്‌സ്കേപിൽ വരക്കുന്ന ഒരു വീഡിയോ ഒരുദാഹരണത്തിന് വേണ്ടി ഞാൻ കുറേ കാലം മുമ്പ് യുട്യൂബിൽ ഇട്ടിട്ടുണ്ട്. ശ്രദ്ധിക്കേണ്ട ഒരു കാര്യം സ്ട്രോക്കുകളെ പാത്ത് ആക്കണം വരച്ചു കഴിഞ്ഞാൽ എന്നതാണ്. അങ്ങനെ വരച്ച ഇമേജ് സെലക്ട് ചെയ്ത് കോപി ചെയ്ത് ഫോണ്ട് ഫോർജിൽ തുറന്നിരിക്കുന്ന അതേ അക്ഷരത്തിൽ കൊണ്ടുപോയി പേസ്റ്റ് ചെയ്യുക. ഫോണ്ട്ഫോർജിൽ ആ മാറ്റം സേവ് ചെയ്യണം. എന്നിട്ട് make all എന്ന കമാന്റ് അടിക്കുക. നേരത്തെ പറഞ്ഞ പിഡിഎഫിൽ നിങ്ങൾ ഇപ്പോൾ മാറ്റിവരച്ച അക്ഷരങ്ങൾ കാണും!.

മേൽ വിവരിച്ച പരിശീലനം അത്ര എളുപ്പമല്ല എന്നറിയാം. ടൂളുകൾ ഉപയോഗിക്കാൻ പരിശീലിക്കേണ്ടതുണ്ട്, വരയ്ക്കാൻ പരിശീലിക്കേണ്ടതുണ്ടു്, ടെർമിനൽ ഉപയോഗിക്കാൻ അറിഞ്ഞിരിക്കണം. അങ്ങനെ കുറേ കടമ്പകളുണ്ടു്. പക്ഷേ ഈ ഓരോ സ്റ്റെപ്പും പരിശീലിക്കാതെ നിവൃത്തിയില്ല. അതിനു നിങ്ങൾ കുറേ സമയവുമെടുത്തേക്കും. നിങ്ങൾ ഇതിൽ വിജയിച്ചില്ലെങ്കിലും സങ്കടപ്പെടേണ്ട. വർഷങ്ങളുടെ പരിശീലനവും നിരീക്ഷണവും ശരാശരിയിൽ കവിഞ്ഞ കമ്പ്യൂട്ടർ പ്രയോഗത്തിലുള്ള കഴിവുകളും ഫോണ്ട് നിർമാണത്തിനാവശ്യമുണ്ടെന്നു മനസ്സിലായാലും മതി.

ചുരുക്കത്തിൽ

  1. അക്ഷരങ്ങളെ ടൈപ്പൊഗ്രഫി എന്ന കാഴ്ചപ്പാടിൽ നീരിക്ഷിക്കുക, ആസ്വദിക്കാൻ ശീലിക്കുക. നിലവിലെ ഫോണ്ടുകളും അവയുടെ സോഴ്സ് കോഡും പഠിക്കുക.
  2. വിവിധ തരം വരകൾ പ്രാക്ടീസ് ചെയ്യുക – പേപ്പറിലാവാം ഇമേജ് എഡിറ്ററിലാവാം
  3. നല്ല ഒരു ഡിസൈൻ സങ്കൽപം ഉണ്ടാക്കിയെടുക്കുക. പൂർണ്ണമായ ഒരു ഫോണ്ടു് എന്ന ലക്ഷ്യത്തിലേക്ക് ആ സങ്കല്പം യോജിക്കുന്നതാണോയെന്നാലോചിക്കുക. കുറച്ച് സാമ്പിളുകൾ വരച്ചുനോക്കുക.
  4. നല്ലൊരു ഫോണ്ട് എഡിറ്റർ/ഇമേജ് എഡിറ്റർ തിരഞ്ഞെടുക്കുക. ഫോണ്ട് ടൂൾകിറ്റായി നിലവിലെ സ്വതന്ത്ര ഫോണ്ടുകളുടെ സോഴ്സ് കോഡ് ഉപയോഗിക്കുക – അതോടൊപ്പം ഫോണ്ട് കമ്പൈൽ ചെയ്യാനും ടെസ്റ്റ് ചെയ്യാനുമുള്ള ടൂളുകൾ കിട്ടുന്നു. ലൈസൻസിങ്ങ് ശ്രദ്ധിക്കുക.
  5. അക്ഷരങ്ങൾ വരച്ചു തുടങ്ങുക. ഫോണ്ട് എഡിറ്ററിൽ ചേർക്കുക. പല വട്ടം മാറ്റിവരയ്ക്കേണ്ടിവരും.
  6. പല രീതിയിലുള്ള ടെസ്റ്റുകൾ ചെയ്യുക.
  7. ഫോണ്ട് റിലീസ്
  8. മെയിന്റനൻസ്

സഹായം വേണമെങ്കിൽ

സീരിയസ്സായി ഒരു ഫോണ്ടിന്റെ നിർമാണത്തിലേർപ്പെടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ സഹായിക്കുന്നതിൽ സന്തോഷമേയുള്ളൂ. സ്വതന്ത്ര ലൈസൻസിലുള്ള ഫോണ്ടായിരിക്കണം എന്ന ഒറ്റ നിബന്ധനയേ എനിക്കുള്ളൂ. ചോദിക്കാൻ മടിക്കേണ്ട.

Redesigned font download page of SMC

The font preview and download page of SMC has a fresh look now.

fonts

The intention is to provide a font preview, typography showcase, download site in single page. Every font has multiple illustrations of usage and the text used is editable if you want to try your own text there.

The old page which was also designed by myself was not mobile friendly. It provides a single page view to compare the fonts, each represented as cards. But it did not had enough flexibility to showcase some fine usages of typography.

fonts

The new design is mobile friendly.
fonts

On technical side, I used flexbox, LESS. For carousal style transitions, I used cycle2  More importantly, I did not use bootstrap :).  See code.

Fontconfig language matching

I had to spend a few hours to debug a problem about fontconfig not identifiying a font for a language. Following the tradition of sharing the knowledge you acquired in hard way, let me note it down here for search engines.

The font that I am designing now has 3 style variants, thin, regular and bold. All has same family name. So if you set this family for whatever purpose, depending on context, thin, regular or bold versions will be picked up. Regular is expected by default. Also when you pick the font from font selectors, you would expect, regular being selected by default.

The problem I was facing is, instead of Regular, Bold was getting selected as default. In font selectors, Bold was listed first.

In GNU/Linux systems, this font matching and selection is done by fontconfig. I started with fc-match

$ fc-match MyFont
MyFontBold.otf: "MyFont" "Bold"

So that confirms the problem. After fiddling with os/2 properties , asking in fontconfig mailing list, and reading fontconfig documentation, I found that the lang property fontconfig calculates from Regular variant of font does not include ‘en’

$ fc-list MyFont : family : style : lang 
MyFont:style=Bold:lang=aa|ay|bi|br|ch|en|es|eu|fj|fur|gd|gl|gv|ho|ia|id|ie|io|it|mg|ml|nl|nr|nso|oc|om|pt|rm|so|sq|ss|st|sw|tl|tn|ts|uz|vo|xh|yap|zu|an|fil|ht|jv|kj|kwm|li|ms|ng|pap-an|pap-aw|rn|r
w|sc|sg|sn|su|za 
MyFont:style=Regular:lang=aa|ay|bi|br|ch|da|de|es|et|eu|fi|fj|fo|fur|fy|gl|ho|ia|id|ie|io|is|it|ki|lb|mg|ml|nb|nds|nl|nn|no|nr|nso|ny|om|rm|sma|smj|so|ss|st|sv|sw|tl|tn|ts|uz|vo|vot|xh|yap|zu|an|f
il|ht|jv|kj|kwm|li|ms|na|ng|pap-an|pap-aw|rn|rw|sc|sg|sn|su|za

I tried to find how fontconfig calculates the languages supported by a font. The minimum set of code points to be included in a font so that fontconfig declare that it supports a given language is defined in the fontconfig library. You can find them in source code. For example, mandatory code points(glyphs that match to it) to be present for English is defined in en.orth file. I cross checked each code points and one was indeed missing from my regular font variant, but bold version had everything. When I added it, all started working normally.

Later fontconfig developer Akira TAGOH told me that I can also use fc-validate to check the language coverage

$ fc-validate --lang=en MyFont.otf
MyFont.otf:0 Missing 1 glyph(s) to satisfy the coverage for en language

And after adding the missing glyph

$ fc-validate --lang=en MyFont.otf
MyFont.otf:0 Satisfy the coverage for en language

And now fc-match list Regular as default style

$ fc-match MyFont
MyFont.otf: "MyFont" "Regular"