cht電腦資訊字型
adm Find login register

一個強調可讀性設計的字型 - Andika Design Review

coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
1subject: 一個強調可讀性設計的字型 - Andika Design ReviewPromote 1 Bookmark 02008-03-15quote  

Andika Design Review

Andika 是我這兩天才發現、並相當喜歡的一款 sans serif 字型,因為是設計要用在閱讀教學上,所以特別強調可讀性。不同於一般強調可讀性設計字型的是,它包含了許多種語言的字圖 (glyph),雖然目前釋出的版本僅包含不過近 600 個基本字圖  (用 fontforge 看有 569 個), 不過據官方說法,正式釋出時 (預計在 2008) 將會有 3000 個以上的字圖。

 一般許多西方做閱讀教學的老師喜歡用 sans serif 文字,因為在字小的時候看起來比較乾淨清爽,比較清晰,但同時也因為外型較為簡潔,造成不同字母的外型過於類似的副作用,較不容易辨識字母。為了改善這個問題,Andika 的設計特別加強筆劃的起始與結尾 (hnau),讓外型類似的字母 (oadgq) 擁有稍微不同的形狀,並提供多種不同版型的設計 (Rev A ~ Rev G),這些可以在官方提供的小冊官方文件看到。

最後補充一下 Andika Design Review 這個怪名字的意思,Andika 是一種流行於非洲東南沿岸的語言 Swahili 中 “Write!” 的意思,“Design Review” 其實不是正式名稱,而是在強調目前這個字型釋出的目的是想從瞭解字型可讀性的使用者身上得到 feedback,藉以改進,也就是目前來講,這個字型還處於 pre-release 的狀態,字型的設計在未來還是有可能會有改變的,要求文件外觀穩定性的使用者要特別注意到這一點。

 

edited: 2
coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
2subject: Promote 0 Bookmark 02008-06-05quote  

有 Andika Basic Regular 可以下載了!

但目前僅內含  630 個常用羅馬字

debian testing 目前尚未收入此版本

coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
3subject: Promote 1 Bookmark 12008-07-06quote  

Andika Basic

附檔第一張圖是 firefox 2 中 hinting/nohinting 的比較

上方有 hinting,下方沒有

 Andika Basic with or without hinting in firefox 2

 

附檔第三張圖是 firefox 3 中 nohinting/hinting 的比較

上方沒有 hinting,下方有 hinting

Andika Basic with or without hinting in Firefox 3

附檔第二張圖是 Fx3/Fx2 有 hinting 的 Andika Basic 的比較

上方是 Fx3,下方是 Fx2

 

  Andika Basic with hinting turned on in Fx 2/3.

結論:

在 fontconfig 中如為 Andika Basic 加上 hinting,字母較細、銳利,筆劃的黑度較均勻,但字會變得比較扁,所以句子寬度變得較寬。

fx 3 宣稱改進了字型 kerning 與 hinting 的顯示,在圖中可以看到,fx3 中顯示的英文字比較緊密 (注意看 r 的部分),但 hinting 的部分我看不出是否有改善。

ps1. Andika Basic 一定要開 Autohint,不開會醜很多,以上都是在 autohint 的狀態下測的。

ps2. 想問一下,fontforge 中要怎麼看字型有沒有加入 kerning, hinting 的資料啊?

edited: 2
本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
4subject: Promote 0 Bookmark 02008-07-06quote  
coolcd

fx 3 宣稱改進了字型 kerning 與 hinting 的顯示,在圖中可以看到,fx3 中顯示的英文字比較緊密 (注意看 r 的部分),但 hinting 的部分我看不出是否有改善。

我覺得 fx3 對中文字的處理反而會變成反效果。這些處理似不應該在這個層次來做? 

ps2. 想問一下,fontforge 中要怎麼看字型有沒有加入 kerning, hinting 的資料啊?

最簡單的判別方式。double click 某個 glyph,彩色的就是有 hinting,否則是一般黑白的。

將一串 glyphs 反白後,Window =>  New Metric Window。可以觀察他的 kerning pair。


edited: 2
coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
5subject: Promote 0 Bookmark 02008-07-07quote  

LGJ
我覺得 fx3 對中文字的處理反而會變成反效果。

