講者：文鼎科技 楊淑慧董事長暨設計總監 簡介： 1.響應式網頁設計已成為網頁設計之主流，物聯網應用也從2015開始高速的成長，而具有環境感知能力的系統將能依使用者需求做出回應，本發表議將探討此趨勢下，的字型設計如何因應。 2.先介紹目前市面上已經出現的具有響應式設計概念的字型，包含拉丁與中文字型。 3.進一步探討如何利用類似 Multiple Master的字型設計，在行動裝置、物聯網裝置、以及網頁上，依不同的顯示環境(例如環境光線、解析度、文字大小)，提供響應式字型變化(包含筆畫粗細、字型寬度、筆畫特徵)，呈現更加舒適的介面，獲得更好的使用者體驗。

1. 以人為本：
響應式字型設計與應用
2016 XSION
■ 文鼎科技
◎ 演講者 : 楊淑慧 . October 14 , 2016
文鼎科技 © Arphic Technology Co., Ltd.

2. 文鼎科技 © Arphic Technology co., LTD All Rights Reserved.
本活動所提供之講義內容或其他文件資料，均受著作權法之保護，非經文鼎科技團隊或其他相關權利人
之事前書面同意，任何人不得以任何形式為重製、轉載、傳輸或其他任何商業用途之行為。
本講義內容所引用之各公司名稱、商標與產品示意照片之所有權皆屬各公司所有。本講義全部或部分內
容為文鼎科技團隊整理及分析所得，由於產業變動快速，並不保證本活動所使用之研究方法及研究成果
於未來或其他狀況下仍具備正確性與完整性，請台端於引用時，務必注意發 日期、立論之假設及當時佈
環境。
智慧財產權 引用聲明暨

3. Contents 大綱
1. 關於文鼎
2. 中文印刷字型的發展
3. 環境與人的智慧因應時代–文鼎響應式字型發展
4. 國際發展趨勢
5. 創新了，之後 ?

4. 1
關於文鼎

5. 1-1 文鼎簡介
10 第一個十年 DTP 與 PostScript
印刷排版字型設計與開發
199
0
|
199
9

6. 1-1 文鼎簡介
20 嵌入式系統
屏幕顯示字型設計與開發
200
0
|
200
9
 第二個十年
10 第一個十年 DTP 與 PostScript
印刷排版字型設計與開發
199
0
|
199
9

7. 30
20
1-1 文鼎簡介
嵌入式系統
屏幕顯示字型設計與開發
設計、創新、服務
結合的全球字型設計整合服務
200
0
|
200
9
201
0
|
迄今
 第二個十年
 第三個十年
10 第一個十年 DTP 與 PostScript
印刷排版字型設計與開發
199
0
|
199
9

8. 2
中文印刷字型的發展
1. 淵源及對文化的影響
2. 數位印刷字型的發展
3. 字型設計與閱讀

9. 中文印刷字型的發展
2-1. 淵源及對文化的影響

10. 2-1 源於中國書法
▲資料出處 : 故宮出版，趣味的甲骨金
文

11. 2-1 印刷字體衍生於明末
 南宋孝宗間， 1162~1189 年《諸儒鳴道》歐體

12. 2-1 印刷字體衍生於明末
 明嘉靖 14 年， 1535 年《詩外傳》

13. 2-1 印刷字體衍生於明末
 明萬曆 17 年， 1589 年《齊
書》

14. 2-1 明體 / 宋體成熟於清朝
 清康熙 52 年內府銅活字， 1713 年《御定星曆考原》

15. 2-1 明體 / 宋體成熟於清朝
 清咸豐 8 年， 1858 年美國印工姜別利來華 - 用電鍍法造華文，稱『美華字』

16. 2-1 豐富的字體款式
 現在

17. 中文印刷字型的發展
2-2. 數位印刷字型的發展

18. 2-2 設計 / 印刷 / 辦公室應用
 卡版硬體字型：在 DOS 時代 上排版桌

19. 2-2 設計 / 印刷 / 辦公室應用
 TTF / Postscript / OpenType 字型

20. 2-2 螢幕顯示字型
 點陣字

21. 2-2 螢幕顯示字型
 Scalable Font

22. 中文印刷字型的發展
2-3. 字型設計與閱讀

23. 2-3 字型設計與閱讀
移動裝置蓬勃發展
螢幕高解析度化

24. 2-3 字型設計與閱讀
電子閱讀逐漸取代紙本閱讀
移動裝置蓬勃發展
螢幕高解析度化

25. 2-3 字型設計與閱讀
電子閱讀逐漸取代紙本閱讀
黑體 (Sans Serif Font) 佔據全球眼球
移動裝置蓬勃發展
螢幕高解析度化

26. 2-3 人類閱讀字體大翻轉

27. 2-3 各家推出黑體大家族

28. ▲ 方正字庫 – 悠黑家族 ▲ 漢儀字庫 – 旗黑家族
2-3 各家推出黑體大家族

29. ▲ Google & Adobe 思源黑體
▲ Apple 蘋方
2-3 各家推出黑體大家族

