2021-09-29 分類: 網(wǎng)站建設(shè)
從網(wǎng)站不同元素的關(guān)系而言,網(wǎng)站排版,可以分為“圖文的排版”“圖片的排版”“文字的排版”三類。本篇,我們主要總結(jié)文字的排版。
什么是文字排版?
文字的排版指的是字體的視面。這是一種以一種清晰美觀的方式安排文本的理念。優(yōu)秀的文字排版,可以用來傳達(dá)某種情緒或加強信息。為此,我們可以使用不同的字體和字體樣式,以及調(diào)整大小、字母和單詞之間的間距等等。
文字排版到底排什么?
要了解網(wǎng)站的文字排版,我們必須知道一些術(shù)語。這些術(shù)語也是文字排版的變量。
字體和字形。字體指的是某種字的樣式,如黑體字、宋體字,而字形指的是一個字體的形狀變化,例如加粗、斜體等。
易讀。一段文字是否容易閱讀,就是易讀性。一段文字的易讀性與字間距、行間距、字體大小、背景色、字體顏色,都存在較大的關(guān)系。
襯線和無襯線。襯線字體包括小的裝飾線或在字母筆畫的末端的“尾巴”,無襯線字體通常是由更簡潔的線條組成,字母的頂端沒有任何修飾。
層次感。層次感在排版中是必不可少的。它可以用來區(qū)分不同的內(nèi)容,幫助讀者立即理解哪些信息是最重要的。層次結(jié)構(gòu)可以使用大小(大或小)、寬度(厚或薄)和元素的位置來實現(xiàn)。例如,報紙文章的標(biāo)題通常比正文更大更突出,讓讀者通過瀏覽標(biāo)題就能了解文章的要點。
留白。 在圖形元素之間添加適量的空間有助于避免混亂和確保清晰。在文本周圍加上邊距或空白也會引起更多的注意,并有助于區(qū)分信息。
對齊。排版對齊指的是頁面上文本位置。包括左對齊、右對齊、中間對齊等。
網(wǎng)站設(shè)計文字排版指南
在了解了如上術(shù)語之后,成都建站公司創(chuàng)新互聯(lián)總結(jié)一些文字排版要點,僅供參考。
第一,找到與品牌匹配的字體。
不管是什么,找一種能表達(dá)你獨特個性的字體。為了為你的網(wǎng)站選擇最好的字體,首先收集一些你覺得合適的字體,然后在你更好地了解你需要的字體之后縮小字體范圍。
第二,保證字體的一致性。
當(dāng)你可以在同一個網(wǎng)站上合并兩到三種字體時,在相同的上下文中使用相同的字體。例如,如果一個頁面的標(biāo)題是宋體的粗體寫的,那么確保其他標(biāo)題也是一樣的。
第三,使其易讀。
使得網(wǎng)站選擇的字體,在各類設(shè)備中都是容易閱讀的。例如,如果你選擇的字體在PC機上是容易閱讀,也要確保其在手機上也容易閱讀。
第四,字體限制在兩三種之內(nèi)。
一個由多種字體組成的網(wǎng)站可能會顯得混亂和不連貫。相反,選擇不超過兩到三種字體,并在每一頁中始終使用它們。
第五,學(xué)會進(jìn)行搭配。
在為你的網(wǎng)站尋找好的字體搭配時,把你的品牌身份放在你決策的最重要位置。記住標(biāo)題用什么字體,長文本用什么字體。后者應(yīng)該是特別干凈和容易閱讀,選擇一個字體真正地表達(dá)你的品牌。
字體大小與行距
在早期的網(wǎng)頁設(shè)計中,設(shè)計師為了追求中文字體的好視覺效果,經(jīng)常使用12px像素的字號。其實在現(xiàn)在看來,網(wǎng)站內(nèi)容頁面用這么小的文字是不可取的,小字體的可讀性很差,沒有多少人愿意非常費力的盯著屏幕去辨識那些小字。應(yīng)該說,將文字的字號設(shè)置成14px或者更大的16px會更加合理,瀏覽者閱讀起來也更加輕松。當(dāng)然,如果條件允許,可以在文章閱讀頁面增加選擇字體大、中、小的連接。
文本之間的行距是非常重要的,因為擠在一起的文章會讓讀者看起來非常累,時不時的還會看錯行。在面對密密麻麻擠在一起的長篇文字時,很少有人有耐心會看下去(至少我是如此)。一般情況下,文本的行距為1.5em與1.7em之間比較好,最好不要高于2em,否則過猶不及。
快速參考:
CSS中使用font-size調(diào)整字體大小,例如:font-size:14px;
CSS中使用line-height調(diào)整行距,例如:line-height:1.6em;
段落間距
在段落之間,要保持足夠的間距才能讓讀者更容易識別,頁面也更整潔。面對沒有段落間距的頁面,讀者很可能會把幾個連在一起的小段路看成一個大段落,如果每個段落內(nèi)容太多,很少有讀者有耐心讀完,因為互聯(lián)網(wǎng)上絕大多數(shù)的讀者瀏覽網(wǎng)站的方法并不是精讀,而是“掃描”。
我們通過修改p標(biāo)簽的margin屬性或者padding屬性來修改段落間距。相比較而言,段落間距占據(jù)一行文字的距離還是比較合理的,所以我們通常設(shè)置段落間距為1em。我習(xí)慣使用“padding:0.5em 0 0.5em 0;”來設(shè)置段落間距,padding后設(shè)置的距離按照順序分別是段落的上方、右方、下方、左方間距。之所以在上方和下方各用一個0.5em而不是在下方用1em,是因為分別為上方和下方設(shè)置段落間距會讓段落在右邊框或背景的時候看起來更加均勻。
快速參考:p { padding:0.5em 0 0.5em 0; }
段落首行縮進(jìn)
在HTML中,半角空格是無法連續(xù)識別的,所以很多從網(wǎng)上找的文章都是沒有段落縮進(jìn)的,這樣從板式上看起來就不是太符合我們中文文章在生活中的習(xí)慣,我們習(xí)慣開頭空兩個漢字的位置,而我們又懶得每個段落都去添上全角空格,那么我們可以使用段落首行縮進(jìn)解決問題。使用text-indent即可實現(xiàn)段落的首行縮進(jìn),如果我們想要首行空兩個漢字的位置,那么我們可以設(shè)置“text-indent:2em;”,這樣縮進(jìn)問題就解決了。
快速參考:p { text-indent:2em; }
常用標(biāo)簽定義
這個問題前面已經(jīng)提到了,具體情況因人而異,這里舉個例子說明一下。假如我需要重新定義em標(biāo)簽,通常em標(biāo)簽都是顯示為斜體的,我為了讓他更突出,給他加一個顏色定義“color:green;”,這樣我們在使用這些預(yù)定義標(biāo)簽的時候會更加得心應(yīng)手,也更加符合自己的需要。
快速參考:em { color:green; }
網(wǎng)站的核心是內(nèi)容,用戶訪問網(wǎng)站最重要的目的就是要看網(wǎng)站的正文,所以,網(wǎng)頁的文本排版非常重要。網(wǎng)頁的文本排版并不是僅僅在CSS里設(shè)置個字體大小那么簡單的,想要有好的排版,對細(xì)節(jié)要下一番功夫才行。
新聞標(biāo)題:網(wǎng)頁制作中文本排版的技巧和細(xì)節(jié)
URL地址:http://m.rwnh.cn/news29/128879.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、面包屑導(dǎo)航、云服務(wù)器、定制開發(fā)、服務(wù)器托管、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容