【转载于腾讯大讲堂】如何进行字体结构设计

2024-05-10 16:18

本文主要是介绍【转载于腾讯大讲堂】如何进行字体结构设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文来自:djt.qq.com/article/view/860(参看原文地址)
【转载】字体设计结构调整方法

daisy  发表于 2013.10.8     107浏览    4讨论

   作者:Teven,腾讯安全产品部设计师,字体研究爱好者。

 

  我们在进行字体设计时往往是凭借着往日的一些汉字的经验来评估着一些字体设计是否合理是否好看,但是我们常常也会遇到一些问题。比如这个字体设计出来后怎么看怎么不舒服,但是又说不出哪里不好。其实这类问题的原因通常是因为结构上的布局没有统一或是形旁声旁的比例不对。那下面接介绍一种方法,能够或多或少的帮你来解决这类困难。这个方法就是利用汉字的第二中心线理论来调整结构。


 

一、第二中心线理论产生的背景和作用

 

  在新中国的六七十年代,中国的第一批字体设计人进行字体的设计时都还是徒手进行绘制的。一套需要设计六千多字,一个人平均每天只能设计四个字。一个人最少要设计几年才能完成。问题来了,第一天设计的和第一千天的,不统一了。而且后面设计的肯定要比之前做的好,还不能总是推翻前面做的,这样一套字体就永远也做不完了。最重要的是在多人合作时候也需要有个规范来进行统一。于是【第二中心线】这个理论应运而生了。它是用来解决字体重心,大小和结构问题的。


  为了使大家可以更好的理解汉字的第二中心线的概念以及作用,在这里我先引入与之相关的汉字的基本知识。


二、汉字的基础知识


1.汉字字形的种类及其结构


  汉字的字形可分为独体字和合体字两大类。


  合体字:两个或两个以上偏旁组成的字,偏旁是合体字的结构单位


  独体字:一个偏旁单独构成的字


  以下将汉字字形的种类用用线框表示出来,能够清晰的看清楚他们之间的结构

 


 
(图1)


  由图1这些字形可以看的出:汉字在空间结构里主要分为上中下和左中右两类。汉字最少笔画是一笔,最多有三十多笔画,那么他们同时出现在一套字体设计中怎样才能做到视觉上的统一的。下面引入一个重要的概念。


2.第一中心线
 


(图2)

  我们在进行字体设计时通常是在25x25的方格内进行设计,把竖线称作经线,把横线称作纬线,在经线13和纬线13上的两根粗黑线,称为第一中心线。红色的点就是重心点(见图2)。


  在这里有两个重要的结论需要记住的是首先第一中心线和重心点的位置是永恒不变的,其次,每一个字都是受第一中心线所控制的(见图3)。

 


 
(图3)

  其实,每个字不光受到第一中心线所控制,每一个合体字的形声部分也都会受到各自的中心线所控制(见图4)
 


(图4)


  图4可以看到,每个声旁和行旁会被被一条中线所划分。图4所示划分字体形声的中心线就是第二中心线。

三、第二中心线的相关理论


1.第二中心线之间的距离不变

 


 
(图5)


  图5琨字的行旁“王”被一条中心经线所划分,声旁“昆”被一条中心线经所划分,1和2产生了 第二中心经线,同理3和4产生了 第二中心纬线。


  这里需记住的结论是:第二中心线之间的距离一旦确定就要求这套字体内的距离不变。

2.第二中心线在视觉上是杠杆原理


  下面举个例子来说明为什么第二中心线在视觉上是杠杆原理


例一:用第二中心线分析字体结构


 
(图6)


  例一:假设在视觉上第一中心线作为支点,第二中心线作为第一中心线左右的二个力点, 右边的力点用横线表示,左边的力点用竖线表示。右边的第二中心线要靠近第一中心线,相反左边的第二中心线远离第一中心线。于是他们在视觉上就达到了一种平衡(见图6)

3.第二中心线移动的情况

 


 
(图7)


  图7将同一套字体黑体字的“琨”换成“如"字,可以发现行旁所占的视觉重量明显变大了,而此时第二中心线也明显的向右移动了,但是他们在视觉上依旧是平衡的。


  此时我们可以得出关于第二中心线的第三个结论:第二中心线是一个游移的中心。

