字體如何提升網站流量和業績?

視覺「一致性」是品牌行銷的基本要求。 有研究表明,品牌形象實現高度一致性後,企業營收提升可高達 33%。 當企業投入大量資源塑造專業、出眾、一致的品牌形象,「網頁字體」就很容易成為漏網之魚。 本文,我們將詳解網頁字體如何幫助品牌全面達成一致性,進而提升行銷成效與業績表現。

為什麼有的企業網站看起來缺乏「精緻感、專業感」?

相較於社群媒體,網站似乎顯得有些「傳統」。 但一個基本的事實是,網站仍然是企業和品牌重要的一扇「門面」,依舊是承接搜尋流量和獲取客源的主陣地;網站也讓企業在內容形式上更靈活多樣。 這也是為什麼許多品牌仍然對網站視覺、內容和使用者體驗投入大量資源。

但我們常常留意到這樣的現象:雖然企業規定了品牌用字,但其印刷品和網站選用的字體仍然沒有統一。 究其原因,原來這些品牌的官網文字仍以預設字體展示。 使用不同作業系統的使用者也可能看到不同的字體。 顯然,這不是企業期望的結果。

此外,你還會發現一些網頁缺乏精緻感,但又說不出哪裡不對。 問題同樣可能源自於字體:由於螢幕大小差異,網頁圖片在你的裝置上被拉伸放大,此時,你隱隱約約察覺到圖片裡字體邊緣發虛,甚至有鋸齒。 原因是:圖片裡的文字成為圖片的一部分,已經隨圖片被柵格化(又稱光柵化)。

文字以純文字形式顯示,放大後文字邊緣依然清晰銳利
文字以圖片形式顯示,放大後文字產生鋸齒

使用網頁字體後,網頁內所有文字可以像你在 Word 或 Illustrator 軟體裡一樣,放大數倍後,邊緣仍然清晰銳利,網頁的精緻感也就立刻展浮現。

甚麼是網頁字體?

我們不妨回顧網頁字體技術產生之前,網站的技術人員如何控制網頁上展示的字體。

當時,技術人員會在網站程式碼裡羅列一組字體,例如Helvetica,Arial,Verdana,Tahoma 等等,以這種方式「告訴」使用者的網頁瀏覽器:請優先使用 Helvetica 字體來顯示網頁上的所有字體。 如果使用者的電腦上沒有安裝 Helvetica,那就用 Arial。 要是 Arial 也沒有,那就用 Verdana。 直到「找到」使用者電腦上已經安裝的字型。 要是使用者電腦上沒有任何一款例舉的字體,為了確保字體以襯線或無襯線字體顯示,技術人員也可以註明是 Serif 或 San Serif。

 

網站開發人員透過 font-family 屬性設定字體展示

透過此方法,技術人員可以控制網頁文字在使用者瀏覽器上的顯示字體,至少可以大機率確保是襯線還是無襯線。

但這種方式的缺點也顯而易見:企業可以呈現給使用者的字體會非常受限;就算企業有品牌字體,也無法在網頁上呈現。

於是,網頁字體技術成為了解決方案。 開發人員只需要在網頁裡加入一小段程式碼,或是將字體檔案置於自有網站,就可以確保網頁文字使用品牌字體顯示。

網頁字體如何幫助企業提升業績表現?

目前的網站製作流程,使用網頁字體(而非系統預設字體)成為一種主流,尤其英文網頁。 回顧我們的文章《企業品牌的字體:每位設計師都需要知道的 4 大觀察 》,我們發現,知名企業都在品牌網站使用了專有的字體,搭配品牌調性,增強個性表達。 使用網頁字體帶來的優勢也顯而易見:

一、統一所有銷售渠道的品牌視覺。

利用網頁字體技術,我們可以在網頁上呈現任何字體(從而避免預設字體),即使使用者的裝置上未安裝此款字體。 如此一來,企業可以統一線上線下各通路的字體使用。 如果企業需要在此後更新品牌字體,也可以透過簡單的技術操作批量更換。

豐田定製字體 Toyota Type 被用於所有線上和線下渠道和媒介,甚至覆蓋所有汽車品牌。

二、更有利於搜尋排名。

利用網頁字體技術,設計師可以讓文字獨立可選,並以品牌字體展示。 由於搜尋引擎只抓取純文字的訊息,這種「圖文分離」的操作也讓網頁更有利於搜尋結果優化。

Eufy 網站首頁輪播大圖中的文字使用網頁字體。 可以發現,輪播圖中的文字可以單獨選取。

三、讓電子郵件、數位廣告更有個性。

不管社群媒體如何風生水起,電子郵件仍然是有效的使用者觸達方式。 利用網頁字體,電子郵件的文字內容同樣可以以品牌字體展示。 而對於個人化要求極高的數位廣告,網頁字體技術可以讓不斷更新變化的文字內容使用品牌字體。

四、讓文字編排自適應不同設備。

為了確保使用品牌字體,設計師有時會選擇把字「做進」圖裡,但這種操作很容易讓文字在行動端看起來變得極小,不利於閱讀。 但如果字體可以以品牌字體展示,又能作為獨立可選的部分存在,那就可以實現更靈活的圖文自動編排。 仍以 Eufy 網站為例,PC 橫幅中的文字和商品左右排列,但在手機端,自動切換成了上下排列。

如何透過 Monotype Fonts 取得大量網頁字體?

您可以透過 Monotype Fonts 取得網頁字體 CSS 程式碼,透過簡單引用,輕鬆嵌入對應的網站。

你也可以透過「Download Kit」下載網頁字型包,支援 WOFF/WOFF2 等常見的網頁字型格式,將字型包置於公司自有的伺服器。

值得一提的是,中日韓使用網頁字體還不算普遍。 原因是,網頁字體的實現方式本質上是「把字體下載到使用者的裝置上」。 通常,西文字體包檔案體積小,多數不到 1MB。 但如果是中日韓字體包,就算單款字重,字體包也可以超過 5MB,很可能導致用戶打開網頁時需要等待才能看到正確的字體。 從企業來看,字型包下載佔據的流量也提升了網站的營運成本。

Monotype Fonts 提供的字體嵌入程式碼

透過 Monotype Fonts,有兩種方式讓這一問題迎刃而解。

方案一:利用「啟發式子集」(heuristic subsetting)。 

雖然這個術語讓人感覺陌生,但我們仍然可以用非技術的語言來解釋:你可以透過Monotype Fonts 挑選字體包中你需要用到的字符(而非完整字體包),以此來大幅縮小瀏覽網頁 時加載的字體包。

方案二:字型包切分技術(font-slicing)。 

原始的字體包被切分成若干份「小包」(可以多達上百份)。 網頁訪客開啟網頁時,頁面程式碼透過指令查詢所需字體「小包」,減少載入時間。

蒙納繁體官網使用字體包切分技術,蒙納盈黑原生字體包被切分成若干份,實現字體高速加載。

結語

網頁字體技術已經日趨完善。 現在,我們已經可以在網頁端更精準地控製文字的呈現和編排,甚至可以像使用 InDesign 這樣專業的排版工具一樣,實現諸如「標點擠壓」「避頭尾」等高階操作。

當你覺得「中文網站似乎比英文版少了點花樣」,或者是「公司的英文網站好像沒那麼『時尚』」,此時,也許換一款字體「感覺就來了」。 網頁字體的應用不僅讓設計師們盡情發揮創意,其技術優勢更是讓品牌和行銷人員真正獲益!