網(wǎng)頁設(shè)計(jì)本質(zhì)上是印刷設(shè)計(jì)發(fā)展過程中原理的進(jìn)化和理論的創(chuàng)造。 傳統(tǒng)的設(shè)計(jì)行業(yè)為網(wǎng)頁設(shè)計(jì)帶來了很多技術(shù)與理念，但這些在虛擬環(huán)境中需要花費(fèi)更多的時(shí)間才能掌握。 更不幸的是，我們沒有一個(gè)單一的平臺來展示我們的內(nèi)容；我們必須與多個(gè)瀏覽器、操作系統(tǒng)和屏幕尺寸作斗爭。

隨著網(wǎng)頁設(shè)計(jì)的發(fā)展，我們也觀察到了一些設(shè)計(jì)原則。 基于網(wǎng)格的設(shè)計(jì)近年來有所增加，這些設(shè)計(jì)師可以根據(jù)列網(wǎng)格來布局他們的網(wǎng)站。 網(wǎng)格系統(tǒng)成為一個(gè)非常流行的布局方式，通過使用比例和平衡來組織和對齊元素，并向頁面添加秩序。

基于我們使用比例和平衡的知識，可以利用另一種印刷設(shè)計(jì)理念：基線網(wǎng)格。

什么是一個(gè)基線網(wǎng)格？

基線網(wǎng)格是一種用于改善基于網(wǎng)頁排版的技術(shù)。 本質(zhì)上，它將所有文本對齊到垂直方向上的網(wǎng)格（簡稱垂直網(wǎng)格，可以理解為一行），每個(gè)字母的底部都位于網(wǎng)格上，就像在劃線紙上書寫。 最終的結(jié)果是：通過潛意識的平衡以及一致性，使頁面上的文本達(dá)到好的組織。

正如我之前所說，印刷是一種靜態(tài)媒介。 為打印格式而設(shè)計(jì)時(shí)，允許你在你的觀察窗口（例如PS、AI等設(shè)計(jì)軟件上的畫布）上設(shè)定最終的呈現(xiàn)效果。 然而，由于你的設(shè)計(jì)可以通過網(wǎng)頁在各種可選的平臺上進(jìn)行解析，對于使用不同設(shè)備或者平臺的用戶，CSS渲染你的行高值和其他印刷值也將會有所不同。 對于許多設(shè)計(jì)師來說，這只能通過猜測和預(yù)測最后呈現(xiàn)在用戶面前的樣式。

在印刷中的基線網(wǎng)格

許多印刷設(shè)計(jì)師通過結(jié)合他們的設(shè)計(jì)工具來使用基線網(wǎng)格，比如說InDesign、PS和AI等等。 印刷中的網(wǎng)格可以追溯到早期的1200年代。 事實(shí)上，從網(wǎng)格到黃金比例（即大多數(shù)基于數(shù)學(xué)的理論）的一切都可以在生活中隨處可見，最突出的是建筑。

網(wǎng)格使得可以將所有的設(shè)計(jì)元素（文字、攝影、繪畫和顏色）彼此之間構(gòu)成形式上的關(guān)系；也就是說，網(wǎng)格系統(tǒng)在設(shè)計(jì)中是一個(gè)引入秩序的手段。 有意地對元素進(jìn)行組合比起對元素隨機(jī)地布局更具有清晰、整潔和成功的效果。 -- Josef Müller Brockmann。

創(chuàng)建一個(gè)基線網(wǎng)格

現(xiàn)在，讓我們來看一下在實(shí)際操作中，如何創(chuàng)建一個(gè)基線網(wǎng)格。

首先，我們必須基于與字體大小的比率來定義基線網(wǎng)格的行高（line-height）。舉個(gè)例子，1:1.5是一個(gè)不錯(cuò)的數(shù)值，為我們提供了一個(gè)50%的呼吸空間。 如果文字尺寸為12px，那么行高（使用1:1.5這個(gè)比例來計(jì)算）將會是18px。 150%是一個(gè)不錯(cuò)的數(shù)值，為我們的設(shè)計(jì)提供了易讀性，當(dāng)然，這個(gè)數(shù)值不是固定的，你可以取任何合適的數(shù)值。 但是，當(dāng)考慮行高時(shí)，你應(yīng)該盡可能選取130%-160%范圍的比率（對于西文來說是這樣的，對于中文，行高可大于這個(gè)數(shù)值）。

在我們再進(jìn)一步之前，你應(yīng)該了解 CSS line-height 實(shí)際上是如何工作的。 line-height是文本行的整體高度，而不是文本本身。 它的工作原理是通過在文本上方和下方添加填充，以使其空間化（可以理解為上下留白）。 如果我們實(shí)際上拿一些文本并為其設(shè)置一個(gè)背景，我們將會看到文本位于行中間，而不是完全覆蓋在行上方。

進(jìn)入CSS

為了簡單起見，假設(shè)我們的文本的基本大小為10px。 通過堅(jiān)持使用我們的比率（1:1.5），這意味著我們的行高將會是15px。 （注意，10px是相當(dāng)小的字號，大多數(shù)情況下我不建議使用這個(gè)字號，我使用它純粹是因?yàn)樗谶@里比較容易計(jì)算）。 為了使各種元素適合我們的基線網(wǎng)格系統(tǒng)，我們需要在我們的CSS中設(shè)置它們。

在我們繼續(xù)之前，這些例子都假設(shè)你使用了某種CSS重置文件。 如果你沒有使用，那么默認(rèn)邊距可能會干擾我們今天的工作。

段落

