点击返回

当前位置:排版

排版

字体系统的构建,是『动态秩序之美』的第一步。

  1. 建立体系化的设计思路:在同一个系统的 UI 设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。

  2. 少即是多:在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。

  3. 尝试让字体像音符一样跳跃:在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小,会令字阶之间产生一种微妙的韵律感。

  4. 注意:正文区域,必须在类 .typo 下h1-h6 p ol 等才有排版效果

排版演示

这里是演示的正文...

返璞归真

身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。

双面体验

拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。

星辰大海

如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。

元素 标签 字体大小 说明

页面标题

<h1> 24px 粗 在一个页面只有一个页面标题。

标题

<h2> 22px 粗 作为页面第二级标题,可能在一个页面中使用到多个二级标题。

三级标题

<h3> 18px 粗 页面第三级标题,嵌套在二级标题下使用。

四级标题

<h4> 16px 粗 页面第四级标题,嵌套在三级标题下使用。
五级标题
<h5> 14px 页面第五级标题,嵌套在四级标题下使用。
六级标题
<h6> 12px 页面第六级标题,嵌套在五级标题下使用。

这是一个段落

<p>

14px 正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。
粗体文本 <strong> 14px 通常粗体文本用来强调内容。
小的文本 <small> 12px small文本字体只有正常字体大小的80%。
超链接 <a> 14px 超链接具有不同的颜色以区别其他文本,超链接仅当鼠标悬停时会增加下划线。
  1. 这是一个有序列表
  2. 含三个列表项
  3. 作为示例
<ol><li>...</li></ol> 14px 当组织一些并列项目且关注项目之间顺序时可以使用有序列表。
  • 这是一个无序列表
  • 含三个列表项
  • 作为示例
<ul><li>...</li></ul> 14px 当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。