中文字寬度不是都相同嗎?應該不會有影響吧?

LGJ
這些處理似不應該在這個層次來做?

我也有這個疑問,可能是配合 Cairo 的需要吧,會想測試是因為看到 Firefox 3: Fonts and Text

LGJ

最簡單的判別方式。double click 某個 glyph,彩色的就是有 hinting,否則是一般黑白的。

將一串 glyphs 反白後,Window =>  New Metric Window。可以觀察他的 kerning pair。

謝謝,看來 Andika Basic 是沒有 hinting 的,順便附上我現在的設定

我是在 /etc/fonts/local.conf 中加上

 

/etc/fonts/local.conf
<match target="font">
        <test qual="any" name="family" compare="contains">
        <string>Andika</string>
        <string>Gentium</string>
        </test>
        <edit name="globaladvance"><bool>false</bool></edit>
        <edit name="spacing"><int>0</int></edit>
        <edit name="antialias" mode="assign"><bool>true</bool></edit>
        <edit name="hinting" mode="assign"><bool>false</bool></edit>
        <edit name="hintstyle" mode="assign"><const>hintfull</const></edit>
        <edit name="autohint" mode="assign"><bool>true</bool></edit>
        <edit name="rh_prefer_bitmaps" mode="assign"><bool>false</bool></edit>
        <edit name="rgba" mode="assign"><const>rgb</const></edit>
        <edit name="embeddedbitmap"><bool>false</bool></edit>
</match>

其實有些設定也不是很明白,是從其他地方 copy 過來改的。

edited: 2
本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
6subject: Promote 0 Bookmark 02008-07-07quote  
coolcd

 

我也有這個疑問,可能是配合 Cairo 的需要吧,我會想測試是因為看到 Firefox 3: Fonts and Text

我不清楚 fx3 是如何調整 kerning 的(因為這個字有歧義)。如果他是抓 kern/GPOS table 的資訊(這才是字型制作裡頭真正的 kerning table),那麼,這個做法是不錯的(也可以說是正確的),但目前有完整 kern/GPOS table 的字型並不多。

如果是不管 kerning table, 是由應用程式自行去控制的(從 glyph bounding box 判斷),這個就再說了,因為會因為字型而需要微調。這是以前的做法,因為 Type1 字型本身並不含有 kerning 資訊,他是另附在 *.afm 格式裡頭。 

謝謝,看來 Andika Basic 是沒有 hinting 的,順便附上我現在的設定

啊,不是這樣說,我早上因時間關係沒能說清楚。

一般所謂的 hinting,這是 ps/type1 字型的術語,在 TTF 並不是這樣用的,在 TTF 做 grid fit,是使用 TTF instructions 的方式,當然,一般就說他是 hinting(*誤*!)。這種 TTF instructions 無法從我所說的方式得知(那個方法適用於 Type1 格式),TTF 可以由 Hints => Edit Instructions 來得知是否含有 TTF instructions。


edited: 1
本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
7subject: Promote 0 Bookmark 02008-07-07quote  

coolcd
LGJ
我覺得 fx3 對中文字的處理反而會變成反效果。
中文字寬度不是都相同嗎?應該不會有影響吧? 

這是指 hinting 的部份,因為目前為止沒有一個對 CJK glyph 適當的 hinting 演算法,需要依每個字去手動調整(應該沒有人會這樣做,因為字型成本太高了)。一般中文字的部份並沒有 kerning 資訊,但中文字其實也是會有 kerning 的問題,但字實在是太多了,幾乎沒有人會去調整,頂多是調整每個字的左右 bearing 或 glyph 在 em 框裡頭的左右位置。 


edited: 2
coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
8subject: Promote 0 Bookmark 02008-07-07quote  

 

LGJ
我不清楚 fx3 是如何調整 kerning 的(因為這個字有歧義)。如果他是抓 kern/GPOS table 的資訊(這才是字型制作裡頭真正的 kerning table),那麼,這個做法是不錯的(也可以說是正確的),但目前有完整 kern/GPOS table 的字型並不多。

 如果是不管 kerning table, 是由應用程式自行去控制的(從 glyph bounding box 判斷),這個就再說了,因為會因為字型而需要微調。這是以前的做法,因為 Type1 字型本身並不含有 kerning 資訊,他是另附在 *.afm 格式裡頭。

