本文关键词:ps做网站字号大小
别信那些“标准字号”的鬼话。
在PS里做UI,字号定多少,全看你的设计稿比例。
很多新手一上来就设16px。
觉得这样最稳妥,最像网页。
结果导出切图,前端一调,全乱套。
为什么?
因为PS是像素级设计,网页是响应式布局。
你定死一个数,手机上看太小,电脑上看又太占地方。
今天我不讲大道理,只讲实操中的坑和解法。
先说个核心误区。
很多人以为PS里的1px,就等于网页里的1px。
大错特错。
现在的手机屏幕,DPI都高得离谱。
iPhone的Retina屏,1个物理像素可能对应2个甚至3个逻辑像素。
你在PS里画1px的线,导出后可能根本看不见。
或者变得模糊不清。
所以,别纠结PS里的绝对像素。
要看相对比例。
正文内容,我建议基准字号设在14px到16px之间。
别问为什么,这是目前主流浏览器的舒适区。
小于14px,用户得眯着眼看。
大于18px,页面显得笨重,像老年版新闻。
当然,这只是基准。
标题字号怎么定?
别搞什么H1、H2的固定值。
要看层级关系。
主标题,通常是正文的1.5倍到2倍。
如果正文是16px,主标题就在24px到32px之间。
二级标题,比正文大一点,比如18px或20px。
这样层次分明,用户扫一眼就知道重点在哪。
我有个朋友,之前做电商详情页。
他把促销大字设成了48px。
在电脑上看很震撼。
结果拿到手机上,一行字就占满屏幕。
用户滑两下就烦了,直接关掉。
这就是没考虑移动端视口的后果。
PS做设计时,一定要切到手机尺寸看看。
别只盯着1920x1080的画布发呆。
另外,行高(Leading)比字号更重要。
很多设计师只管字号,不管行间距。
结果文字挤成一团,看着就累。
行高建议设为字号的1.5倍到1.8倍。
16px的字号,行高设24px到28px。
这样呼吸感出来了,阅读体验才好。
还有字体选择。
别用太花哨的艺术字做正文。
系统默认的无衬线字体,比如苹方、微软雅黑,最安全。
它们在不同设备上渲染效果最稳定。
如果你非要用特殊字体,记得做字体切片。
或者让前端用WebFont加载。
不然用户看到的可能是方框,或者默认宋体,丑到哭。
最后说个细节。
按钮上的文字,字号别太小。
至少14px,最好16px。
手指头粗,点不准会气死用户。
还有,颜色对比度。
浅灰字配白底,看着高级?
那是给设计师看的。
用户看着费劲,转化率直接掉一半。
深色字配浅色底,或者反过来,对比度拉满。
这才是转化的关键。
总结一下。
PS做网站字号大小,没有银弹。
但有几个铁律。
正文14-16px,行高1.5-1.8倍。
标题层级清晰,别乱用大字号。
移动端优先,切图前务必手机预览。
别为了炫技,牺牲可读性。
设计是为了服务用户,不是为了展示你的PS技术。
把这些细节抠好,你的设计稿前端落地时,少骂你几次。
这也是对彼此时间的尊重。
好了,今天就聊这么多。
去改你的稿子吧。