Let’s Talk Font

Key Things to Con­sider When Designing an Ara­bic Font and Type­face

Arabnet - The Quarterly - - Content -

Key Things to Con­sider When Designing an Ara­bic Font and Type­face

“Bad ex­pe­ri­ences are the key to find­ing so­lu­tions.” With this state­ment, Huda Abi Fares, Founder at Khtt Foun­da­tion, be­gan her work­shop on Ara­bic ty­pog­ra­phy for mo­bile apps, along­side Fawzi Ra­hal—one of her for­mer stu­dents—dur­ing Arabnet Beirut 2014 De­sign+code day. The work­shop high­lighted key prin­ci­ples ev­ery designer should take into con­sid­er­a­tion when designing an Ara­bic type­face.

1. LEG­I­BIL­ITY: The first thing to think about when designing a type­face is its leg­i­bil­ity, es­pe­cially when designing for the smaller screens of mo­bile de­vices. To achieve that, there are a few things to keep in mind, start­ing with the fact that peo­ple read best what they’re used to read­ing. Us­ing an ul­tra-mod­ern type­face that doesn’t re­sem­ble any­thing peo­ple are used to read could alien­ate users and make it more dif­fi­cult for them to read text. That, how­ever, de­pends on your tar­get au­di­ence. The right type­face dif­fers be­tween an app di­rected at news­pa­pers read­ers and an­other aimed at TV watch­ers.

Se­condly, a bal­anced de­gree of thick­ness is needed for a good font. A very thick font could con­fuse read­ers by los­ing dis­tinc­tions be­tween let­ters, while an ex­tremely thin or light font could be il­leg­i­ble.

A good font is void of un­nec­es­sary de­tails. Fonts that are too cal­li­graphic, with too many de­tails, might look good on pa­per or on a poster, but not on screen. Read­ing off screens should be spon­ta­neous and eas­ily done; sim­ple look­ing let­ters are ideal as they are easy and fast to read.

Fonts should also be com­pact hor­i­zon­tally and ver­ti­cally. When designing for smaller screens, you have a limited vis­ual space, and com­fort­able read­ing means less scrolling; there­fore, let­ters should be as com­pact, ver­ti­cally and hor­i­zon­tally, as pos­si­ble with­out los­ing dis­tinc­tions.

Though screen fonts should con­tain as lit­tle de­tail as pos­si­ble, some de­tail, such as dots and vo­cal­iza­tions, are manda­tory. Mod­u­lat­ing stroke thick­ness could be very use­ful to pre­serve th­ese de­tails.

Re­mem­ber to keep coun­ters de­fin­able and evenly spaced. In ty­pog­ra­phy, a counter (or aper­ture) is the area of the type­face anatomy that is en­tirely or par­tially en­closed by the form of the let­ter. Small or tight coun­ters may de­form let­ters and make

read­ing a dif­fi­cult ex­pe­ri­ence.

It’s al­ways a good idea to de­sign for the worst-case sce­nario. If you’re a designer, you prob­a­bly have a good screen to test your work on. Users, on the other hand, may not. Keep that in mind and de­sign fonts that would be leg­i­ble on low-res or poorly-lit screens.

Con­trast is one of the most im­por­tant fac­tors in leg­i­bil­ity. Use dif­fer­ent colors for the back­ground and the type­face. How­ever, when us­ing white type­face over dark back­grounds, such as black, text tends to glow; lighter type­face could re­duce the glow­ing.

2. US­ING COLOR AS A TOOL: Color can be a pow­er­ful tool when designing a fonts, es­pe­cially in Ara­bic. Ara­bic web fonts do not have proper ital­ics. The Ara­bic lan­guage does not con­tain op­tions like sep­a­rate let­ters, cap­i­tal let­ters, small cap­i­tal let­ters, etc. Aside from the ob­vi­ous use of color as a leg­i­bil­ity tool, you can use it for bet­ter in­for­ma­tion ar­chi­tec­ture. Ap­ply­ing dif­fer­ent colors for dif­fer­ent in­for­ma­tion is a good way of clear­ing your in­for­ma­tion hi­er­ar­chy. That, of course, de­pends on the sub­ject, na­ture and tar­geted au­di­ence of your de­sign. Some­times, in­for­ma­tion hi­er­ar­chy is bet­ter il­lus­trated us­ing sizes, weights or even type­faces to sep­a­rate head­ings from body text, or com­ments from quotes, etc. In many cases, how­ever, us­ing a dif­fer­ent color for a head­ing, or for an im­por­tant quote, can be a more pow­er­ful way of sorting the in­for­ma­tion your de­sign is about.

The aes­thetic value of colors, with the right har­mony and the right con­trast, can­not be ne­glected, or even un­der­stated. To keep your aes­thetics at­trac­tive, don’t go over­board with us­ing colors. Too much colors tend to be dis­tract­ing, es­pe­cially in text. Usu­ally, two care­fully picked colors would be enough if used well.

3. ADDING YOUR PER­SONAL TOUCH: Ev­ery de­sign project has specifics. A good designer un­der­stands what his/ her project is about and finds the most beau­ti­ful way to con­vey in­for­ma­tion clearly. The hu­man fac­tor can­not be un­der­stated when designing type­face, or any­thing else for that mat­ter. Al­ways build your work on what you’re designing and who you’re designing it for.

Huda’s fi­nal ad­vice was to re­mem­ber that “as a gen­eral rule, less is def­i­nitely more!”

Ara­bic fonts from the mo­bile app Ang­hami.

Ara­bic fonts from the mo­bile app Ara­bic Al­pha­bet (left) and Charbaka (right).

Newspapers in English

Newspapers from Lebanon

© PressReader. All rights reserved.