又長見識了,感謝解說~

LGJ
一般所謂的 hinting,這是 ps/type1 字型的術語,在 TTF 並不是這樣用的,在 TTF 做 grid fit,是使用 TTF instructions 的方式,當然,一般就說他是 hinting(*誤*!)。這種 TTF instructions 無法從我所說的方式得知(那個方法適用於 Type1 格式),TTF 可以由 Hints => Edit Instructions 來得知是否含有 TTF instructions。

我印像中以前看過的資訊也都是直接稱 truetype 字型的 hinting 是用 hinting instruction 加強小字的易讀性,可能是現在 truetype 已經很普遍,hinting 的意思隨之演化,不再僅用於 ps/type1 字型了。

另外,原來 fontforge 中 hinting 是翻成「修飾」啊!因為用中文版,看到「修飾」一時會意不過來原來就是指 hinting,現在知道了。中文版雖然比較親和,但有時也會造成代溝啊~☺

LGJ
這是指 hinting 的部份,因為目前為止沒有一個對 CJK glyph 適當的 hinting 演算法,需要依每個字去手動調整(應該沒有人會這樣做,因為字型成本太高了)。一般中文字的部份並沒有 kerning 資訊,但中文字其實也是會有 kerning 的問題,但字實在是太多了,幾乎沒有人會去調整,頂多是調整每個字的左右 bearing 或 glyph 在 em 框裡頭的左右位置。

瞭解了。

重新看了一些資訊,才想到之前測試時竟忘了最重要的一點 - hinting 是為了小字而存在的!所以要測 hinting 對 rendering 是不是真的有幫助,要用小字測比較有意義。下面是在 gedit 測的,字型大小設為 8 (單位可能是 pt?)

fontconfig 沒有開啟 hinting

Andika Basic rendered in gedit with hinting turned off

fontconfig 有開啟 hinting

Andika Basic rendered in gedit with hinting turned on

有開 hinting 果然有差!

我還有測 7pt 的,也 ok,但 6pt 就比較不理想了,即使有開 hinting 也沒用。

edited: 5
ychao
joined: 2007-10-25
posted: 298
promoted: 21
bookmarked: 3
9subject: Promote 1 Bookmark 02008-07-20quote  

感覺上除了最後的gedit截圖外,有沒有開hinting似乎差異不大。想請問一下,你系統中freetype的bytecode interprete編譯時有開啟嗎?如果說autohint沒開的時候,看不出hinting差異的話,那很有可能要不字型沒有hinting資料,就是系統freetype的BCI沒有編入。

上圖分別是16px, 12px, 8px(下右)大小的Andika字型,16/12px各有三組由上而下分別是BCI hinting, no hinting與autohint。(GIMP可以分別開啟) 感覺大字型開hinting似乎頗糟。(FreeType 2.3.4 under FC7)

edited: 1
coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
10subject: Promote 0 Bookmark 02008-07-21quote  
ychao

感覺上除了最後的gedit截圖外,有沒有開hinting似乎差異不大。想請問一下,你系統中freetype的bytecode interprete編譯時有開啟嗎?如果說autohint沒開的時候,看不出hinting差異的話,那很有可能要不字型沒有hinting資料,就是系統freetype的BCI沒有編入。

我用的 freetype 是 Debian 編的版本,應該沒有 bytecode interpreter,看你用 BCI 時的截圖,好像跟我把 autohint 設為 false 時差不多。

本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
11subject: Promote 0 Bookmark 12008-07-22quote  

使用 ft2demos 的 ftview 來觀察可能會比較精準,「干擾」比較少。

 ftview 24 DroidSans.ttf

按 h 是 hinting 切換。
 


edited: 1
ychao
joined: 2007-10-25
posted: 298
promoted: 21
bookmarked: 3
12subject: Promote 0 Bookmark 02008-07-25quote  
coolcd

 

我用的 freetype 是 Debian 編的版本,應該沒有 bytecode interpreter,看你用 BCI 時的截圖,好像跟我把 autohint 設為 false 時差不多。