為了解決這些問題，一旦我們設(shè)置了行高，我們需要在每個(gè)標(biāo)題和段落下面留下一致的邊距。 因?yàn)槲覀冊谶@里使用一個(gè)15px的網(wǎng)格，我們通過覆蓋p標(biāo)簽的標(biāo)準(zhǔn)底部外邊距（默認(rèn)情況下是1em，在我們這個(gè)例子中將是10px），我們修改為15px，與文本中的行高保持一致。 這將在每個(gè)段落下面創(chuàng)建一個(gè)比例空行，等于文本駐留在那里的高度。

這是結(jié)果：在文本主體中，段落下方的外邊距等于行高。

標(biāo)題

類似地，對于標(biāo)題，我們只需要繼續(xù)服從15像素的增量。 通過簡單地在我們的外邊距上標(biāo)記150％的行高，我們創(chuàng)建一個(gè)類似的，一致的斷點(diǎn)。

右邊的示例應(yīng)用了我們的CSS，這使得我們的標(biāo)題下的外邊距符合我們的基線網(wǎng)格。 由于我們的標(biāo)題的字體大小是我們的正常文本的兩倍，它在我們的網(wǎng)格中占用了兩行。

在我再進(jìn)一步之前，你需要注意，如果你為文本應(yīng)用一個(gè)背景，你的文本實(shí)際上可能不會總是坐在行上。 不要擔(dān)心，只要行高保持不變就好了。 如果你的文本浮動(dòng)行的中間，你可以很容易地用你的邊距，但它不是必要的。

列表

接下來，我們?nèi)绾翁幚砹斜恚?首先，我們要以對段落的相同方式應(yīng)用標(biāo)準(zhǔn)外邊距。 這使得斷點(diǎn)與內(nèi)容的斷點(diǎn)保持一致性。

現(xiàn)在開始變得容易了！ 如果您在其他地方定義的行高仍為15px，那么您的列表將與其余內(nèi)容好匹配。

由于我們的行高是在父元素的CSS中定義的，我們只需要定義外邊距，使得列表在基線網(wǎng)格系統(tǒng)中運(yùn)行。

圖片

圖像是開始變得有點(diǎn)困難的地方。 最好的情況下，我們希望外邊距具有相同的一致性，因此圖像被視為與文本塊相同（與文本塊的頂部與底部對齊）。 這意味著你的圖像需要為你的行高值的整數(shù)倍，在個(gè)例子中，是15的整數(shù)倍。

在我的例子中，我使圖像浮動(dòng)到右邊，所以我有一個(gè)15px外邊距應(yīng)用于左側(cè)和底部。 與段落并排在現(xiàn)有的外邊距下方，這給了我們一個(gè)統(tǒng)一的外邊距。

當(dāng)然，這些不是我們需要修改以符合我們的新基線網(wǎng)格的唯一元素。 關(guān)鍵是要確保你在一個(gè)一致的增量內(nèi)工作，所以一切都被限制在同一個(gè)網(wǎng)格。 這可以在整個(gè)網(wǎng)頁中，使用大的文本框架時(shí)，使得和諧與平衡變得更明顯。

我們的例子

這里是我們完成的例子，一個(gè)簡單的網(wǎng)頁，包括段落，標(biāo)題，圖像和列表。 如果你使用你自己的規(guī)則，這是可以的，但我可以向你保證，在我們的活版印刷中，一切都遵循一致的網(wǎng)格。

我們只是破壞了使用基線網(wǎng)格的表面。 當(dāng)你開始嘗試將它們應(yīng)用到更復(fù)雜的設(shè)計(jì)時(shí)，它可能會變得更加困難，最終幾乎不會在網(wǎng)絡(luò)上使用。 然而，它可能并且可以創(chuàng)造一個(gè)平衡的，成比例的設(shè)計(jì)，其可以有助于更好的終端用戶體驗(yàn)。

結(jié)論

基線網(wǎng)格是為您的排版添加一些平衡和比例的好方法。 這是一些微妙的措施，可以在你的設(shè)計(jì)中添加一些自然的感覺。 在基線網(wǎng)格的情況下，我們的排版使用一致的標(biāo)準(zhǔn)間距，賦予它和諧的感覺。

然而，不幸的是，我們?nèi)匀槐仨毰c瀏覽器不兼容的威脅作斗爭，當(dāng)用戶在可選的瀏覽器、操作系統(tǒng)或設(shè)備上瀏覽時(shí)，這可以使CSS渲染得方式不一致。 這看起來不是CSS的一個(gè)任務(wù)，雖然添加基線網(wǎng)格確實(shí)提供了其他優(yōu)勢。 例如，這種類型的網(wǎng)格系統(tǒng)在縮放時(shí)可以提供巨大的幫助，因?yàn)樗仁篂g覽器重新渲染它的CSS。 基準(zhǔn)網(wǎng)格提供了一些更多的靈活性，鼓勵(lì)瀏覽器正確做事情。

這是一個(gè)比平常更短的文章，因?yàn)榛€網(wǎng)格實(shí)在是沒有很多解釋或顯示如何使用。 真正的魔法來自于設(shè)計(jì)師調(diào)整和測試，以確保他的基線網(wǎng)格能工作，并且，最重要的是，賦予其設(shè)計(jì)視覺吸引力。

創(chuàng)新互聯(lián)專業(yè)從事成都網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計(jì)，成都網(wǎng)站制作

分享文章：設(shè)置網(wǎng)頁文字為一個(gè)基線網(wǎng)格_成都網(wǎng)站建設(shè)_創(chuàng)新互聯(lián)
本文地址：http://www.rwnh.cn/news/222724.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

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