尽管设计师大都不会亲自撰写网站的实际内容,不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你的字体易读易用,不过我不会给大家列一些该做什么或者不能做什么的规矩和条款,我带给大家的是一些聪明运用字体的实例和分析。

仔细考虑了字体的实例

The Netsetter上大而漂亮的字体

网页设计中,标题很重要,对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处,不仅能提高特定内容区块的可用性,而且有助于组织设计中的空间和结构。 Netsetter 在这方面做得非常好,如您所见,标题字体很大,周围有大量留白,十分易读。

行间空白和字符间距

Viget 的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集展示页,再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体,他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高 (line height) [行间空白]的的绝妙选择。行间距被设定得比默认值大很多,大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。

Web Design Ledger, 配合情绪的字体

要找到完美的字体需要不断的尝试和失败,或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子,Web Design Ledger, 在给人以复古和做旧感的同时,也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体:Georgia,为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的Helvetica字体,一种无衬线的、滑溜的、开放的字体。

网页设计中字体选用的快速决断

看了上面这么多好例子,将来你选用起字体来应该会更加得心应手。不过,为什么他们给人的感觉这么好?下一次在你自己的设计中,你又该如何运用?

是否可读?

不要怕尝试粗大的字体

你可否考虑过间距?

间距对于可读性有很大决定作用

你的字体带给人什么情绪?

确保字体选择适合你的设计风格

这方面还有大量值得关注的地方,不过我不是这方面的专家,我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。

以上就是高品质的网页设计: 实例与技巧之三(文字排列与字体选用的诀窍)的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

php网页设置字体排列,高品质的网页设计: 实例与技巧之三(文字排列与字体选用的诀窍)...相关推荐

  1. 高品质的网页设计: 实例与技巧

    "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你 ...

  2. web设计字体规范_适用于Web设计人员的30种高质量免费字体

    高质量字体是设计师的重要资产. 我们始终努力在每个设计项目中保持独特,但是有时候为正确的设计获取正确的字体可能很困难. 通过搜索引擎和字体网站搜索字体既费时又乏味. 在今天的帖子中,我们尝试将尽可能多 ...

  3. 徐志摩题要求:•使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段

    徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...

  4. 网页颜色搭配技巧nbsp;文字字体、字号…

    网页颜色搭配技巧 文字字体.字号.字体排版等 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅. 对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页 ...

  5. css限制字体三行_CSS美化网页

    一.字体样式 font-family:设置字体类型,可以同时声明多种字体,字体之间用英文逗号分隔开: font-size:设置字体大小,常用单位为px,还有其他如in.cm.mm.pt.pc等单位: ...

  6. html如何设置打印分页打印出来,网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. 第 1 页 第 2 页 第 3 页 任何浏览器 ...

  7. html5 在线字体库,网络字体@font-face,如何处理网页中的特殊字体?

    网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...

  8. php的字体 怎么变大,网页字体怎么变大

    网页字体变大的方法:1.打开浏览器,点击右上角的"三条横杆"按钮:2.在弹出的设置菜单中,点击"选项"按钮:3.在选项界面中,点击"界面设置" ...

  9. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...

最新文章

  1. centos 6.x 升级内核
  2. LIstview滑动时不加载图片,停止时加载!
  3. Storing XML in Relational Databases(2)
  4. 默认HotSpot最大直接内存大小
  5. docker php composer 使用_「PHP编程」如何使用Docker制作自己的LNMP/LAMP镜像
  6. java bitmap取出数据库_bitmap一般如何取出其所表示的数据(以java为例)
  7. Elasticsearch】 es Match Query
  8. 一体机or复合机?企业文印设备该怎么选
  9. 实例 -- Loadrunner实现Android / IOS 手机APP压力测试
  10. 一旦手把手教你开发微信公众平台
  11. 微信小程序阻止事件冒泡【看这里】
  12. Win10版本那么多怎么区别
  13. iconfont用在placeholder里
  14. hackme pwn onepunch
  15. C++ vector数据合并去除重复项
  16. 记录:d3实现刻度尺
  17. 毕业去哪儿?看这里!神策数据 2023 校园招聘启动啦
  18. 来自一位十余年工作经验的老电子工程师的心里话:该出手时便出手!
  19. excel单元格设置下拉列表
  20. 客运公司运输管理系统(简易版)

热门文章

  1. 多线程一定比单线程效率更高吗?
  2. PCI-DSS基础教程
  3. 如何在抖音中一键复制微信号打开微信?
  4. git实验之代码提交
  5. 突然吐字不清_老人说话突然口齿不清是怎么回事
  6. TPS60400DBVR
  7. CMake(六):使用子目录
  8. 用iPad看各种视频格式的电影,ipad视频格式兼容不用愁
  9. 上千个国外免费权威优质编程学习课程大放送 —— 提升篇
  10. 大疆 DJI SDK 开发介绍