html中标题距离顶部距离,版式设计中标题间距的使用法则

主标题与副标题定义

主标题是文案的核心主旨，可以直接表达，也可以含蓄表达，

副标题是对对主标题意思的具体阐释，或者主标题意思的进一步延伸。

字距与行距

横向的字间距与纵向的行间距的关系：

请保持行间距的高度＞字间距的宽度。

遵循这个法则，可以让行距的“宽”与字距的“窄”形成对比，这样才会显得更整体，更有设计感。

字距默认增大时，需手动缩小：

当文字放大成为标题后，字体的默认的字距也会随之一起放大，有时甚至与行距一样大，这会导致标题文字观看会显得松散，解决办法就是缩小文字之间的距离，调整到视觉上看着舒适的距离。( 对于较粗的字体需要适当增加字距，以使标题不会显得过于拥挤 )

行距默认增大时，需手动缩小：

行距关系法则在正文中使用的行距设置并不适用于标题。当标题文字出现换行的情况时，默认的行距会比较大，但为了使文字段形成一块整体的面积区域，就需要缩小行距，有时甚至接近字距大小。但只有这样才能给人给人力量和一体感。

当然，行距也不能设置得过小，当行距小于或等于字距后阅读逻辑会发生混乱，需要格外注意。

行距多少合适？

一般将主标题文字的三分之一作为主与副标题最小留白距离，将副标题的1倍大小作为最大留白距离。也有将四分之一作为最小留白的。

主、副之间的疏密关系：

通常是缩小主标题的字间距，而放大副标题的字间距，这样就有了疏密关系的对比，的更疏，密的更密，显得画面更加和谐。

反之，如果副标题的字间距缩小和主标题一样，缺乏对比会使得画面的文字层级关系凌乱，或者过于松散，不利于文字的阅读。

其实，除了文字方面，整个版面都是稀疏、密集、稀疏、密集来搭建的，比如一组信息的行距窄了，下一组的行距就要宽一些，整个页面就像一首歌曲有平缓又有高潮，从而形成了我们常说的节奏感。

装饰线

装饰线起到分割作用，一般在主标题与副标题之间空白处添加一条直线作为分隔。

分割的间距：

尽量不要均分，尽量让装饰线靠近主标题，而远离副标题，形成间距大小对比。如下图，B要小于A。

什么时候均分呢？板式为居中式的排版，信息以对称的形式排列时可以使用均分，加强稳定感。

对齐：

使用装饰线时，主副标题尽量缩放调整到两端对齐。

粗细：

让装饰线的粗细与主标题相等，比如主标题是0.6磅的描边，那么装饰线也要是0.6磅的粗细。