Raleway——适合作标题，但不适合用于正文。有一个极细的版本（上图没有展现），在Google Fonts（www.google.com）可以找到。

鼠标悬停或选中时的样式

Ubuntu（上图）——字体偏粗，对于有些 app 来说太张扬了，但是对于大多数 app 来说还是不错的。在Google Fonts（www.google.com）上可以找到。

虚化图片的方法也有局限性，你需要确保在不同屏幕上图片尺寸调整后，文字依然是在虚化的区域上的。

在图片上优雅地呈现文字并不容易，这里给出6种方法。

设计鼠标悬停或选中时的样式也是同样的道理，只不过更难一些。

此外，下面这些要素也能够影响人们的感受：

这就是设计中的平衡。

现场获奖读者与电子工业出版社少儿与数字创意出版分社副社长何郑燕合影

我自己从来没有在任何专业的项目上直接把文字放在图片上，这种方法是可行的，也能做出酷炫的效果，但还是小心点。

上面这张图是 Contents Magazine 的网站，也是学习强调和弱化的一个好案例

加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜色，比如这样：

文字颜色背景色阴影下划线细小的动画——上升、下降等

就我个人经验来说，当我觉得一段文字设计的不好时，通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。

虚化图片是增加文字易读性的好方法，把文字下方的图片虚化了，同时把虚化部分亮度调低。

还有其它一些方法调整文字吸引读者的注意力，但是不常用，也不推荐你使用。

这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。

此外，Medium 还给文集图片上的文字加了些许阴影，进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上，阅读体验非常好。

图片应该比较暗，而且颜色不能有太大的反差。文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。

Open Sans——非常易于辩读，是一款很流行的字体，用在正文非常合适，在Google Fonts（www.google.com）上也能找到。

在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。

我第一次坐下来试着设计按钮、图标、弹窗等各个 app 元素时，我感到我对于什么是“好”知之甚少。但是我也很幸运，我并不需要完全设计全新的 UI，因为有很多优秀的作品可以借鉴。

以下是我推荐的字体：

通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标正悬停在这里。

下划线。下划线现在基本上等同于超链接了，我觉得你还是不要挑战人们的常识比较好。文字背景色。这个有时候也被当作超链接，只不过不是那么常见。删除线。一边待着去吧，你这个怪人。

文章标题是唯一没有用斜体的部分，而且还做了加粗处理，更容易吸引读者的关注。作者姓名写在文章标题下方，字体加粗，与没有加粗的”by“区分开来。“ALREADY OUT”独立出来，字号很小，与背景区分不明显，但是用了大写字母，字间距很大，文字外围空白较多，当你想要找它的时候一眼就能看见。

我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。

如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。

乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约 20% 的黑色覆盖在上面。

   在《摄影的骨头：高品质数码摄影流程》及《通往独立之路：摄影师生存手册》上市之际，电子工业出版社特别邀请作者赵嘉分别在6月15日和16日下午分别在三里屯佳能公司展厅及798映艺术中心举办了两场读者见面。

   在见面会上，赵嘉老师向广大读者讲述了赵嘉及爱摄影工社图书创作历程，，顶级镜头在数码时代的发展，同时分别与业界精英讨论了高品质数码摄影流程的方方面面，包括前期拍摄，重印及色彩管理，后期图片处理的要点分析，还向读者介绍了摄影的分类、编辑类摄影进行探讨，杂志需要图片的标准、图片库摄影及法律的相关内容还有公关摄影现状，图片市场的发展以及画廊展览和摄影类图书出版等等内容进行讨论，两场见面会现场都与读者开展了深入的交流，现场气氛热烈，相信通过两场交流，大家都会对数码摄影流程以及摄影师生存形成有力的指导！

Elastica的博客的题图并不是太暗，而且对比都较强。为什么文字的辨识度还这么高呢，就像下面两张图显示的这样：

第一部分：

网页上的数字字号较大，是网页上的重要信息。但是请注意，数字的字体很细，与背景色对比也不明显；而数字下方的单位虽然写得很小，却全部加粗，用大写字母。

上面这 3 个方面调整好就 OK 了，不要再做其它处理。

直接在图片上放文字时，有几点需要非常注意：

方法3：虚化图片

这里还有其它一些资源：

标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。

1. Dribbble

类似的方法同样适用于小图。

有些字体很不错，就用它们吧。

方法5：把图片部分区域的光线变得更柔和

方法2：给文字加个框

我认为，UI 设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：

如果网页上某个元素需要强调，把强调和弱化结合在一起，可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。

   感谢业界媒体对本次活动的大力支持！

以下是 UI 设计入门你需要掌握的 7 条法则：

有的网站很有个性，会用到比较特别的字体。但是，大多数产品的 UI 设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。

我很犹豫要不要讲这种方法，因为应用起来十分困难。不过直接在图片上放文字从技术上来说也是可行的，下面这个网站的首页就很不错，所以说说也无妨。

上图“Material Design”这个标题就很突出：字号大、反衬明显、字体较粗

这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。

看看下面这个例子，你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。

这可能是在图片优雅呈现文字最细微的一种方法。我还没在别处见过，保存下来，说不定将来什么时候就用到了。