我覺得差別很大耶!如果有BCI的hinting,垂直線與水平線的邊緣是不會有AA雜色的。 

coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
13subject: Promote 0 Bookmark 02008-07-26quote  

LGJ 建議的 ftview 好用,感謝!

我抓了 14px 16px 把 autohint 關掉的截圖 (應該要抓 12px 的,可是我測試時記錯了,懶得再抓)

 Andika DesRev with autohint turned off

跟上面有 BCI 的比較看看

Andika Basic with BCI

結論是:我覺得多了 BCI 並沒有比較美

可以問一下 ychao fontconfig 的詳細設定嗎?

我覺得你的三種情形像是

autohint false + hinting true

autohint true + hinting false

autohint true + hinting true

edited: 7
caleb
joined: 2007-09-22
posted: 630
promoted: 134
bookmarked: 90
14subject: Promote 0 Bookmark 02008-07-26quote  

好不好看因素很多。

像有些人的面板是 BGR 排列,用 RGB 就會爆醜。

ychao
joined: 2007-10-25
posted: 298
promoted: 21
bookmarked: 3
15subject: Promote 0 Bookmark 02008-07-26quote  
coolcd

我覺得你的三種情形像是

autohint false + hinting true

autohint true + hinting false

autohint true + hinting true

看來我記錯了,Debian的package應該已經是有開起 BCI 了。

 http://avi.alkalay.net/linux/docs/font-howto/Font.html#freetype

上面的截圖是直接用GIMP render text,其中的選項很清楚:當 hinting false 的時候 autohint 是無效的。其他的就是你寫的那樣。ftview的確相當好用。可是奇怪的是,開起LCD RGB rendering時,跟系統出來的不一樣,會有『溢出』藍色的現象:

 

(小弟我很不喜歡這樣子的感覺,理想的hinting應該是在直線的地方都是黑白分明的。這裡只有水平線是ok的。)

而從系統 font selector 看到的卻很正常:

 

對我來說,如果字型內建的hinting不好看,那它就是失敗的,這時候就要考慮用autohint。上面寫了,Andika的hinting真的不好看。如果連autohint都不行的話,那這個字型大概就不會留在我的電腦裡了。 ;)

edited: 1
coolcd
joined: 2008-01-21
posted: 2596
promoted: 347
bookmarked: 94
16subject: Promote 0 Bookmark 02008-07-26quote  

歹勢,我才是搞不清楚狀況,之前只是就常識推斷 Debian 「應該」沒開 Bytecode interpreter,沒想到竟然是有開,不好意思,搞烏龍了。以下是 Debian 的 libfreetype6 的 changelog︰(目前我用的版本是 2.3.7-1)

freetype (2.2.1-2) unstable; urgency=low

   * Enable full bytecode interpreter instead of just the
"non-patented portions".

freetype (2.1.4-3) unstable; urgency=low

   * [ftoption.h] Enabled Graham Asher's unpatented hinting:
#define TT_CONFIG_OPTION_BYTECODE_INTERPRETER
#define TT_CONFIG_OPTION_COMPILE_UNPATENTED_HINTING
Many thanks to Graham Asher and Artifex for their contribution!

freetype (2.1.2-10) unstable; urgency=low

   * Turning back on the bytecode interpreter.  Too tired to care now.
May turn it off again when Xft2 and fontconfig are in Debian.

freetype (2.1.2-8) unstable; urgency=low

   * Turned off the bytecode interpreter.

freetype (2.0.2.20010514-1) unstable; urgency=low

   * [ftoption.h]: #define TT_CONFIG_OPTION_BYTECODE_INTERPRETER
本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
17subject: Promote 0 Bookmark 02008-07-27quote  

hinting 是非常困難一體適用的一件事,因為不可預期的狀況太多,總歸的原因是螢幕解析度實在是太低,什麼高級演算法都是白搭,如果螢幕的解析度(密度)都有 300 dpi,那麼,什麼 bytecodes、auto hinter、AA 都可以丟掉了。

bytecodes 和 auto hinter 在 FT list 上就有兩極化的評價,作者當然是認為 auto hinter 不錯,但一般使用的人還是認為 bytecodes 較佳,尤其像 subglyph 完全是由 bytecodes 來定位的(例如新細明),這個 auto hinter 是沒有辦法的。 

