首頁 部落格 快速換算字級的 網頁設計工具
Katie
Jul 22, 2010
iWare的視覺設計,喜歡用視覺發言、講故事,堅信「設計無論好壞要有自己的味道」。 喜好小說、電影、音樂...一切能提供幻想元素的事物;同時也是一位膽大心細的犬展指導手。

快速換算字級的 網頁設計工具

 

字級計算原理很簡單

字型大小是區分文字的大小的一種衡量標準,而使用於網頁和平面設計的使用設定上有許多的不同之處,傳統印刷業界一般用於平面設計的字型大小設定大部分是 級數(J或K)而網頁設計的使用上 在國內則大多是採用pt ,國外則是em為主。
而一般DM的內文約是使用14級字 名片上最小不建議低於9級字,若使用於網頁上則是一般性的內文大多採用12pt來作顯示


先以平面設計來說

字型大小是區分文字的大小的一種衡量標準,國際上通用的是點制,在國內則是以號制為主,點制為輔。號制是採用互不成倍數的幾種活字為標準的,根據加倍或減半的換算關係而自成系統,可以分為四號字系統、五號字系統、六號字系統等。字型大小的標稱數越小,字形越大,如四號字比五號字要大,五號字又要比六號字大等。

點制又稱為磅制(P),是通過計算字的外形的“點”值為衡量標準。根據印刷行業標準的規定,字型大小的每一個點值的大小等於0.35mm,誤差不得超過0.005mm,如五號字換成點制就是等於10.5點,也就是3.675mm。外文字全部都以點來計算,每點的大小約等於1/72英寸,即等於 0.35146mm。

字型大小的大小除了號制和點制外,在傳統照排文字時的大小。則以mm為計算單位,稱為“級(J或K)”。每一級等於 0.25mm,1mm等於4級。

照排文字能排出的大小一般由7級到62級,也有從7級到100級的。在電腦照排系統中,有點制也有號制存在。在印刷排版時,如遇到以號數為標注的字元時,必須將號數的數值換算成級數,才能夠掌握字元的正確大小。號數與級數的換算關係是:
1J = 1K =0.25mm = 0.714點(P)


再以網頁設計來談

在網頁設計裡,長久以來 一直有一個很多人討論的議題就是網頁字級的設定,到底應該使用px、em、pt 還是百分比呢才是正確?
而大部分的網頁設計師都應該很清楚,一般瀏覽器的預設字級為16px=1em=12pt=100%。

英文網頁的字體較常用到em單位,em是相對長度單位
因為ie瀏覽器的支援關係,若設定為em則可使字體隨IE瀏覽器的調整而變化(註1)

em、px、pt的轉換對於網頁設計師來說,如果沒有工具的換算幫忙,要靠自己的腦袋來換算的話,通常是一件非常折磨人且不經濟的事情阿,所以以下列出常用轉換與新發現的好用網站可以讓你輕鬆的互相換算

常用轉換如下:
9pt=12px
9pt=0.75em
10pt=0.833em
14px=0.875em

在同時追求工作效率與最小失真的設計目標前提下,快速而精確的換算,經常是很難避免的設計實作需求,pxtoem快速換算字級的網頁設計工具,讓網頁設計師能夠省去許多時間與換算的麻煩了。

註1:一般在IE6.0字體設定為中的時候,如果字體未做任何CSS設定或者<font size>元素的設定,則預設的字體是12pt,或者16px,或者1em,或者font size=3。


圖片來源:PIXABAY 作者 falconp4 轉載請註明出處或鏈接

超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
Free Resource
Free Resource
Apr 08, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019
淺談無障礙網頁設計2.0
淺談無障礙網頁設計2.0
Ryan
Ryan
Jan 11, 2019