Material Design 设计规范中如何设置字体的大小及间距？-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 提出的一套新的 UX/UI 设计规范。随着移动设备和响应式 Web 的普及，它成为了越来越多的前端设计师和开发者们使用的首选设计规范。字体大小和间距是设计中非常重要的一个方面，而在 Material Design 中，其设置方式非常合理和灵活。

字体大小的设置

Material Design 中，字体大小一般分为主标题、副标题、标题、正文和辅助字体等五个等级。

主标题是页面或者区块的重要标志。一般设定为最大字号，通常为 48dp 或者以 34pt 为基准。

h1 {
  font-size: 48dp;
}

副标题是与主标题相对应的辅助标志。字号一般小于主标题，但要保证与主标题的视觉效果协调。通常设定为 20sp。

h2 {
  font-size: 20sp;
}

标题一般用于标识页面、区块或者部分内容。字号一般小于副标题，但要比正文大。通常设定为 16sp 或者以 18pt 为基准。

h3 {
  font-size: 16sp;
}

正文是页面或者区块主要内容的表现形式。字号一般比标题小，但要保证视觉效果的舒适度。通常设定为 14sp 或者以 16pt 为基准。

p {
  font-size: 14sp;
}

辅助字体一般用于辅助说明，如标签、日期等。字号一般比正文小，但要保证视觉效果的清晰可辨。通常设定为 12sp 或者以 14pt 为基准。

span {
  font-size: 12sp;
}

Material Design 中，间距的设置也非常合理和清晰。主要分为以下几个方面。

不同字体之间应采用适合的行高，确保视觉效果合理并提高可读性。

p {
  line-height: 1.5;
}

在 Material Design 中，元素之间的间距一般用于区分不同元素之间的关系。通常是垂直和水平两个方面。

在 Material Design 中，垂直间距必须符合一定的视觉比例，例如：8dp、16dp、24dp、32dp 等。

.v-space {
  margin-top: 24dp;
}

在 Material Design 中，视觉效果的平衡性非常重要。水平间距应该根据设计要求为元素之间提供足够的空间，并确保各个元素之间的空间均匀分配。

.h-space {
  margin-right: 16dp;
}

元素与边缘之间的间距是应用 Material Design 设计规范的一个重要方面，应根据设计需要合理设置。

.container {
  padding: 16dp;
}

在 Material Design 中，字体大小和间距的设置是非常透明、合理和灵活的。前端设计师和开发者应该根据设计规范的要求，合理设置字体大小和间距，并最大程度地保证视觉效果的舒适度和可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b5bffeadd4f0e0ffe7ec62