4.第二中心线的杠杆原理公式

 

 (图8)

  事实上,关于第二中心线的理论,我们可以直接明了的用一个杠杆原理的公式来总结。


  图8的黑色第一中心经线就是杠杆原理的支点,因为第一中心线的位置是永恒不变的。


  上文提到过每个字必须以第一中心线设计成左右在视觉上平衡的要求,图8的横线就是表示每个字在框中所占的视觉重量

 

 (图9)


   (图10)


  这里再以黑体字"提"字来举例,图10 F1负担了“提”的声旁 “是”的视觉重量;F2负担了“提”的形旁 “才”的视觉重量。F1>F2,D线是表明第二中心线“距离不变”的结论的杠杆。我们可以发现负担重量大的会靠近支点,负担重量小的会远离支点,这样在视觉上也就达到了重量平衡,也就符合我们熟悉的杠杆原理。那我们就可以用一个公式来说明这个问题即:F1D1=F2D2。

三.做个实验
 

  我拿腾讯游戏这四个字来做下实验,因为我认为这四个字做的很舒服也很好看。我想他们在设计之初应该是利用现有的字体来进行变化创作的,而且也应该是符合第二中心线这个理论的,至少不会偏差太多,否则字的结构就会看起来很不舒服了。

 
(图11)


  第一步,我将倾斜的“腾讯游戏”四个字扶正,这样的话便于测量。


  第二步,用辅助线把每个字的形声部分划分好


  既然第二中心之间距离不变这个结论成立的话,那随便先划出一个字的第二中心线,那这个中心也一定适用其它的字。

  第三,我将“腾”字的中心划分出来后依次套用到另外三个字,开始是测量(见图11)


  可以发现除了“游”这个字在声旁上有些偏差以外,其它的几个字都是非常准确的。我想这里出现偏差的原因是因为在设计它们相连的笔画时,将偏旁略微加宽了的原因,但是总体不是偏差很多,所以看起来也是舒服的。


结语


  第二中心线是针对汉字共性方面锁提出来的,至于表达汉字的个性问题,还会涉及到黑白反光,线条分割等理论。一套字体的好看与否我认为结构是最重要的,任何字体的设计只有把结构搭准确了,才能把个性的问题发挥好。

 

四.最后总结上面提到的结论


1.第一中心线和重心点的位置是永恒不变的,


2.每一个字都是受第一中心线所控制的


3.第二中心线之间的距离一旦确定就要求这套字体内的距离不变。


4.第二中心线是服从于第一中心线的,它们是一种视觉上的杠杆原理。


5.第二中心线是一个游移的中心。

**********************************************************************************************************************************************************

永葆一颗纯洁、宽容平和、仁慈谦卑和意气风发的心!

这篇关于【转载于腾讯大讲堂】如何进行字体结构设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976942

相关文章

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Linux使用scp进行远程目录文件复制的详细步骤和示例

《Linux使用scp进行远程目录文件复制的详细步骤和示例》在Linux系统中,scp(安全复制协议)是一个使用SSH(安全外壳协议)进行文件和目录安全传输的命令,它允许在远程主机之间复制文件和目录,... 目录1. 什么是scp?2. 语法3. 示例示例 1: 复制本地目录到远程主机示例 2: 复制远程主

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

windows系统上如何进行maven安装和配置方式

《windows系统上如何进行maven安装和配置方式》:本文主要介绍windows系统上如何进行maven安装和配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. Maven 简介2. maven的下载与安装2.1 下载 Maven2.2 Maven安装2.

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y

Go语言中使用JWT进行身份验证的几种方式

《Go语言中使用JWT进行身份验证的几种方式》本文主要介绍了Go语言中使用JWT进行身份验证的几种方式,包括dgrijalva/jwt-go、golang-jwt/jwt、lestrrat-go/jw... 目录简介1. github.com/dgrijalva/jwt-go安装:使用示例:解释:2. gi

SpringBoot如何对密码等敏感信息进行脱敏处理

《SpringBoot如何对密码等敏感信息进行脱敏处理》这篇文章主要为大家详细介绍了SpringBoot对密码等敏感信息进行脱敏处理的几个常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录​1. 配置文件敏感信息脱敏​​2. 日志脱敏​​3. API响应脱敏​​4. 其他注意事项​​总结

python进行while遍历的常见错误解析

《python进行while遍历的常见错误解析》在Python中选择合适的遍历方式需要综合考虑可读性、性能和具体需求,本文就来和大家讲解一下python中while遍历常见错误以及所有遍历方法的优缺点... 目录一、超出数组范围问题分析错误复现解决方法关键区别二、continue使用问题分析正确写法关键点三

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho

Java进行日期解析与格式化的实现代码

《Java进行日期解析与格式化的实现代码》使用Java搭配ApacheCommonsLang3和Natty库,可以实现灵活高效的日期解析与格式化,本文将通过相关示例为大家讲讲具体的实践操作,需要的可以... 目录一、背景二、依赖介绍1. Apache Commons Lang32. Natty三、核心实现代