文字可以是优美的、简单的、狂放的、有趣的、激动人心的，还有很多其他种类。它能激起情绪，帮助用户理解你所要传达的讯息。字体有很多种，但有一点是共通的——它必须具有可读性。 `2 B8 N' U; L% @
2 b3 u6 } @9 x' k; \这是一个时常被遗忘的因素。设计师们往太狭小的空间填入太多信息，或是选用了外观胜过可读性的字体。但重点是：如果字体无法阅读，你的设计就无法完全生效。网页设计基础
# i4 V) W1 D1 L
! d! k( {3 {) A8 C- x8 D1 a3 d尽管有些耸人听闻，但它几乎是普适规律。你会问：“作为艺术元素的那些字体怎么说？” 不可阅读的字体在这类设计中确实能发挥作用，但是，仅限于与可读的文字搭配使用。学网页设计入门
* o' F( H+ k: C4 Y2 D8 y$ \* Y" M
8 m& d& L8 |) W4 h& A在狭窄空间体现可读性
* q5 x( [1 ?) X1 c8 x7 k- c# P: Y. C0 v; m5 }$ r
' w+ \0 d7 G2 w2 l" w; M6 ~
$ c6 K6 O# ~: w5 R& `7 s4 H6 P: e% u. i+ ]
: w( b- U: z& R b9 ^& K
) Z {; p8 d2 K! d( ?2 I
* c. w* m8 W- N! d. L5 i# e3 d; Z8 ~: @$ c8 x8 ^
, Y3 c3 ^$ I7 a3 g
/ |1 {8 k5 t. B什么使得文字能够阅读呢？它实际上是很多因素共同作用的结果，包括行长度、行距、字体样式、外边距和内边距，还有颜色和对比度。网页设计图片2 `# {( j# v% F: R; D
5 ^% |7 h+ F- K$ j( y- X每一个元素，都影响着屏幕阅读的难易程度。这每一种元素，都是设计师能够操控的。记住，本文中谈论的这些元素，是指网站主体部分的文字，此处文字的可读性可以说是首要考虑因素。（别处文字的标准相对宽松许多，只要主体部分高度可读。）* J; y6 K( X% L. N* {- @) v
' s' Z- F) m! S' J
行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，那是很吓人的，难以阅读。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。
M+ c' g1 h1 P, j+ U行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。7 s! s/ T' \& S2 t# f0 [) y7 a( o
字体样式：字体的样式也会影响可读性。简洁的衬线字体和无衬线字体是最具可读性、最易浏览的，而那些华丽的手书和新奇字体则最难破译。
! Z: F# H( Z" U2 A$ K' _# X外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。, e9 d6 g$ S* E* ]+ ~3 g
颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。学习网页设计有什么好处
6 }1 {9 ]1 f' g+ ^4 S y1 u3 l. F3 o. i
不同屏幕上的可读性
6 D3 O' T. k2 G) i3 V5 W2 Y( _5 L
- g/ \; k- Z9 t1 f( U1 M1 p3 \
% E: {+ C' a, z5 B5 M
, D, f$ g& v/ U% ]. c' P. R那如何创造最易读的文字？如果是正文文字，有一些基本准则规定每行的字数——每种设备不同—— 有助于打造最佳的可读性。怎么学网页设计9 x) ~+ u% [5 f9 f3 O
: ?) q& t! h; u+ n( o' l% t
从何开始呢？最佳行长度有助于帮你确定文字段落的大小。可以这样：确定正文部分的宽度——通常可以假定分成桌面、平板、手机三种尺寸。然后调整文字大小到理想的单行字数。如何快速学网页设计% X+ m5 M3 ?6 M9 p9 ]/ R
7 Z) }# m6 R4 L+ X/ y5 Z虽然还有其他因素在起作用，这些准则是很好的入手点。网页设计初学入门! y$ z- D6 v- O: a) [/ L+ d h
- c2 }: R. ~) B' Y0 \
桌面：每行55到75个英文字符，包括空格；理想状态是每行65个字符* ]# _, F, l- @$ }8 M
移动设备：每行35到50个字符
! {2 K( ^8 h& S( ^0 ]' D将最佳的单行字数与绝佳的行距相结合，可以提升可读性。通常，行距最好是按照正文字体字号的百分比来定义，也可以定义为固定值或是em。
# L/ ], L) |( n1 z- T; l! G/ u* d& Z2 }- \3 x
桌面：字号的1.5倍
+ h) ^1 N0 V" f! E- m E8 N+ I4 N移动设备：字号的1.75至2倍9 h5 c% ?' ]+ q: {
如果你想找个工具来简化所有这些工作，试试黄金比例文字计数器 。专业网页设计
, v& h8 S& v; f* o, ~$ k2 `3 t8 n' `7 n) {0 O6 s6 u, h R
可读性的其他提示
! w; i( Y, r, i5 b
- L* W) x. M& O# s) v3 S2 U: ]1 E要打造可读的排版，正文以外的文字也大有关联。使用标题、无序列表、段落间的额外间距和颜色，也能提升整体可读性（标题则有助于浏览整个网站）。
3 F8 ` k+ g1 j: Z9 y! P
, ^, @/ M* o& g8 k考虑使用如下元素增进文字层级，创造更完整、更易读的网页优秀网页设计设计。记得要把这些元素“设计”成独特的字体、字号和颜色，并要在正文中保持协调。网页设计学习交流
, ?2 U" p. X8 C8 G' {+ M
! x# P+ N" [/ ]8 u# y% \# R M标题" F; u2 N1 @+ \( G3 }
链接' J/ ?5 c- S8 m1 l8 x% e
粗体或斜体字
: i3 T' Y) z/ V: N7 ^5 w2 L! F无序或有序列表8 t' c! o, \0 M) B
图像元素，例如照片6 a; D" Y! u1 f1 [0 z0 m3 L9 x& b3 a
说明文字
; p# \( }1 w9 `6 l% O. M引用文字
( M: s- B3 D+ w1 i- o& g0 S在各元素中混合使用衬线字体和无衬线字体
1 r. [- N' N5 Q9 U7 B- M10种易读的字体
, x9 G# u( i8 N2 b* t' U
. p. B) m( t$ }9 `- ~+ k: _9 i没有一篇讨论可读性的文章不推荐字体的。下面有10种高度可读——并且相当流行——的字体供你选择建立网站。（自备梯子）
* z( g( k( `9 j% z# z% P
9 d0 l8 H' m/ a. p2 p无衬线字体
( Y3 o0 C& Q: _8 ]" b7 r! C
; I' X! D& I) e2 M' {. T: w( Z) x4 A$ K2 S
+ Z1 P- g0 y/ y1 D" }/ n( m9 a4 N) O3 E5 @: r& ^9 h
9 q- S2 p o. v) t7 g' o. f2 x5 B/ N1 L7 Y' a) G
& x* G0 n a, e* M
$ G# m, m( I* g+ d* w% B
3 l/ H4 n5 ?! ~: e& G1 V# O1 j3 t0 Z7 t& m
* n# [+ a7 k, T+ K2 t
" r$ ]) g* ?4 o8 S0 Q& ? V+ ?7 j5 c1 |8 b: `
6 i8 M) k2 _) m w
' {2 }( g. y2 \1 ~3 n衬线字体. s" k3 v G1 p, Q. C
+ @ n: t' C1 A9 \( W6 ~
0 M9 H- E9 A3 ^& n+ O# \3 Q8 s
% j2 [! `8 J$ Q$ v6 s& b0 o0 o/ C* i
4 V/ W) t- y1 b# g% T0 }5 [" ]$ @+ O( R- |8 h6 w6 I; h
0 w4 I1 O/ j8 Y! p3 u9 a
* }9 M7 x' q3 s6 n6 G' r1 _- x- F0 p! b6 K+ x
I# e1 M/ _9 l6 W
3 l9 _$ X7 D$ u: ]% E
" h6 d3 c ^6 h1 U; L' t可读性清单
4 x" l5 g5 l5 \6 ^
$ \ i, }$ |/ M) m" D% }6 d
" ]$ ^3 J. r- g5 C/ T
' [! e& W9 d5 j# }- ^/ V( n2 E
9 S, E1 p3 X* N5 b既然你已经有了好点子，决定下个设计项目中要使用什么字体和样式，你确定能以一种完全可读的方式将它们组合起来吗？下面是一列清单，供你规划字体的设计。$ v( \) z+ V( E! I) I
5 g6 W: p0 ]( f: Y主体部分字号够大吗？在每种设备上，它是否达到最佳的行长度？
" O& E& T% s. l4 m每行文字间是否有足够的间距？4 ]9 p& m3 g% I4 I
文字与页面边界和其他元素之间有没有足够的空间？# r7 E. H; \) E. x: Q9 q
正文文字颜色与背景对比反差够强烈吗？+ N5 e R- r6 Z, S/ X4 e# H
每个新段落之间是否有额外的空隙？7 h3 H+ @% \6 Z0 z4 i
标题和其他元素与正文文字不同吗？' c, f$ \7 I7 B/ W# k
有没有使用其他元素（无序列表、粗体字等）分解大段文字？/ [# K: t) r1 O/ u7 P0 L
正文文字是否使用了易读的字体（建议选用一种衬线或无衬线字体）？: s) S6 O+ \' L$ v- @ K* ?" g
结论9 T, v0 |# \9 o: x: J! K
( z# o0 D5 c- y7 G, p4 E可读性是设计中至关重要的组成部分。如果无法阅读和理解页面上的内容，对于用户而言，它就完全不相关也不重要。
2 s: l( _- I* M) N" C. H% O
. y, ?* K3 z! {/ H转载请注明：http://www.801l88.com/，nasw00e或者留下我们的品牌词(浙江一卡通)。 |
