英文网页字母排版难题多？设计师需兼顾电脑与人眼差异

所有从事网页设计的企业都清楚，当为英文版面安排英文字符布局时，总会碰到诸多困难，无论怎样调整，最终效果似乎都不够理想。

你或许听闻过的某个视觉设计课程，其核心在于确保所有元素高度统一，追求极致的和谐感，力求达到无可挑剔的境界。

这很有道理。一个协调均衡的设计应当能经受住我们视觉的审视。这样的设计会让人觉得贵公司网页制作更具条理和水准。

各种网页制作工具和层叠样式表标记都能在此发挥作用，可以为您修改所有细节。

人的视觉感知图像的方式，并不总是和数字描述相符。对于机器来说，看似完全相同且均匀的事物，可能会与人的眼睛所观察到的有所不同。

身为网页制作者，构思页面布局时需留意此节。我们绝不能全然依赖机器自行管理。

这或许就是人工智能在设计领域难以替代人类的缘由之一。尽管，这或许只是时间上的问题而已。

因此，虽然要依照全部的设计规范，不过确定最终的视觉效果时，也要依赖自己的视觉感受和内在的判断力。

此刻，我向各位呈现若干范例，这些范例将说明视觉校正设计如何助益您的创作，使作品更加出色。

网页设计视觉对齐排版：

说实话，在网络上使网页视觉完美是有点困难的。

调整字符间距和文本排列要依据特定规范，而且借助CSS修正往往需要大量功夫或依赖额外的JavaScript工具。

整个竖向排列极具活力，各个组成部分之间的距离参差不齐，所以想要确保所有项目基准线完全对齐，几乎是一件不可能完成的任务。

我无法提供一种简便的魔术式CSS方法，能够应对所有难题。因此，我不会分享任何代码示例，但我想强调设计视觉上达到极致完美的理念。我相信你能找到合适的方式，通过调整CSS在各个位置，达成这个目的。

在网页界面构建过程中，一个突出的毛病就是文字强制靠左排列。这种做法对字数不多的内容影响不大，不过对于字体尺寸较大且字形粗犷的标题，其弊端就相当显著。

让我们来看看这个大标题对齐左边：

能够发现，在系统预设的界面呈现下，字符"T"的位置向侧面偏移了些许距离，目的是为了视觉上的调整，然而对于这一段落里的其他字符而言，这种偏移并没有实际作用。

下面看看我是如何修复它的？

首先，我会将所有字符都对齐到左侧边界，接着，留意到字母G并未与H和T完全对齐，尽管它实际上距离边缘有数个像素，这种情况源于这封信的圆形特征，然后，我会用字母C，O，Q和S执行相同的操作

对于G , T，W，Y这些带有锋利棱角或笔划斜指左方的字符，我同样能够处理。

倘若第二个段落恰以小写字母起始，那么把字母"T"挪到界外，观感会更佳，例如呈现此番模样：

我们再举一个案例来阐释字符间的联系。我把大写字母W向侧边挪动了些许距离，目的是让它在右侧文字中显得更为协调。

不过情况变得更为错综，假如把这两个词互换位置，并且让'W'位于'E'正下方的第二个位置，结果就会不同：

不能认为所有以字母W开头的行都必须脱离边界，这种情况要看它和其它字母的关联性，这要求我们听从视觉和直觉的判断。

没有任何规定能够一概而论。具体要依据文字的尺寸，字体的形态，字体的粗细，以及所采用的字符。

讲到这里相信无论对你来说什么感觉都是对的。

现在让我们看看中心对齐：

此处第二句以句号收尾，它导致这一行更加延展，并且浏览器严格依照长度排列文字。

然而，重心并非正好位于该语句的正中央，因此，需要将前几行像素向左侧调整，以便符合视觉感受。

例如，当您添加引号和衬线字体时，这一点更为重要。

若需使引号与左侧对齐，应将左引号置于外侧，以便营造更佳的视觉效果和行文流畅度：

综上所述，参照先前阐释的英文网页关于文字布局难题的应对策略，个人觉得当前应当充分关注优质网页布局的规范做法，规范的布局方式有助于提升我们设计团队的条理性和职业水准。

继续浏览有关 排版设计视觉设计 的文章