PC版、手机版字体大小的设计

王志勇 发表于 2021年01月28日 10:47

如果以字体单位pt为参考标准,则小于18pt的字体,手机版要比PC版的大3pt或2pt。如PC版12pt的正文字体,手机版要用15pt,或14pt,最小为13pt。

手机版如果用15pt的字体,不需要加粗,手机浏览器会自动把15pt的字体显示为加粗的效果。

15pt的字体,大约等于朋友圈的字体大小。

18pt或以上的字体,PC版和手机版可以完全一样,字体看起来都较大,也省得再设计。

如果很多字体是以px为单位,可以参考9pt=12px的换算关系,则原来的pt值转化为px值,乘以1.3333就可以。例如,PC版16px的字体,手机版用20px,或18.7px,或17.3px。

只要掌握这个规律,PC版、手机版字体大小很好控制。

经典的9pt网页导航字体的由来
这是因为早期的显示器,是15英寸CRT显示器、800×600分辨率,或17英寸CRT显示器、1024×768分辨率,网站首页的位置有限,9pt既能容纳更多的内容、有利于排版,看起来又更专业。

但现在的显示器的屏幕尺寸已经达到23.6英寸、24英寸的标配,分辨率最低达到1280×720,所以以前的9pt导航字体,现在都可以用12pt来代替,又有助于护眼。

新闻正文,PC版,可以用12pt,或者更大一号的13pt,也有一些英文网站正文用15pt。

2条评论:
1   Glan 2021-01-28 11:14
不同分辨率不同显示器比例,相同大小的字体差别还蛮大的,我一般也不讲究多少号字体。。看舒服就调整哪个。
2   angel2018 2021-01-28 14:59
勇哥,我博客文章选的是18px字体,为了就是网友看起来更大,更明显,更主要是手机版到现在都没做好,哈哈,:)

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (43周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2022年07月
2022年06月(15)
2022年05月(20)
2022年04月(16)
2022年03月(9)
2022年02月(9)
2022年01月(10)
2021年 +

2020年 +
2019年 +
2018年 +
2016年-2017年(9)
2014年06月-09月(10)
2013年 +
2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2023 auiou.com All rights reserved.
此Blog程序由王志勇编写