51.网页设计规则#1_字体设计

news2024/11/22 10:10:37

一些概念

字体排版

排版是安排字体的艺术和技术,以使书面语言在显示时清晰、可读和吸引人。(来自维基百科翻译)

serif字体和sans-serif字体

serif字体

在这里插入图片描述

● 创造一个传统/经典的外观和感觉
● 体现出可信度
● 适合长文本

sans-serif字体

在这里插入图片描述

● 一种很现代的外观和感觉
● 干净、简单
● 对初级设计师来说,更容易选择
在这里插入图片描述

使用好的字体

  1. 只使用好的和流行的字体,并注意安全;
    sans-serif几种推荐的好看的字体
    在这里插入图片描述

  2. 并非一个好看的页面包含多种字体,每页只使用一种字体是可以的!如果你想多用一些,最好限制在两种字体。

  3. 根据你的网站个性选择合适的字体
    a. 为你的网站选择正确的个性(后面会有更多介绍);
    b. 在有衬线字体和无衬线字体之间做出决定;
    c. 用所有 "好 "的字体(以及谷歌字体中的其他字体!)进行实验,看看哪种字体最适合你的网站信息(这将随着经验的积累而产生)。
    d. 在你设计并创建网页的适合可以始终尝试不同的字体
    使用好的字体大小和粗细

  4. 在选择字体大小时,要限制选择范围! 使用 "字体比例 "工具或其他预定义的范围;

  5. 对于普通文本,使用字体大小在16px和32px之间;

  6. 对于长文本(例如博客文本),尝试20px的大小或者更大的。

  7. 对于标题,你可以根据个性选择真正的大标题(50px以上)和粗体(600以上)。

在这里插入图片描述

  1. 对于任何文本,不要使用低于400(常规)的字体重量。
    创建一个好的阅读体验

  2. 每行使用少于75个字符;
    在这里插入图片描述

  3. 对于正常尺寸的文本,使用1.5和2之间的行高。对于大的文本,要低于1.5
    a. 文字越小或越长,需要的行高就越大。
    在这里插入图片描述
    在这里插入图片描述

  4. 减少标题中的字母间距,如果它看起来不自然(这将来自经验)。
    在这里插入图片描述
    在这里插入图片描述

  5. 在短标题中尝试使用全大写字母。使它们变得小而粗,并增加字母间距
    在这里插入图片描述
    在这里插入图片描述

  6. 通常情况下,不要对文本进行辩解

  7. 不要把长的文本块放在中间。小块的就可以了

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/457495.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaScript】7.DOM的操作元素

DOM 的操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等 1. 改变元素内容 element.innerText:从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会…

Pytorch深度学习笔记(十)多分类问题

课程推荐:09.多分类问题_哔哩哔哩_bilibili 目录 1. 多分类模型 2. softmax函数模型 3. Loss损失函数 4.实战MNIST Dataset 之前,在逻辑斯蒂回归中我们提到了二分类任务,现在我们讨论多分类问题。 1. 多分类模型 与二分类不同的是多分…

基于C#asp.net心里咨询服务网站系统

功能模块: 主要分为管理员和注册用户,注册用户可以查看所有人发布的心里文章,情感在线问答,查询相似问题,以及进入论坛进行交流(发帖跟帖评论收藏等)后台管理主要是针对个人信息修改 管理员对注…

SpringBoot自动装配机制的原理

自动装配 简单来说,就是自动去把第三方组件的Bean装载到IOC容器里面。不需要开发人员再去写Bean相关的一个配置。 在SpringBoot应用里面,只需要在启动类上去加上SpringBootApplication注解就可以实现自动配置,SpringBootApplication注解它是…

DSPC174 3BSE005461R1码垛工业机器人安装调试的13个步骤

​ DSPC174 3BSE005461R1码垛工业机器人安装调试的13个步骤 ABB码垛工业机器人安装调试的13个步骤 最近工业机器人市场上,调试工作比较火爆,单个项目动辄几十台机器人同时调试,开出的日薪达到1500-2000元。拥有如此庞大的市场需求和丰厚收入…

Hudi数据湖技术之核心概念

