首页 > 其他分享 >Typography | 字体与字体样式

Typography | 字体与字体样式

时间:2024-08-08 17:17:13浏览次数:5  
标签:Sans 可读性 样式 正文 Typography 标题 字体

本文是我阅读 web interface handbook所作的笔记,由chatgpt润色并翻译。

字体与字体样式

在网页设计中,字体的可读性至关重要。以下是一些关键概念和建议:

关键概念

字体与字体样式

  • 字体:文字的设计风格。例如,Arial 或 Times New Roman 是不同的字体。
  • 字体样式:具体的字体实例,包括尺寸、粗细和样式。例如,Arial 12pt Bold 是一种字体样式。

通常,“字体”和“字体样式”可以互换使用,但理解它们的区别很重要。

字体的可读性

  • 装饰字体:这些字体可能在视觉上很吸引人,但通常可读性较差。应谨慎使用,以免影响用户体验。
  • 无衬线字体(Sans-serif):这种字体在任何情况下都适用于 UI 设计。
  • 衬线字体(Serif):适用于大量的文本阅读,通常能提高可读性。
  • 等宽字体(Monospaced):适用于显示代码片段或短小的标题。避免将等宽字体用于整体设计或长文本,因为它们不易于阅读和扫描。

设计考虑

在为新项目创建设计和排版时,应考虑以下三点:

  1. 正文字体:选择用于正文的字体。
  2. 标题字体:确定用于标题的字体。
  3. 强调字体:决定是否为标题、引语、表格、提示或其他装饰元素选择特殊字体。

正文字体的选择决定了排版和设计的风格。其他字体的选择主要是为了创建视觉上的重点。

标题字体可以与正文字体不同,以增强对比度和排版表现力。

在长文本中,衬线字体与无衬线字体的可读性差异可能不明显。

可读性是设计中最重要的方面。

字体配对

配对字体时,唯一需要的技巧是 对比。以下是一些建议:

  1. 标题使用 Sans,正文使用 Serif。
  2. 标题使用 Serif,正文使用 Sans。
  3. 标题使用 Slab,正文使用 Sans。
  4. 使用 Inter 字体作为标题和正文的字体。

标签:Sans,可读性,样式,正文,Typography,标题,字体
From: https://www.cnblogs.com/azoux/p/18349354

相关文章

  • styled-components 怎么定制 antd 组件的样式
    以Card组件为例说明,要使用styled-components定制AntDesign的Card组件样式,可以按照以下步骤进行:1.安装styled-components首先,确保你已经安装了styled-components和babel-plugin-styled-components(如果需要):npminstallstyled-componentsnpminstall--save......
  • 字体加粗
    字体加粗您可以通过以下CSS代码来将上述div的字体加粗:.draggable.vdr.ant-table-draggable-handle{font-weight:bold;}如果您是在Vue项目中,可以将这段代码添加到对应的.scss或.css文件中。如果是全局样式,确保正确引入该样式文件。如果是局部样式,根据组件的样......
  • HTML 样式
    您已经很好地概述了HTML中style属性的用途以及它与旧HTML标签和属性的对比。style属性确实提供了一种灵活且强大的方式来直接在HTML元素上应用CSS样式,而无需依赖外部或内部样式表(尽管在大型项目中,通常推荐使用外部样式表以维护样式的集中管理和重用性)。使用style属性的好处直接......
  • FastReport不通过触发文本框宽度改变字体大小
    FastReport无法根据字数超出文本框高度而去改变字体大小,所以写了以下方法简单提供一个思路1privatevoidText_AfterData(objectsender,EventArgse)2{3doublemaxHeight=337;4doubletxtHeight=((TextObject)sender).Height;5......
  • 更改 pandas.DataFrame 的样式:永久?
    当我更改pandas.DataFrame的样式时,例如像这样#colorthesecolumnscolor_columns=['roi','percent_of_ath'](portfolio_df.style#colornegativenumbersred.apply(lambdav:&#......
  • 设计一位字段结构存储下面信息。 字体ID:0~255之间的一个数 字体大小:0~127之间的一个数
    /设计一位字段结构存储下面信息。字体ID:0~255之间的一个数字体大小:0~127之间的一个数对齐:0~2之间的一个数表示左对齐,居中,右对齐加粗:开(1)或闭(0)斜体:开(1)或闭(0)在程序中使用该结构来打印字体参数,并使用循环菜单来让用户改变参数。例如,该程序的一个运行示例如下:IDSIZEALIGNMEN......
  • xlsx-js-style 如何配置表格样式
    xlsx-js-style是一个用于处理Excel文件的JavaScript库,基于xlsx库并添加了对样式的支持。通过xlsx-js-style,你可以设置单元格的字体、背景、边框等样式。下面是如何使用xlsx-js-style库配置表格样式的步骤。1.安装库首先,确保你已经安装了xlsx-js-style库:npminstal......
  • python图表没有正确显示中文,这通常是因为matplotlib的默认设置不支持中文字符,或者相应
    如果图表没有正确显示中文,这通常是因为matplotlib的默认设置不支持中文字符,或者相应的字体没有正确加载。你可以通过指定支持中文的字体来解决这个问题。下面是如何设置matplotlib以确保能够在图表中显示中文的步骤:方法1:全局设置字体你可以修改matplotlib的全局配置,使......
  • 3.初识CSS与文本背景样式
    目录1.上节回顾2.CSS定义3.CSS选择器4.CSS样式的三种写法5.div盒子标签(division)6.文本样式(font)7.背景样式(background)1.上节回顾超链接a标签:<ahref='地址'>超链接文本</a> 也可以用id属性来超链接文本里面的内容<imgsrc='图片地址'alt='图片描述'>列表分为有序,无序,自定......
  • 前端性能优化---样式优化---01
    在前端开发中,性能优化是一个关键点,而样式优化则是性能优化中不可忽视的一环。笔者给出一些样式优化措施,包括减少重绘和重排、CSS选择器优化、使用CSS预处理器和后处理器、CSSSprite、CriticalCSS等技术。1.减少重绘和重排重绘(Repaint)和重排(Reflow)是浏览器渲染过程中的两......