首页 > 网页教程 > 设计分享 > WEB设计:8个字体设计和排版技巧分享

WEB设计:8个字体设计和排版技巧分享

时间:2018-04-19    来源:优设网

在 2018 年的各种设计当中,我们看到了更加大胆的字体排版设计。纤细的字体似乎出现的频率越来越低,而大胆的色彩、锐利的轮廓以及渐变的效果,甚至自定义的细节,都让字体设计越来越多样,精彩绝伦。

如果你仔细观察这些年的字体排版设计的变化,会发现每种设计趋势都在逐渐远离原本的扁平化设计,越来越不那么保守。这些充满创意的字体设计本身并不那么容易实现,设计师应该将这些字体的设计纳入到整个设计策略当中来,而不仅仅是作为一种简单的炫酷的字体设计技术。

接下来,我们仔细看看 2018 年所流行的 8 种设计趋势。

1. 彩色的文本和字体

虽然绝大多数的极简风格的页面会采用黑白色调的文字,但是有色彩的文字更有张力,这是不争的事实。

彩色的字体在绝大多数地方都显得足够醒目,在许多设计项目当中,彩色字体被作为最重要的视觉元素来呈现。

明亮的色彩和多样的色彩是非常吸引人的,这也使得信息的传递更加有效,足以建立富有标志性的标识,并且吸引用户参与到设计当中来。

2. 简约大胆的非衬线字体

想要给人留下深刻的印象,字体并不一定非得那么华丽。

笔触较粗的非衬线字体在这两年比较流行,在各种网站和 APP 当中出现的机率非常之高。

它们之所以会被选取,很大程度上是因为它们足够易读,并且能同背景和其他的文本元素构成良好的对比。

3. 高亮的字体

被高亮显示的字体,是目前所看到的最令人惊讶的趋势之一,这种设计手法可以强调文本,让它成为视觉焦点。

从简单的通过高饱和度色彩高亮文本,到使用下划线的方式来高亮文本,设计师们所采用的方法都不尽相同。

不过不论是怎么设计,都是希望用户能够优先看到重要的文本内容,这种设计适合使用更短的文本块,以便突出显示,又不会造成信息过载。

4. 剪切和叠加效果

通过剪切和叠加实现的设计效果可以创造出足够有趣、令人印象深刻的效果。

无论是叠加还是剪切,基本上都是通过分层来实现的,它让设计看起来不那么扁平化,而在字体上实现这样的效果,会是个不错的的选择。

剪切和叠加效果指的是文本字体当中不填充色彩,而是在背景上叠加一层,剪切出文本部分,透过剪切部分可以看到底层背景的图片。就像上图的案例当中,透过文字可以看到底层的动态图片。

这种设计通常需要使用较粗的大写字母,并且控制文本内容的量。只有这样能够确保前景剪切的文本内容清楚的传递给访客,也能让底层的图形内容呈现出来。

底层的内容无论是图片、纹理还是视频,都可以不错地呈现给用户,而且因为文本的尺寸,总体的信息量不会太大,也不会过载。

相关推荐
二十款网页图文混排设计样式欣赏
如何掌握网页广告字体设计的技巧
网站的旗帜(Banner)广告条字体设计简析
移动终端全新界面设计语言“Metro”简析
85个优秀的超大字体网页设计欣赏
30款超棒的Photoshop文字特效制作图文教程
30个超炫的Photoshop字体创意设计教程
24个很漂亮用CSS3实现的文本效果演示及教程推荐
10个基于HTML5技术的字体设计应用演示网站
20款漂亮的欧美风格免费创意卷曲字体欣赏(附下载)
网站设计中BANNER(广告条)中的字体结构分析
无线移动终端APP的文字阅读体验设计分享
20个视觉效果令人惊叹Photoshop文字特效教程
网页排版设计如何才能让页面文字阅读更舒适?
15个运用创意印刷字体的网站欣赏
38个创意出彩的网页字体设计案例赏析
再也不怕选字体了!超全面的英文字体小结
字体设计教程:字体还能这么玩 聊聊文字的“性取向”
界面设计必备:全方位科普常用的字体规范
PS字体教程:教你打造闪闪发光的钻石字效
网站策划:Web的英文字体该如何选择?
网站字体设计教程:29个纤细字体的网站排版设计案例推荐
PS字体教程:创建一个极具个性化的人物文字特效
网页设计教程:用合适字号提升用户体验
UI设计字体与排版指南
16个简单实用的英文字体排版小TIPS分享
UI设计:字体配色设计总结
零基础设计字体:教你巧用字库做出你的第一款字体设计!
30个幽默有趣的404错误页面创意设计欣赏
分享:网页核心内容对视觉表现的影响
网页设计的背景创意风格与设计趋势分享
20+艺术视觉和网页完美统一的网页创意案例欣赏
21个带斜线排版设计的网站设计创意欣赏
55个极具创意的手绘网页设计案例欣赏
从优秀案例分析网页Banner视觉构成与创意设计

精彩推荐

热门教程