10條字體設(shè)計(jì)規(guī)則能夠讓你網(wǎng)站設(shè)計(jì)擁有完美的字體

2022-06-22    分類(lèi): 網(wǎng)站設(shè)計(jì)

你有沒(méi)有注意到有些網(wǎng)站設(shè)計(jì)(或是平面)項(xiàng)目似乎在字體類(lèi)型的使用和排版上就能夠讓設(shè)計(jì)本身“發(fā)光發(fā)熱”?有些設(shè)計(jì)師在累積到一定的經(jīng)驗(yàn)和閱歷以后,再這方面會(huì)有一定的技巧,可以為每次項(xiàng)目設(shè)計(jì)和應(yīng)用好的字體。


當(dāng)然,你也可以做到。只要你有了一些簡(jiǎn)單的、可以參考和借鑒的規(guī)則,你就可以在你所有的項(xiàng)目,不管是網(wǎng)頁(yè)設(shè)計(jì)這種數(shù)字媒體還是在打印項(xiàng)目上改進(jìn)字體的外觀和設(shè)計(jì)。如果你正糾結(jié)于選擇字體和字體的配對(duì)問(wèn)題,這些規(guī)則或許可以幫助你設(shè)計(jì)好的字體類(lèi)型,每次(一定要跟著走)。
1.為項(xiàng)目設(shè)定目標(biāo)
一個(gè)好的排版首先需要你對(duì)你的項(xiàng)目在實(shí)際中的作用或目標(biāo)有一個(gè)堅(jiān)實(shí)的了解。在你開(kāi)始瀏覽谷歌字體或Typekit字體庫(kù)之前,先記下幾個(gè)幾個(gè)問(wèn)題的答案:
· 你想通過(guò)這個(gè)項(xiàng)目與誰(shuí)建立聯(lián)系?
· 用戶在實(shí)際使用過(guò)程中應(yīng)該如何處理這個(gè)設(shè)計(jì)?
· 轉(zhuǎn)換點(diǎn)是什么?
· 項(xiàng)目建立的氣氛是怎樣的?
· 你是否需要與其他設(shè)計(jì)或品牌進(jìn)行匹配或協(xié)調(diào)?
這些問(wèn)題的答案將幫助你開(kāi)始構(gòu)思你要找什么樣類(lèi)型的版式。
2.尋找類(lèi)似的形狀
如何在你的設(shè)計(jì)中匹配多個(gè)字體在視覺(jué)上不會(huì)給人一種混亂感?其實(shí)這就像選擇字體的形狀一樣簡(jiǎn)單,同時(shí),這對(duì)字體組合的產(chǎn)生或打破也是很重要的一個(gè)技巧。
那么如何確保你做到了呢?
尋找具有相似形狀的字體。想想每一種字體是圓形的還是橢圓形的,厚的還是薄的,有一個(gè)短的或高的x高度,或者是傾斜更適合還是不需要任何傾斜。
選擇一個(gè)你喜歡的主要的或作為整體基礎(chǔ)的字體,然后匹配具有相似形狀的補(bǔ)充字體,你可以通過(guò)以下幾點(diǎn)來(lái)判斷適合的補(bǔ)充字體:
· 看看每個(gè)字體類(lèi)型家族的小寫(xiě)“o”。里面的“碗”是圓的還是橢圓的?匹配“o”類(lèi)型相同或相似的字體。
· 字體厚或薄的搭配都是可行的。最好是搭配厚或薄的常規(guī)字體。
· 尋找在x高度上類(lèi)似的字體(也就是在垂直高度上的x)。
· 不要害怕混合搭配不同類(lèi)型的風(fēng)格。嘗試一個(gè)serif和sans serif組合,只要確保在復(fù)雜字體的旁邊搭配一個(gè)簡(jiǎn)單的字體即可。使用最廣泛的簡(jiǎn)單類(lèi)型,如正文。
· 注意傾斜和斜體(你可以把“o”的中心看作一個(gè)測(cè)試的標(biāo)準(zhǔn)),不要使用超過(guò)一種傾斜的字體,避免字體的反方向“沖突”,它們對(duì)用戶來(lái)說(shuō)可能是難以接受的。
3.設(shè)置字體的比例和大小
字體的大小可以決定一個(gè)項(xiàng)目的成敗。如果文本太大,它會(huì)導(dǎo)致不自然的閱讀模式,產(chǎn)生太多的停頓。如果文本太小,它會(huì)使眼睛緊張,導(dǎo)致用戶最終放棄而選擇離開(kāi)。
當(dāng)文本的樣式正確時(shí),用戶可以更容易和自由地閱讀和了解文字的內(nèi)容。
大小適中的文本在項(xiàng)目中也有不同大小的比例。主體文本是一個(gè)大小,標(biāo)題是另一個(gè)大小,而子標(biāo)題則是另一個(gè)大小。所有的尺寸和使用在整個(gè)設(shè)計(jì)過(guò)程中都應(yīng)該是一致的。
在這個(gè)技巧上,它對(duì)用戶的作用是讓一切都更容易閱讀。
· 文本大小按重要性排列信息。更大的類(lèi)型更重要,更有可能被大多數(shù)用戶瀏覽。
· 比例增加了文本的可掃描性,這樣用戶就可以快速地查看它。
· 相關(guān)項(xiàng)目外觀相同。
· 更大的文本元素,如子標(biāo)題,有助于分解長(zhǎng)文本塊,使其更易于閱讀。
4.注意間距
這個(gè)問(wèn)題就不再是字體本身,而是在類(lèi)型間距的問(wèn)題了。
字距調(diào)整,引導(dǎo),跟蹤和填充可以使你的字體類(lèi)型更漂亮,但是,也可能把它變成得混亂。
關(guān)于保持正確的間隔,這是一個(gè)創(chuàng)建“藝術(shù)”的過(guò)程。很多都取決于實(shí)際的字母組合使用,大小和字體。沒(méi)有任何已經(jīng)限定或規(guī)范的字距調(diào)整規(guī)則,而且對(duì)于文本和其他元素沒(méi)有好的填充量。
你得盯著它看。
在這方面,更多的是依靠你的感覺(jué)。如果設(shè)計(jì)以一種你不能精確定位的方式感到“壓抑”的話,很大原因歸咎于間距問(wèn)題。它需要不斷的練習(xí)才能把它做好。
5.左對(duì)齊
在英語(yǔ)和其他語(yǔ)言中,用戶的閱讀習(xí)慣是從左到右的,這也是在文本塊中優(yōu)化可讀性的理想對(duì)齊方式。
小文本(如菜單欄的文本元素或Banner圖的主標(biāo)題)不需要對(duì)齊到左邊,因?yàn)樗麄兒芸炀涂梢蚤喿x。對(duì)于有大量字符的文本(不僅僅是一個(gè)句子),應(yīng)該采取的最適合的對(duì)齊方式就是左對(duì)齊的(理由目前還有爭(zhēng)議,盡管如果你不小心的話,它可能會(huì)引起一些間隔問(wèn)題)。
6.選擇兩種字體類(lèi)型的家族
這個(gè)規(guī)則很可能已經(jīng)深深的植根于你的意識(shí)中了:只需要兩種字體就可以完成一個(gè)項(xiàng)目。
這里再次提一下這個(gè)觀點(diǎn),因?yàn)楹苌儆性O(shè)計(jì)師真正關(guān)注這個(gè)規(guī)則。瀏覽網(wǎng)站設(shè)計(jì)或一個(gè)作品集網(wǎng)站時(shí),你會(huì)很經(jīng)常看到很多“暴走的字體”的項(xiàng)目。
如果你打算打破這個(gè)規(guī)則,再想想吧。你想要通過(guò)添加另一個(gè)類(lèi)型的字體來(lái)獲得什么?相反,看看你選擇的字體,嘗試另一種風(fēng)格——粗體或薄或斜體——可能是更好的解決方案。
7.不改變字體
永遠(yuǎn)不要通過(guò)伸展、扭曲或傾斜一種字體來(lái)獲得“另一種”字體。如果你需要不同于你所擁有的東西,選擇一個(gè)不同的字體選擇。
字體設(shè)計(jì)師花了大量的時(shí)間來(lái)創(chuàng)作出的字體不是通過(guò)一些改動(dòng)就可以完事的。改變字母的形式會(huì)傷害可讀性,并會(huì)導(dǎo)致字體在使用大于原始尺寸時(shí)會(huì)以像素化的方式“崩潰”。
8.大量運(yùn)用對(duì)比
讓設(shè)計(jì)師陷入麻煩的情況之一是直接把字體類(lèi)型放在圖像或背景元素上。只有當(dāng)你在元素之間有足夠的對(duì)比以創(chuàng)建分離和確??勺x性時(shí),它才會(huì)起作用。
如果必要的話,你可以通過(guò)添加投影到字母已創(chuàng)建對(duì)比和分離,如果文字層和背景層確實(shí)沒(méi)有足夠的對(duì)比的話。
光線在黑暗或深色背景中可以確??勺x性。這也有助于使用一個(gè)更規(guī)則或更寬的字體。
但事實(shí)并非總是如此。一張照片可能包括明亮和暗的空間,或者可能包括粗細(xì)的筆畫(huà)。
優(yōu)化的選擇可以包括在“盒子”中展示文本、選擇較重的字體或在圖像上添加顏色疊加。所有這些技術(shù)可以幫助創(chuàng)建更多的對(duì)比,使文本更具可讀性(此外,當(dāng)文本和圖像移動(dòng)時(shí),它們往往會(huì)被使用在多個(gè)響應(yīng)式斷點(diǎn)中)。
9.記得為移動(dòng)端調(diào)整字體
說(shuō)到排版,移動(dòng)端的可讀性應(yīng)該是一個(gè)首要考慮的問(wèn)題。像在字母上添加圖案或紋理等有趣的技巧可以在打印和一些桌面屏幕上工作,但在較小的設(shè)備上卻會(huì)不會(huì)有什么的效果的。
你需要考慮字體如何在所有使用終端中的呈現(xiàn)形式(回到你的排字標(biāo)尺,記住要在大屏幕和小屏幕上添加類(lèi)型的規(guī)格)。
移動(dòng)端的排版通常比較大,而且比臺(tái)式機(jī)上的字體間距要大一些。如果段落更短,這樣你就不會(huì)有大量的文本來(lái)讀取,這也會(huì)對(duì)用戶造成困擾。
10.堅(jiān)持一種風(fēng)格分標(biāo)準(zhǔn)
一旦你針對(duì)網(wǎng)站設(shè)計(jì)項(xiàng)目有了一個(gè)明確的想法,創(chuàng)建一個(gè)風(fēng)格指南或者將你的使用規(guī)則規(guī)范化。
復(fù)印并把它放在一個(gè)你更容易獲得或看到的地方,當(dāng)你對(duì)設(shè)計(jì)做出改變時(shí),使用它。
一致性是好字體設(shè)計(jì)的關(guān)鍵組成部分。
總結(jié)
大多數(shù)用戶可能對(duì)比如像壞的排版設(shè)計(jì)這樣的較專(zhuān)業(yè)的問(wèn)題并不了解,他們只知道設(shè)計(jì)在整體的感覺(jué)上不太對(duì)。

在創(chuàng)造好字體的時(shí)候,關(guān)鍵在于可讀性。字體類(lèi)型必須易于閱讀和理解。它應(yīng)該與文本所表現(xiàn)的情緒相匹配,用戶幾乎看不到它,但你需要做到他們不需要任何思考就可以輕松閱讀了。


本文來(lái)自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:成都網(wǎng)站建設(shè)公司,成都網(wǎng)頁(yè)設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司,網(wǎng)站建設(shè) 成都,成都 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè),網(wǎng)站建設(shè)設(shè)計(jì),網(wǎng)站開(kāi)發(fā),網(wǎng)站制作設(shè)計(jì)

文章題目:10條字體設(shè)計(jì)規(guī)則能夠讓你網(wǎng)站設(shè)計(jì)擁有完美的字體
轉(zhuǎn)載來(lái)于:http://www.bm7419.com/news0/170450.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化

網(wǎng)站設(shè)計(jì)知識(shí)