30. 1. 遠距離高可辨性之標示造型
2. 保持水平及垂直的直橫筆，
幾何造型適合螢幕顯示
3. 較粗橫筆可適於 :
高度變動的螢幕解析度
2-3 黑體設計特性

31.  隨著硬體發展閱讀字體的改變
2-3 閱讀字體的改變
▲ 文鼎 UD 晶熙黑體

32.  隨著硬體發展閱讀字體的改變
2-3 閱讀字體的改變
V.S.
▲ 文鼎明體▲ 文鼎 UD 晶熙黑體

33.  氛圍閱讀
2-3 閱讀字體的改變
▲ 文鼎 UD 晶熙黑體 _B

34.  氛圍閱讀
2-3 閱讀字體的改變
▲ 文鼎 UD 晶熙黑體 _B ▲ 文鼎 DC 陳森田 MORITA_B
V.S.

35.  引導式閱讀
2-3 閱讀字體的改變

36.  引導式閱讀
2-3 閱讀字體的改變
V.S.

37. 3
環境與人的智慧因應 ──
文鼎響應式字型發展
1. 設計起源
2. 重要發展趨勢
3. 文鼎響應式字型設計及應用 ( Infinity Font®
)

38. 環境與人的智慧因應 ─
3-1. 設計起源

39. 移動裝置爆炸性成長

40. 3-1 響應式字體設計起源
 使用者體驗累積、趨勢掌握
 技術導向轉型為設計導向
 導入內差方式開發字體家族
 以 26 年字型資料庫進行設計加值

41. 環境與人的智慧因應 ─
3-2. 重要發展趨勢

42. 3-2 重要發展趨勢
 不斷高解析度化的螢幕環境
 以人為本的閱讀環境 5 吋 / 150PPI
5 吋 / 500PPI

43.  不斷高解析度化的螢幕環境
 以人為本的閱讀環境
3-2 重要發展趨勢

44. 環境與人的智慧因應 ─
3-3. 文鼎響應式字型設計及應用
3-3 ( Infinity Font®
)

45. 3-3 起始於響應式網頁設計
( Responsive Web Design )

46. 3-3 字型需求趨勢 : 高解析度化
4K
3860×2160
HTC Wildfire
QVGA 320×240
125 PPI
Apple iPhone 5
1136×640
325 PPI
Nokia N900
WVGA 800×480
266 PPI
Apple iPhone 7 Plus
1920×1080
400 PPI

47. 3-3 字型需求趨勢 : 長文閱讀化

48. 3-3 字型需求趨勢 : 字型 Global
化
■ After : 文鼎 UD 晶熙黑體 Global Font■ Before : 字型不統一

49. 3-3 字型需求趨勢 : 多字重化
▼ 文鼎 UD 晶熙黑體

50. 3-3 環境變數因應的需求
▲ 資料出處 https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
UI 設計指引 Device 產品名稱 Screen PPI
Windows
UWP (universal
Windows Platform)
Notebook Microsoft Surface 148
Notebook Microsoft Surface Pro 3 216
Notebook Microsoft Surface Pro 4 267
Android Material Design
Notebook Google Chromebook Pixel 239
Tablet Google Nexus 10 300
Phone Google Pixel 441
Phone Google Pixel XL 534
Apple Human Interface
Notebook Apple MacBook Pro Retina 227
Tablet Apple iPad Pro 264
Phone Apple iPhone 7 Plus 401

51. ▲ 參考出處： http://www.ui.cn/detail/72212.html
3-3 環境變數因應的需求 : 閱讀距離

52. 3-3 環境變數因應的需求

53. 3-3 環境變數因應的需求

54. 3-3 設計發展史
推出晶熙黑體–中粗黑
以內差方式造字技術開發晶熙黑家族
推出晶熙黑日文字體家族–
榮獲日本 Good Design Award Best 100 獎項
推出晶熙黑–繁體中文字體家族
推出晶熙黑–簡體中文字體家族
投入開發文鼎 Infinity font 響應式字型產品
推出晶熙黑 Global font 70 種語文 / 共 361,389 字
投入開發 書苑宋 / 方新書
2010 年
2011 年
2014 年
2015 年
2013 年
迄今

55. 3-3 圖形化技術結構呈現
 Infinity Font ®
架構圖

56. 3-3 圖形化技術結構呈現
 資料量需依照字型字體修改

57. 3-3 圖形化技術結構呈現
 文鼎 UD 晶熙黑體 : 一維

58. 3-3 圖形化技術結構呈現
 文鼎 UD 晶熙黑體 : 二維

59. 3-3 圖形化技術結構呈現
 文鼎方新書 : 一維

60. 3-3 圖形化技術結構呈現
 文鼎書苑宋 : 一維

61. 3-3 圖形化技術結構呈現
 文鼎書苑宋 : 二維

62. 3-3 圖形化技術結構呈現
 文鼎書苑宋 : 三維

63. 3-3 應用示意 : 汽車導航
■ 導入畫面■ 現有畫面擷取