目录 1 基本概念1.1 时间轴Timeline1.2 文件管理1.3 索引Index 2 存储类型2.1 计算模型2.1.1 批式模型(Batch)2.1.2 流式模型(Stream)2.1.3 增量模型(Incremental) 2.2 查询类型(Query Type&…

力扣:通过《84.柱状图中最大的矩形》求解《85. 最大矩形》

84. 柱状图中最大的矩形 85. 最大矩形 84.柱状图中最大的矩形&#xff1a; 单调栈求解问题范围&#xff1a; 输出每个数左边第一个比它小的数 单调栈例题&#xff1a; Acwing 830. 单调栈 #include <iostream>using namespace std;const int N 100010; int stk[N],tt …

再多猜一次就爆炸(小黑子误入)

目录 猜数字游戏 游戏设计思路 1.电脑随机生成一个数 2.猜数字 3.输入我是ikun&#xff0c;泰裤辣! 否则电脑将在一分钟后关机 游戏运行效果 源码 代码分析 代码实现关键语句 strcmp() rand()与srand() 时间戳time() 寄语 猜数字游戏 游戏设计思路 1.电脑随机生…

C语言_Printf函数返回值

目录 1. 嵌套结构 2. Printf 函数返回值 在了解Printf 函数的返回值之前&#xff0c;先来了解下什么叫嵌套结构。 1. 嵌套结构 这里直接举个例子进行介绍&#xff1a; strlen 函数计算字符串长度&#xff0c;显然打印的结果是 3 但是如果采用嵌套结构&#xff08;简单来说就…

【深度学习】基于华为MindSpore的手写体图像识别实验

1 实验介绍 1.1 简介 Mnist手写体图像识别实验是深度学习入门经典实验。Mnist数据集包含60,000个用于训练的示例和10,000个用于测试的示例。这些数字已经过尺寸标准化并位于图像中心&#xff0c;图像是固定大小(28x28像素)&#xff0c;其值为0到255。为简单起见&#xff0c;每…

看完这篇文章你就彻底懂啦{保姆级讲解}-----(LeetCode刷题142环形链表II) 2023.4.24

目录 前言算法题&#xff08;LeetCode刷题142环形链表II&#xff09;—&#xff08;保姆级别讲解&#xff09;分析题目&#xff1a;算法思想环形链表II代码&#xff1a;补充 结束语 前言 本文章一部分内容参考于《代码随想录》----如有侵权请联系作者删除即可&#xff0c;撰写…

ESP32设备驱动-LIS3MDL磁场传感器驱动

LIS3MDL磁场传感器驱动 文章目录 LIS3MDL磁场传感器驱动1、LIS3MDL介绍2、硬件准备3、软件准备4、驱动实现1、LIS3MDL介绍 LIS3MDL 具有4/8/12/16 高斯的用户可选满量程。自检功能允许用户在最终应用中检查传感器的功能。该设备可以被配置为生成用于磁场检测的中断信号。 LIS…

Vue 3 第十四章:组件五(内置组件-transitiontransition-group)

文章目录 1. transition组件1.1. 基本用法1.2. css过渡class介绍1.3. 过渡效果命名1.3.1. 基本用法 1.4. 配合自定义动画&#xff08;animation&#xff09;使用1.5. 自定义过渡 class1.6. <Transition>组件生命周期1.7. transition 常用场景 2. transition-group组件2.1…

Java基础(十一)日期时间API

1 JDK8之前&#xff1a;日期时间API 1.1 java.lang.System类的方法 System类提供的public static long currentTimeMillis()&#xff1a;用来返回当前时间与1970年1月1日0时0分0秒之间以毫秒为单位的时间差。 此方法适用于计算时间差。 计算世界时间的主要标准有&#xff1a;…

SCAU 统计学 实验6

要确定不同培训方式对产品组装时间是否有显著影响&#xff0c;我们可以使用单因素方差分析&#xff08;One-way ANOVA&#xff09;。我们将使用以下数据&#xff1a; 培训方式 A 的样本数据 培训方式 B 的样本数据 培训方式 C 的样本数据 显著性水平&#xff08;α&#xff09…

windows下springboot集成ELK

ELK ElasticSearch Logstash Kibana的集合。ELK主要用于日志的集中管理、快速查询和分析。主要是通过 Logstash 将应用系统的日志通过 input 收集&#xff0c;然后通过内部整理&#xff0c;通过 output 输出到 Elasticsearch 中&#xff0c;其实就是建立了一个 index&#x…

【利刃出鞘】链式思维利用ChatGPT,让其成为工作中的利剑?附带初学者扫盲SpringBoot

【利刃出鞘】链式思维利用ChatGPT&#xff0c;让其成为工作中的利剑 一、一点思考二、技术学习——链式思维2.1 springboot注册bean的几种方式&#xff1f;2.2 springboot Component 注册的原理&#xff1f;2.3 springboot引用注册的Bean原理&#xff1f;2.4 private final MyB…

26-第一个Servlet项目

目录 1.Servlet是什么&#xff1f; 2.第一个Servlet项目 2.1.创建Maven项目 2.2.引入Servlet依赖&#xff08;将Maven项目改为Servlet项目(尚不完整)&#xff09; 2.3.完善Servlet项目目录——源代码目录&单元测试目录&#xff08;非必须&#xff09; 2.4.编写代码 …

4月24日作业

作业1 #include <iostream> using namespace std; template <typename T> class Node { private: T* p; //指针指向栈的首地址 int maxsize; //栈最大容量 int top-1; //栈顶 public: Node(){} //无参构造 Node(int max):maxsize(max)//有参构造 填最大容…

2022 ICPC Gran Premio de Mexico Repechaje 题解

目录 A. Average Walk&#xff08;签到&#xff09; 题意&#xff1a; 思路&#xff1a; 代码&#xff1a; C. Company Layoffs&#xff08;签到&#xff09; 题意&#xff1a; 思路&#xff1a; 代码&#xff1a; D. Denji1&#xff08;模拟/二分&#xff09; 思路&am…