我個人的意見的話,除非螢幕解析度能到至少 200 dpi 以上,不然,小字我還是寧願使用點陣字,因為把時間花在低密度正確佈點,又無法一體適用,下這種「五子棋」是很浪費時間的。 人定勝天應該用在把螢幕解析度提高上去。


ychao
joined: 2007-10-25
posted: 298
promoted: 21
bookmarked: 3
18subject: Promote 0 Bookmark 02008-07-27quote  
LGJ

hinting 是非常困難一體適用的一件事,因為不可預期的狀況太多,總歸的原因是螢幕解析度實在是太低,什麼高級演算法都是白搭,如果螢幕的解析度(密度)都有 300 dpi,那麼,什麼 bytecodes、auto hinter、AA 都可以丟掉了。

是這樣子沒錯,只是說hinting是沒有辦法中的辦法。可以的話,在低解析度下小弟當然也是偏好使用點陣字。只是在目前普遍使用TTF字型的情況下,還是得想辦法讓一些沒有內嵌點陣字的字型,小字看起來也能夠像點陣字一樣黑白分明。像漢字圈中的字型要作到不同大小的glyph,又要好看,真的是很不容易啊!(這絕對要感謝一下firefly跟幫忙維護wqy的網友) 

本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
19subject: Promote 0 Bookmark 02008-07-27quote  
ychao

 

是這樣子沒錯,只是說hinting是沒有辦法中的辦法。可以的話,在低解析度下小弟當然也是偏好使用點陣字。只是在目前普遍使用TTF字型的情況下,還是得想辦法讓一些沒有內嵌點陣字的字型,小字看起來也能夠像點陣字一樣黑白分明。像漢字圈中的字型要作到不同大小的glyph,又要好看,真的是很不容易啊!(這絕對要感謝一下firefly跟幫忙維護wqy的網友) 

以目前的低解析度螢幕,光靠 hinting 是不夠的,得配合 AA,所以如果目前 FreeType2 的 auto hinter + AA,無法滿足需求的話(例如我個人對 AA 就是看了會眼花),目前是無解。 連 FreeType 的作者,在這種情形下都會建議你小字用點陣字。


本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
20subject: Promote 0 Bookmark 02008-07-28quote  

LGJ
coolcd

謝謝,看來 Andika Basic 是沒有 hinting 的,順便附上我現在的設定

 
啊,不是這樣說,我早上因時間關係沒能說清楚。

一般所謂的 hinting,這是 ps/type1 字型的術語,在 TTF 並不是這樣用的,在 TTF 做 grid fit,是使用 TTF instructions 的方式,當然,一般就說他是 hinting(*誤*!)。這種 TTF instructions 無法從我所說的方式得知(那個方法適用於 Type1 格式),TTF 可以由 Hints => Edit Instructions 來得知是否含有 TTF instructions。

本以為 fonttools/TTX 沒有繼續發展了,不過最近發現,作者從去年開始又連續 commit 東西進 cvs。這個工具非常不錯,他可以分解及合成 TTF/OTF 字型。只是他用 python 寫的,所以,處理速度上會有點慢,不過,我們不趕時間。

ttx -s -t glyf  DroidSerif-Regular.ttf

會產生  DroidSerif-Regular._g_l_y_f.ttx,這是他的 glyf table 的 xml 格式,裡頭的 instructions 的部份就是他的 `hinting'(就是長得像組合語言有如天書的那個部份)。所以,這個字型是有 hinting 的,只是做得好不好就再說了。


本人已不在此站活動

joined: 2007-09-19
posted: 4946
promoted: 325
bookmarked: 206
歸隱山林
21subject: Promote 1 Bookmark 02008-07-28quote  

還有一個工具可以觀察 hinting,那就是 mensis,他甚至可以修改 TTF/OTF 的 tables 內容(有些內容在 fontforge 是無法修改的)。

在 glyf table 處 double click,然後在所要觀察的字母上再 double click,第一個視窗的內容就是 TTF instructions。

 


edited: 1

cht電腦資訊字型
adm Find login register
views:43628