当前位置:380元网站建设 虎网站 > 建站知识 > 正文

网页字号多大才合适?

发布日期:2009-09-27

文字大小,是用户体验中的一个重要部分。不同的分辨率,不同的显示器尺寸,不同的DPI,乃至不同的浏览器设置,都会对最终展现的文字大小带来影响。虽然现在很多浏览器已经可以方便地缩放页面,但用户每次光临都要重新缩放,总归麻烦,何况还有许多用户不知道如何缩放页面。最好还是根据用户的分辨率给用户一个比较体贴的默认字号,那这个字号多大合适呢?

12px?14px?15px?16px? 还是压根就不应该使用px这个单位呢?

问题的根源,在于屏幕上的一切字号单位(px,pt,em)都是相对单位,单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角,这不仅取决于文字的物理尺寸,还取决于它到人眼的距离。

物理尺寸

首先假定一个我们希望达到的文字物理尺寸,例如设定为17寸1280 * 1024显示器上的16px,计算可得它的高度约是4.32mm,我们计划让网页文字在大部分显示器上都比较接近这个大小,那么在不同分辨率下应该显示成多大的字号呢?

第一步:统计用户主要的分辨率和对应的屏幕大小。

要在物理尺寸和分辨率之间换算,首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕,而屏幕尺寸又无法通过网页获得,只好对现在的显示器市场进行统计分析:针对某一分辨率,统计可能的屏幕尺寸范围,从最小到最大,相对主流的是多大(或使用该范围的中间值作为主流尺寸)。

电脑显示器市场(产品种类繁多,难免挂一漏万,数据仅供参考)

第二步:计算每个分辨率主流屏幕尺寸的物理宽度

现在的显示器长宽比不仅有4:3的标准屏,16:10的宽屏,还有更多不规则比例,为了在不同长宽比的显示器之间进行比较,统一使用横向分辨率来统计。用主流尺寸和长宽比(假设像素的长和宽相同)计算出屏幕宽度(英寸),再换算成公制(毫米),将其一一对应就可看出屏幕大小的趋势。再结合各分辨率的用户分布,结果如下图所示(图片中每个点对应一个分辨率,横轴为屏幕横向的像素数,纵轴为该屏幕的物理宽度,气泡大小表示使用该分辨率的用户人数。其中蓝色气泡表示标准屏,紫色表示宽屏):最大的三个气泡分别是1024*768,1280*1024,1280*800。

第三步:计算不同显示器上的字号大小

用屏幕的物理宽度除以像素宽度,就可以得到每个像素的宽度。然后用指定的文字物理大小除以这个数,就可以得到在不同分辨率下所需的字号。

不同分辨率下需要的字号

可以看出笔记本和台式机的尺寸相差很大,为方便使用,使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。

为保持固定物理尺寸,各主流显示器下所需字号与分辨率的关系

由于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12、14、16、18、22px等偶数字号。也就是对某个分辨率选择离它最近的偶数字号。例如:屏幕横向分辨率在1100以下的采用14px,1100到1500采用16px,1500以上采用18px,依此类推。

到人眼的距离

虽然笔记本的字号远小于台式机,可是实际并没有给我们带来那么大的不便,这是因为:一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。当上网本越来越小时(极端的例子就是手机),人们使用的时候可能会拿的更近,这样视角更大。反之,当显示器越来越大时(24寸甚至更大),出于整体视角等方面考虑,人们也可能离屏幕远些,从而减小了视角。

定量来说:由于文字大小h(4~5mm)相对人眼到文字的距离d(30~60cm)非常小,可近似认为视角θ正比于h,并与d成反比(θ≈tgθ=h/d)。也就是说,同样大小的文字,距离二尺时看到的只有距离一尺时的一半大小。

也就是说,显示器只能传达一个大概的尺寸,每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。面对越来越多的笔记本用户(请参照上一篇:笔记本电脑的市场份额),前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果,具体就靠用户去自我调整了。[Page]

