• 微信

移动时代文字排版变化大,如大小反差、字重、字间距该咋整?

时间:2026-04-01作者:admin分类:排版与出版物设计浏览:2评论:0

在印刷这个传统领域,我们有着很成熟的文字排版经验,在桌面端Web这个传统领域,我们同样有着很成熟的文字排版经验,在移动时代,那时的这些经验,很多依旧是有效的,然而,因为显示设备发生了变化,并且使用环境也发生了变化,所以这给相应内容也带来了不少的变化……

在印刷这个传统领域,我们有着成熟的文字排版经验。在桌面端Web这个传统领域,我们也有着成熟的文字排版经验。随着移动时代来临,存在APP的界面设计情况。网站越来越多地转变为响应式设计,目的是适应多种显示设备。这些经验。很多依然十分有效。然而因为显示设备发生了变化。并且使用环境也发生了变化。所以给文字排版带来了变化。

大小反差

于桌面端而言,我们或许会运用字号差异较为突出的文字组合,移动端的屏幕尺寸较小,所能容纳的文字数量也相对较少,同样的字号差异,在小屏幕上所产生的感受会被予以放大。

是因为,我们于使用这两种设备之际,观看距离存有差异,在桌面端,我们眼睛与屏幕相隔较远,然而在移动端,情况却相反,所以,我们应当于移动端运用较小的字号反差。

字重

别运用PS里头的文本加粗,它不但毁坏字体自身的美感,还更改文字原本的字宽进而影响段落里文字的对齐。恰当的方式是借助字体自身的字重来把控,像苹方、STHeiti、Helvetica Eue这样的字体自身设置Light、Regular、Medium这类两三种甚至更多的字重选择。

字间距

别轻易去改变字体默认存在的字间距,字体设计师针对这款字体,已充分去考虑了其所适配的字间距,要是不满意那可以更换字体。

颜色反差

移动设备使用时长处在复杂又多变的环境里,并非局限于室内,有可能处于室外环境,甚至会暴露在强烈阳光下,这种情况下要保证文字在背景中不会出现识别困难的状况,哪怕是色弱者也能够正常进行阅读。其中建议的两者颜色反差比应当高于4.5:1(AA级),目的是确保更多人以及更多环境都能够轻松实现阅读。Sketch里存在一个名为ColorContrastAnalyser的插件,它能够方便地检测这个比值,你还能够使用在线检测软件工具。

栅格系统

小屏幕上,一些桌面端无关大雅的间距不等问题会变得突出。

Lofter是在网易旗下的、具有精品特质的、展现出优雅风格的一款App,然而,其文章正文所呈现的界面,却存在着略微的、但是能够被察觉到的瑕疵:

很明显能够看见,段落右侧跟卡片的间距显著大于左侧。致使出现这个问题的缘由是,设计期间对于文本框宽度和文字大小二者之间的关系考量并不周到,进而使得文字没办法完美地将文本框填充完整。

呈现在上图里的,是iPhone5该界面的放大效果,还增添了辅助线,认真去观察,当把黄色部分各20px的间距给去除后,能看到文本框宽度为558px,并且正文所采用的字号是30px,如此一来行末就留下了18px的空余空间。要是字号设定为31px,那么恰好能够放下18个字后将558px像素的文本框填满。

移动端文字排版_移动端字体设计_纯文字排版设计

当然,31px的字号处于实际状况里也许并非是一种最为合理的字号选定形式,毕竟它没办法被整除从而应用到@1x的iOS开发环境当中。于实际设计期间,可以先前设定一个栅格系统,以iPhone5作为实例来讲,如果定义最小栅格为8x8px的话,便会获取到如下这般的一个栅格图:

以8作为基本单元,将各级字号予以设定,把文本框宽度确定为8的倍数,通过如此这般操作,我们能够保证汉字始终维持对齐状态。

对齐

所有的元素都是正方体,然而从二十世纪起开始使用标点后,到现代桌上出版时代,诸多排版工具软件都直接套用源自日本的“禁则处理”,也就是避头尾点,并且与西方文字混排的状况日益增多,以至于没办法做到纵横对齐的基本基础,可是至少段落的开头结尾还是要对齐,这便是为何对齐对电子书与长文章相当重要之缘由。

——董福興《簡單做好中文排版》

平常在英文段落展开的排版里头,一般来讲呈现的是左侧对齐这种样式,进而使得右侧依照它自身的规律自然去形成带有起伏变化的边(rag)。然而针对中文排版以及人们阅读时的习惯来讲,情况却是截然反过来的,特别是段落的开头部分与结尾部分要达成对齐,这极为关键。

先来看一个反例:

这呈现出Zaker新闻正文的一种表现情形,当其中夹杂着数字或者英文字母字符时,原本整齐排列的中文就被打乱了,以至于右侧出现严重参差不齐的状况,显得极其难看。

看看同一篇文章其它App是怎么处理的:

有这么两个,一个是网易云阅读处在左面的位置,另一个是网易新闻处在右面的位置。它们在处理方式这方面有些相似,统统是凭借程序的设置,对文字的间距进行细微调整,以此来填补右面区域存在的空白欠缺,不过两者存在区别,那便是当标点符号出现在一行的末尾的时候,网易云阅读把标点放置在了外部,然而网易新闻却将标点放在了内容的内部。

文字的对齐方式,可以用简单的代码实现:

在Web App里面,采用CSS类之中所指定的justify属性值来进行控制就行,以下是兼容性比较好的方案。

.space-betw {
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

在原生iOS里,要给字符串对象设定NSTextAlignmentJustified这个值。

- (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
}

按照以前我们凭借栅格系统做完的字号以及文本容器宽度的规范界定,再运用这个办法,终于能够防止App里常常出现的段落文字对不齐,对不准的老毛病了。

后记

上述这些,乃是实际工作里的经验归纳,移动平台持续变化着,硬件设备也在不断变动,字体自身同样处于不停演变中,与之相对应的设计方法,自然也不可能始终保持固定不变,然而,总的准则却是恒定的,即为了使得内容更易于阅读。

你可能想看: