響應(yīng)式網(wǎng)站的一個(gè)特點(diǎn)是：一張圖片通常會(huì)配上幾個(gè)字或者一句話。在設(shè)計(jì)的時(shí)候，就有一個(gè)問題需要處理——
字體與圖片的位置關(guān)系，設(shè)計(jì)師是如何處理的呢？
 

根據(jù)我們的觀察，不同的設(shè)計(jì)師對(duì)字體和圖片位置關(guān)系的處理辦法是不一樣，不過，如下幾個(gè)辦法是通用的。

字體大小處理
通常來(lái)說，很多圖片都是有主體物體的，就是圖片中呈現(xiàn)的主要物體，在這種情況下，使用的字體不應(yīng)該大于主體物。如果有的圖片沒有主體物，使用的字體大小也應(yīng)該考慮到用戶的辨認(rèn)，不宜過大或者過小，不少設(shè)計(jì)師常用14px或12px的字體。

字體所處位置處理
大多數(shù)的圖片都是有視覺焦點(diǎn)的，通常來(lái)說，字體應(yīng)該處于圖片的視覺焦點(diǎn)橫豎軸線上，如果，字體較少，可以直接放在視覺焦點(diǎn)上。例如，蘋果官網(wǎng)上，幾乎所有的字體都位于產(chǎn)品圖視覺焦點(diǎn)的數(shù)軸線上方。也有的圖片沒有明顯的視覺焦點(diǎn)，對(duì)于這類圖片，文字可以直接放置在圖片中央為宜。

字體與圖片邊緣的距離
如果圖片中有主體物，字體與圖片邊緣的距離，應(yīng)該與主體物邊緣的距離相等或者差不多。這樣設(shè)計(jì)的好處是，在視覺上，將字體與圖片的主體物處于并列的狀態(tài)，一文一圖，整個(gè)畫面看起來(lái)較為協(xié)調(diào)。

字體與圖片線條的關(guān)系
如果圖片中有明細(xì)物體線條，例如，圖片中有河水的流向等等，也就是說，圖片中主體物是有明確的線條的，對(duì)于這類圖片，設(shè)計(jì)師可以采取兩種辦法。一種辦法是字體的排版可以與線條平行。還有的設(shè)計(jì)師可能會(huì)采用另一種辦法，讓字體的排版與主體物線條靠近。這兩種辦法設(shè)計(jì)出來(lái)的作品，都不會(huì)有突兀之感。

字體面與主體物面有交叉
如果字體較多，會(huì)形成一個(gè)字體面，而如果圖片中有主體物，也會(huì)形成一個(gè)主題面，兩個(gè)面之間，最好能夠形成面與面之間的交叉。這樣的視覺呈現(xiàn)，不會(huì)讓字體或者主體物顯得孤立，兩者之間會(huì)給人有聯(lián)系的感覺。
在元素較為簡(jiǎn)單的圖片中，單純使用漢字，會(huì)更加凸顯出畫面的單調(diào)。設(shè)計(jì)師會(huì)采取這樣一種處理辦法，就是增加數(shù)字、英文字體的使用，將數(shù)字、英文、漢字搭配起來(lái)，讓整個(gè)單調(diào)的畫面豐滿和豐富。在一些慶典或者周年慶的網(wǎng)頁(yè)設(shè)計(jì)中，數(shù)字往往被突出顯示，配以文字說明，畫面沖擊感十足。

書法字體與網(wǎng)站風(fēng)格
漢字的變化范圍遠(yuǎn)遠(yuǎn)超過英文，這也使得漢字字體是可以與網(wǎng)站的風(fēng)格進(jìn)行搭配的。例如，一個(gè)做古典家具的英文網(wǎng)站，英文字體在怎么變化，可能也無(wú)法傳達(dá)出古典、傳統(tǒng)的概念和意境，但是如果使用書法字體，古典的已經(jīng)躍然紙上。
不難看出，網(wǎng)站中單單是一個(gè)字體的設(shè)計(jì)，學(xué)問就非常之深、非常之大，這也足以看出，網(wǎng)站設(shè)計(jì)是一個(gè)“做到老、學(xué)到老”的職業(yè)，任何一個(gè)網(wǎng)站設(shè)計(jì)師，概莫能外。

以上說的只是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常小的細(xì)節(jié)問題，但是卻也是非常重要的部分，也是一個(gè)優(yōu)秀設(shè)計(jì)師必備技能之一。