用JS实现不同分辨率下自动调整字号

例如网页正文所在p的id为content——

注:为保证各浏览器下文字均可缩放,字号单位使用em而不是px,一般来说,浏览器默认1em=16px,0.875em\1em\1.125em即为14\16\18px。

使用字号缩放时请注意:对该p内的标题等字号单位最好使用百分比,而不是固定字号,以便随正文同步缩放。

福田万德丰办公设备同虎网科技签署网站建设协议

    万德丰位于深圳市福田区华强路赛格科技园4栋西A502。万德丰是经深圳市福田区工商局审核的有资质公司,统一社会信用代码:91440300678582569A。万德丰选用虎网站经济型入门级网站案例,其功能比较简单的程序,广告单图(无动漫),页面较简单,适合小微企业产品展示型网站。   经营范围:办公用品及耗材、电子产品、五金制品、文体用品的销售;国内贸易,货物及技术进出口。(以上法律、行政法规、国务院...

       哪些关键指标影响着网页设计呢 随着互联网的发展,网站建设成了很多企业作为推广企业形象的一条重要渠道,往往影响网站的因素是有很多的,想要把网站做好,最需要抓住对网页影响最大的关键性指标。这篇文章就让我们一起探讨哪些是影响网页设计的关键指标。虽然他们并非是全部的关键指标,但是掌控好这5个因素,将会让整个网站更加的锦上添花。 1、关键词 网站的关键词通常可以回答“你的网站主要是干什么的?”这个问题。网站的实际内容和用户的想法可能...

       网站怎样做出好的文案 第一、吸引点有没有引起了关注 在如今的信息量极大的环境中,无论是写软文还是海报文案等,你的文案标题或主题要具有吸引别人注意力的作用。否则,后面的购买下单步骤就不用谈了。 .绑定关注话题 除开对比反差,还可以绑定现阶段消费者容易关注的话题。比如爱情、工资、手机、嘻哈、马云等话题,都是目前很多人会去关注的信息。 比如油烟机是一种人们关注度很低的品类,不像手机、可乐等常被提及的品类一样。但是最近看到方太...

       南京溧水让氏回收与虎网站签约网站建设事宜 让氏选用虎网站经济型入门级网站案例,其功能比较简单的程序,广告单图(无动漫),页面较简单,适合小微企业产品展示型网站。让氏坐落于南京市溧水县永阳镇交通东路8号五洲星世纪商贸中心20幢1222室。让氏是经南京市溧水县工商局审核的有资质公司,统一社会信用代码:91320117MA1WTH74X5。同时经国家工信部和江苏省通信管理局审核通过ICP备案;备案号:苏ICP备18040387号。   让氏环保...

       怎样让用户更多地关注你的网站 请记住,如今用户放在网络文字上的注意力是越来越少了。所以要消除一些干扰的设计,比如flash动画或滚动的文本。 充分利用副标题和文本中的符号帮助用户浏览。 使用站点导航,把你要表达的信息都做成较短的页面。 让链接信息更具有描述性。而不是以阅读更多等引导性词汇吸引用户点击阅读。 用熟络的话语描绘出网站的内容,少一些拘谨的语气。 运用简明扼要的话语点出重点,不要奢望读者能够阅读大篇幅的文字。 在网站中...

       新网站获得流量的创新方法分析 一个新网站在刚刚上线之时,除了希望能够尽快被百度收录之外,就是希望能够拥有更多的流量,从而让网站不断积累人气,最终获得源源不断的利润。然而很多新站在上线之后,往往数个月的时间里,通常只有一百个甚至几十个IP在访问,难以形成规模效应,这样的新站自然会让站长难以看到与出头之日。    由于新网站很难通过搜索引擎来获得流量,因为一方面此时搜索引擎还没有收录网站,另一方面网站的排名也几乎没有,所以用户难以...

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读