首页 关于我们 服务项目 新闻中心 联系方式
QQ联系
电话联系
手机联系

南京网站设计公司讲解英文字母排版方法

发布时间:2022-06-07 10:13:33
发布者:ydcnet.cn
浏览次数:250

       相信每一家网站设计公司都知道,在给英文网页设计英文字母排版的时候都遇到很多问题,不管你怎么排版视乎都不怎么完美。

       你可能曾经听到的**个视觉设计课程之一是使所有的事情完美一致。非常完美等。

       这听起来很合理。一个良好的对齐和平衡的设计应该看起来是对我们自己的眼睛考验。但它会被认为您公司网页设计水平更有组织性和专业性。

       任何网站设计软件和CSS代码甚至可以在这里派上用场,并为您调整一切。

       然而,人的肉眼看待和处理图像的方式并不总是与数字所说的一致。对于电脑而言,看起来完全一致和平衡的东西看起来可能与您的眼睛看起来不一样。

       作为网站设计师,我们在设计用户界面时应该考虑到这一点。我们不能完全相信电脑为我们照顾它。

       这可能是人工智能在设计工作中无法取代人的原因之一。虽然,这可能只是时间问题......

       所以,尽管我们必须遵循所有的设计规则,但在做出*终的视觉设计决策时,我们也必须相信我们的眼睛和我们自己的直觉。

       今天在这里让我向您展示一些如何通过视觉纠正设计使您的设计更好的例子:

       网页设计视觉对齐排版:

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

       不幸的是,字距调整和文本对齐基于度量标准,并且使用CSS修复需要很多努力或外部JS插件。

       整个垂直布局非常动态,元素间距不一致,因此保持完美的基线几乎是不可能的。

       我无法告诉你一个简单的魔术CSS技巧,可以解决所有问题。所以,我不会给你任何代码解决方案,但是我想把重点放在使设计光学完美的概念上。我相信你会找到一种方法来调整你的CSS在这里和那里,以实现这一目标。

       我在网站设计用户体验中发现的*常见问题之一是“ 超调 ”左对齐文本。对于较小的文字来说这不是一个真正的问题,但是用大型的,大胆的标题来说更明显。

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


 

       你可以看到,在默认浏览器的显示中,'T'字母从边缘移动了几个像素,以便在视觉上更正它,但是与这个文本块中的其他字母相比,它并没有什么意义。

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

       首先,我将所有字母对齐到左边缘。然后,注意'G'不与'H'和'T'对齐,但它实际上距边缘有几个像素。这都是因为这封信的圆形。我会用C,O,Q和S做同样的事情。

       在G , T,W,Y等有尖锐边缘或线条指向左侧的字母的情况下,我也可以这样做。

       如果第二行碰巧以小写字母开头,那么将'T'移到边缘外面会使视觉效果更好,如下所示:

 


       我们来看另一个例子来证明字母之间的关系。我将'W'从边缘移开了几个像素,以便与以下单词形成更好的平衡。

 

       然而,这一切都变得更加复杂,因为如果我们切换这两个单词并将'W'放在'E'之后的第二行中,它就不一样了:
 
       你不能假设所有以'W'开头的行应该离开边缘。这一切都取决于与其他字母的关系。这就是我们必须相信我们的眼睛和本能的地方。

       这里没有任何规则可以普遍适用。一切都取决于文本大小,字体样式,字体重量,字体和使用的字母。

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

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


      这里的第二句话以句点结束。它使这一行更长,并且浏览器严格根据长度对齐文本。

      但是,重量平衡并不完全在这句话的中间。所以,你必须把上面几行像素向左移动以满足你的眼睛。

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


       如果要将引号对齐到左侧,则应将左引号留在边缘之外以创建更好的视觉外观和流动:

       总结,根据上面讲解的英文网站设计字母排版问题的解答方法,我认为现在是时候让我们重视网页设计良好的排版习惯了,良好的排版习惯可以使我们公司设计团队更有组织性和专业性。