64. 3-3 應用示意 : 汽車導航
■ Condensed 應用■ 依背景色自動調整字重

65. ■ Text 字型 ( 內文用字 )■ UI 字型 ( 標題用字 )
3-3 應用示意 : 字距 / 字面自動因
應

66. 4
國際發展趨勢
1. 移動裝置系統字型發展趨勢
2. OpenType 1.8 技術 ( Variable Fonts )

67. 國際發展趨勢 ─
4-1. 移動裝置系統字型發展趨勢

68. 4-1 2013 年至今 : 移動裝置系統字型發展趨勢
 2013 年 Microsoft Sitka Latin
 2014 年 Google Material design
 2015 年 Apple Dynamic Type

69. 4-1 移動裝置 : Microsoft
 2013 年 Microsoft Sitka Latin
▲ 資料出處： https://blogs.msdn.microsoft.com/ie/2014/03/04/introducing-reading-view-in-ie-11/

70. 4-1 移動裝置 : Android 系統手機
 2014 年 Google Material design 的字型配置
▼ Noto Sans

71. 4-1 移動裝置 : Android 系統手機
 2014 年 Google Material design
▲ 資料出處 : https://materialesign.storage.googleapis.com/publish/material_v_9/0B0J8hsRkk91LNGdYTEF0VnVPT0k/RobotoSpecimenBooklet.pdf
https://material.google.com/style/typography.html#typography-styles

72. 4-1 移動裝置 : Apple 系統
 2015 年 Apple Dynamic Type : SF Compact

73. 4-1 移動裝置 : Apple 系統
 2015 年 Apple Dynamic Type : 蘋方字體針對中文，並無如 SF Compact 設計

74. 4-1 移動裝置 : iOS 手機
 2015 年 iOS Human Interface
■ 資料出處 : https://developer.apple.
com/ios/human-interface-guidelines
/visual-design/typography/
iOS 設定文字大小 : 由小至大
字
型
配
置
由
大
至
小

75. 4-1 移動裝置 : iOS 手機
 2015 年 iOS Human Interface
▲ 資料出處 : https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

76. 國際發展趨勢 ─
4-2. OpenType 1.8 技術
( Variable Fonts )

77. 4-2 2016 ATypI Warsaw 聯合發表 OpenType 1.8
 Adobe 、 Apple 、 Google 、 Microsoft ( 依字母排順 )
▲ 資料出處 : https://www.typenetwork.com/news/article/atypi-warsaw-2016-day-2-the-return-of-the-multiple-
master
https://www.facebook.com/atypi/?fref=ts

78.  規格 : 一維
4-2 2016 ATypI Warsaw 聯合發表 OpenType 1.8

79.  規格 : 二維
4-2 2016 ATypI Warsaw 聯合發表 OpenType 1.8

80.  規格 : 三維
4-2 2016 ATypI Warsaw 聯合發表 OpenType 1.8

81.  發表相關連結
 視頻 : https://www.youtube.com/watch?v=6kizDePhcFU
 其他 1 : https://www.microsoft.com/en- us/Typography/FontVariationsAnnouncement.aspx
 其他 2 : https://www.microsoft.com/typography/otspec/otvaroverview.htm
 其他 3 : http://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind-of-font-for-flexible-design/
 其他 4 : https://opensource.googleblog.com/2016/09/introducing-opentype-font-variations.html?m=1
 其他 5 : https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-
12ba6cd2369#.goyn354g8
4-2 2016 ATypI 聯合發表 OpenType 1.8

82. 4-2 OpenType Variable Fonts 應用
 響應式字型之應用 :
 RWD 網頁使用 Web Font
 閱讀移動裝置的響應式字型
 介紹影片 : 響應式字型設計及應用
▲ 影片連結 : https://youtu.be/AhW8h5fu4rc

83. 4-2 Infinity Font 與 OpenType Variable Fonts 整合

84. 5
創新了，之後 ?
1. 產業障礙
2. 價幾何？
3. 進入國際市場風險與成本
4. 匯率風險

85. 5 創新了，之後 ?
5-1 產業障礙
 應用生態鏈接障礙
 非常態決策
 獨家技術障礙
5-2 價幾何？
 台灣設計 / 軟體產業價 東亞諸國最低值
 Value Added ( 價 加成值 ) vs. Cost Down ( 降低成本 )

86. 5 創新了，之後 ?
5-3 進入國際市場風險與成本
 當地認同與競爭
 代理成本 (30~40%)
 非開發性質所得稅預扣
 無租稅協定下 20~30%
 台灣目前簽約為 30 個國家，含明年 1/1 生效的日本、加拿大
 中國及日本，都有近百個簽約國
5-4 匯率風險

87. Thanks for
Listening !
◎ 文鼎官網 : http://www.arphic.com.tw/
◎ 簡報使用字型 : 文鼎 UD 晶熙黑體 Medium / Demibold / Bold / Extrabold / Heavy
文鼎科技 © Arphic Technology Co., Ltd.