网页设计属于大屏幕设计,有很多小伙伴在设计过程中,会感觉设计稿中的字体偏小,其实实际还原效果往往会比你感受到的要正常一些。
以下内容,希望可以帮助大家开始使用正确的字体大小:
一、首先选择合适的屏幕尺寸
在为多终端设计时,我们都采用一倍图进行设计,保障多端的设计元素大小一致;
- 网页端:1440 x 900 px (个别页面需考虑1920*1080)
- 平板端:1024 x 768 px
- 手机端:375 x 812 px (个别页面需考虑375*667)
一、字体选择:
一、对于官网、博客、文章等内容展示性页面,可适当选择大一些字体:
- 标题Titles:20+ (为了形成良好的层次结构,任何超过20的字体大小都可以用于标题);
- 正文Body:16/18px(16px是页面中正文的字体大小,18px可用于副标题或正文重要说明)
二、对于管理台等复杂性页面,页面需要用户进行信息操作的(点击、选择、悬停、搜索等),需要建立合适的字体层级:
- 标题Titles:20+ (如:20/24/32/40/48等,页面根据其重要性顺序由不同类型的标题组成);
- 标题Body:16px(用作模块标题,可加粗);
- 正文Body:14px(正文小于标题2号,合适的层级);
- 描述:12px(12号是网页端最小字体大小,用于标注说明/描述等,一般很少用)