响应式网站的一个特点是一张图片通常伴随着几个单词或一句话。设计时，有一个问题需要处理——
设计师如何处理字体与图片的位置关系？
根据我们的观察，不同的设计师对于字体与图片的关系处理方式是不同的。然而，以下方法是通用的。
字体大小处理
一般来说，很多图片都有一个主要物体，也就是图片中呈现的主要物体。在这种情况下，使用的字体不应大于主要对象。如果有些图片没有主体，所使用的字体大小也要考虑到用户的识别性，不宜太大或太小。许多设计师通常使用14px或12px字体。
字体位置处理
大多数图片都有视觉焦点。一般来说，字体应该放置在图片视觉焦点的横轴和纵轴上。如果字体较小，可以直接放在视觉焦点上。例如，在苹果官网上，几乎所有字体都位于产品图片视觉焦点的数字轴上方。也有一些图片没有明显的视觉焦点。对于这样的图片，最好将文字直接放在图片的中心。
字体与图像边缘之间的距离
如果图片中有主体，则字体到图片边缘的距离应等于或大约等于主体边缘的距离。这样设计的好处是，视觉上，字体与画面主体并置，一文一图，整个画面看起来更加协调。
字体与画面线条的关系
如果画面中的物体有细致的线条，例如画面中有河流的流动等，也就是说画面中的主要物体有清晰的线条。对于这种类型的图片，设计者可以采取两种方法。一种方法是将字体与线条平行排列。有些设计者可能会采用另一种方法，使字体的排版更接近主体对象的线条。这两种方法设计出来的作品不会感觉突兀。
字体平面与主对象平面相交
如果字体很多，就会形成一个字体面，如果图片中有一个主题，也会形成一个主题面。最好在两个表面之间形成相交。这种视觉呈现不会让字体或者主要物体显得孤立，反而会给人一种两者之间有联系的感觉。
在元素比较简单的图片中，单纯使用汉字会凸显画面的单调感。设计师会采用这样的做法，就是增加数字和英文字体的使用，将数字、英文、汉字进行搭配，让整个单调的画面变得丰满、丰富。在一些庆祝活动或纪念日的网页设计中，常常会突出显示数字并配以文字描述，使图像充满冲击力。
书法字体和网站风格
汉字的变异范围远远超过英文，这也使得汉字字体能够与网站的风格相匹配。例如，对于一个销售古典家具的英文网站，无论英文字体如何变化，都可能无法传达经典和传统的概念和意境。但是，如果使用书法字体，经典就会出现在页面上。
不难看出，单单是一个网站的字体设计就非常博大精深。这足以说明网站设计是一门“边干边学”的职业。任何网站设计师，也不例外。
上面提到的只是网页设计中一个很小的细节，但它也是一个非常重要的部分，也是一个优秀设计师必备的技能之一。
