響應(yīng)式網(wǎng)站字體大小指南

時間：2023-09-29 23:42:01 | 來源：網(wǎng)站運營

時間：2023-09-29 23:42:01 來源：網(wǎng)站運營

響應(yīng)式網(wǎng)站字體大小指南：移動網(wǎng)絡(luò)排版指南

如果您正在設(shè)計可在移動設(shè)備上的網(wǎng)站或應(yīng)用，則只有一條硬性規(guī)則：使用至少16px大小的文本輸入字體。如果文本輸入的字體大小小于此值，iOS瀏覽器將放大文本輸入的左側(cè)，通常會遮擋右側(cè)并強(qiáng)制用戶在使用文本框后手動縮小。

下圖就是發(fā)生這種情況的例子：

移動網(wǎng)絡(luò)里關(guān)于字體大小的所有內(nèi)容基本上都遵循一個指導(dǎo)原則：

使用大約16px的正文字體大小。當(dāng)您希望手機(jī)上的正文與印刷良好的書中文本一樣可讀時，對于輔助文本，不重要的標(biāo)簽和標(biāo)題，請使用較小的一些尺寸 – 例如13px或14px。我不建議只使用一種字體大小，因為它太容易與普通文本混淆。當(dāng)文本不那么重要時，您需要對其進(jìn)行樣式設(shè)置，以便清楚地傳達(dá)較不重要的內(nèi)容。

黃金標(biāo)準(zhǔn)將在實際設(shè)備上查看您的設(shè)計。我不能高度推薦這種做法，因為筆記本電腦屏幕上的移動應(yīng)用程序設(shè)計的感覺與您手持它時的方式不同。作為初始設(shè)計師，幾乎每次我在移動設(shè)備上打開我在桌面上設(shè)計的頁面時，我都感到震驚。字體大小，間距……一切都沒了。因此，請使用Sketch Mirror或Figma Mirror或任何適合您的應(yīng)用程序，并在設(shè)備上查看您的設(shè)計。

對于有關(guān)移動Web字體大小的任何其他問題，請參閱材料設(shè)計指南，該指南清晰，一致且巧妙（盡管不簡潔）。我作為設(shè)計師的年齡越大，我就越相信即使蘋果公司擁有所有的設(shè)計信譽，谷歌正在走遍它們。

桌面網(wǎng)絡(luò)排版指南

在為桌面網(wǎng)站或Web應(yīng)用程序選擇基本大小時，您可以將大多數(shù)設(shè)計分解為以下兩種類型之一：1.文字很重要的頁面。文章，博客，新聞等。這些是用戶在頁面上的主要目的是閱讀的頁面?；臃矫婧苌?– 也許只需點擊幾個鏈接。2.Interaction-heavy pages。涉及更多懸停，點擊，搜索列表或表格中的項目，編輯，打字等的應(yīng)用程序。頁面上可能有大量文本，但這不是您直接閱讀的書籍。需要一兩個例子嗎？此頁面是一個文本密集的頁面。您的Facebook Feed是一個交互密集的頁面。每個問題都略有不同，所以我會分別處理它們。請記住，兩者都可能有用。瘋狂的網(wǎng)絡(luò)應(yīng)用程序的“關(guān)于”頁面仍然是文本繁重的。香草博客上的“聯(lián)系”頁面仍然很重要。

簡而言之，對于文本較多的頁面，字體大小要更大。如果人們長時間閱讀，不要讓他們產(chǎn)生緊張的情緒?，F(xiàn)在，每種字體都不同，即使尺寸相同。我們正在談?wù)撘韵聨追N字體大?。?br>
16px – 文本較多頁面的絕對最小值。

18px – 一個更好的字體大小的開始。你不打印出單行間隔的Word文檔; 你是為那些坐在離他們十年前的監(jiān)視器幾英尺遠(yuǎn)的人們寫的。

20px – 起初可能會感覺很笨，但總是值得在您的設(shè)計應(yīng)用中嘗試。網(wǎng)絡(luò)上看起來最好看的文字較多的網(wǎng)站，默認(rèn)文章大小為21px。

總之在您設(shè)計交互式桌面網(wǎng)站時，請記住這一點。您需要根據(jù)具體情況修改文本樣式。一致性很棒，但是當(dāng)字體大小只有一個px太小時，當(dāng)他們無法輕易找到他們正在尋找的東西時，他們的體驗會很糟糕。

易點科技成立于2009年，一直專注于IT顧問咨詢、信息平臺系統(tǒng)開發(fā)、企業(yè)網(wǎng)絡(luò)方案解決與運營。服務(wù)內(nèi)容包含pc+手機(jī)響應(yīng)網(wǎng)站建設(shè)、B2C購物商城定制開發(fā)、微信公眾號定制開發(fā)、企業(yè)管理小型系統(tǒng)定制開發(fā)。擁有先進(jìn)的網(wǎng)頁設(shè)計制作理念、可靠的質(zhì)量保障體系。十年專注！已服務(wù)過數(shù)百家知名品牌企業(yè),積累了眾多行業(yè)標(biāo)桿級的經(jīng)典案例。