界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

网页端常用字号

网页中文字字号一般都是宋体12px或14px(无状态)

大号字体用微软雅黑或黑体,字号:18px、20px、26px、30px,一般使用双数字号,单数在显示的时候会有毛边。

网页端常用字体

1.平平稳稳:微软雅黑/方正中黑

微软雅黑系列:在网页设计中这款字体使用的非常平凡,这款只无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

        方正正中黑系列:中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

2.与时俱进:方正兰亭系列

方正兰亭系列: 个人最推荐的就是这个系类的字体,整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁,这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合,不仅能保证字体的统一感,还能很好的区分出文本的层次。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

 3.刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中,他们有着共同的特点,字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式,让文字显得更为活力。在这三种字体中,菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松,更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多,效果比较突出。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

三.常用字体颜色

在界面中的文字分为三个层级,主文、副文、提示文案等。

在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。

常用的色值是#333333;#666666;#999999

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

在界面中还经常会用到背景色#eeeeee。

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。

界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

总结:

使用规范化的设计对产品的延续性非常有帮助,并且保证了产品的独特性和一致性。

  1. 网页设计师要掌握不同平台的常用字体设计规范。
  2. 在每个项目设计中只使用1-2个字体样式。
  3. 在品牌字有明确规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。
  4. 字体用的太多,越显得不够专业。
  5. 不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。
  6. 字体与背景的层次要分明。
  7. 确保字体样式与色调气氛相匹配。

本文转载自Micu设计,原文链接: ,本文观点不代表125jz立场。

(0)
江山如画的头像江山如画管理团队
上一篇 2018年12月29日 上午8:43
下一篇 2018年12月29日 上午9:47

99%的人还看了以下文章

  • 1秒学会两点透视绘图技巧

    三点透视是一种绘图方法,一般用于超高层建筑,俯瞰图或仰视图。第三个消失点必须和画面保持垂直的主视线,必须使其和视角的二等分线保持一致。 (二点透视)就是把立方体画到画面上,立方体的四个面相对于画面倾斜成一定角度时,往纵深平行的直线产生了两个消失点。 建筑绘画的两点透视要比三点透视还要难以掌控,Anatoly Reza Pahlevi 为我们展示了他的独门绝技…

    2018年7月14日 网页设计
    6.6K0
  • 移动端web app和页面开发使用什么字体?微软雅黑?

    一直不清楚移动端web app和页面用的什么字体,只是觉得类似微软雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。 三大手机系统IOS、android、winphone支持的字体 ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 androi…

    2019年4月9日
    12.6K0
  • 网页设计中的字体选择以及常用字号

    网页设计中的字体 中文:宋体,微软雅黑,方正系列(无状态) 英文: Helvetica:被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。 Lucida Grande:是Mac OS U…

    2019年10月22日
    6.4K0
  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    3.0K0
  • 福利!13款免费商用黑体字体推荐

    “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。无论是识别性、适用面、视觉效果都非常好。本期推荐 13 款免费商用黑体,前 6 款为各大品牌开发的黑体字型,后 7 款是在传统黑体上进行设计改造,形成各有特点的黑体变体。 Adobe 和 Google 共同开发的免费黑体。字体设计优雅,显示效果优秀,可以满足不同场景下的文字显示需求。由于字…

    2023年1月20日 网页设计
    7.1K0

发表回复

登录后才能评论