中文排版規則_非設計師的5條排版規則

中文排版規則

01僅以一種字體開始 (01 Start with only one font)

The first tip for non-designers dealing with typography is simple and will make your life much easier: Stop combining different fonts you like individually and try using only one font in your future compositions.

對于非設計師來說,處理字體的第一個技巧很簡單,它將使您的生活更加輕松:停止組合您喜歡的不同字體,并嘗試在以后的合成中僅使用一種字體。

If you don’t believe me, think for a moment about how many different fonts there are out there. And now think about how many great designers there are, who know exactly how to combine a fancy Merriweather with Montserrat to achieve a combination of tradition and modern aesthetic. So if you are not one of those highly educated or visually proficient people and think Merriweather is an American boxer, you should start to use only one font per design job you are doing.

如果您不相信我,請考慮一下那里有多少種不同的字體。 現在想想有多少位偉大的設計師,他們確切地知道如何將花哨的Merriweather與Montserrat結合起來以實現傳統與現代美學的結合。 因此,如果您不是受過高等教育或視覺熟練的人之一,并且認為Merriweather是美國拳擊手,則應該在您進行的每個設計工作中僅使用一種字體。

A visual comparison between a paragraph with mixed fonts and one with the same font in different styles.
Make your life easier and stick to one font in different weights.
讓您的生活更輕松,并堅持使用不同粗細的一種字體。

Using two different fonts successfully in a layout is hard. It requires an in-depth understanding of the essence in type or an enormous portion of luck. In general, a good rule of thumb is, to avoid two typefaces that look similar to each other and have the same classification. For example, do not use Akzidenz Grotesk and Avenir–two per se excellent sans serif fonts–together in the same design because they share too many similarities to the unskilled eye. If you have to use two different typefaces, try using a mix of serif and sans serif instead. Maybe you were lucky enough and your combination has even been mentioned in this article of Digital Synopsis.

很難在布局中成功使用兩種不同的字體。 它需要對類型的本質或運氣的很大一部分有深入的了解。 通常,一個好的經驗法則是避免兩個看起來彼此相似且具有相同分類的字體。 例如,不要在同一設計中一起使用Akzidenz Grotesk和Avenir(本身就是兩種出色的無襯線字體),因為它們與不熟練的眼睛有太多相似之處。 如果必須使用兩種不同的字體,請嘗試混合使用襯線和無襯線。 也許您很幸運,并且您的組合甚至在“ 數字概要”的這篇文章中被提及。

If you do not want to make your fortune dependent on chance and you aren’t familiar with the art of fresh typography and the decision-making process behind font-matching, just stick to your favourite font family. And make sure it comes with various weights to differentiate your heading and subheading from your body text without concerns.

如果您不想讓自己的命運取決于偶然性,并且您不熟悉新鮮的排版藝術以及字體匹配背后的決策過程,那么請堅持使用您喜歡的字體家族。 并確保它帶有各種權重,以使您的標題和小標題與正文毫無區別。

However, the next rule is going to help you with that.

但是,下一條規則將幫助您。

02只使用這十種字體 (02 Only use these ten fonts)

Most of the time we aren’t truly aware of the fonts that accompany us through our days. If you are a designer, the search for good typefaces is something like a scavenger hunt. Simply because there are so many great fonts out there, waiting to be used — I talk about you, delicious Inter. But most of us have like 1000+ fonts on their machines, some may have been never used, always sticking to the same set of five to ten typefaces for a reason.

在大多數情況下,我們并沒有真正意識到過去伴隨我們的字體。 如果您是設計師,那么尋找優質的字體就像尋寶游戲一樣。 僅僅是因為那里有很多很棒的字體在等待使用-我談論您, 美味的Inter 。 但是我們大多數人在他們的機器上喜歡1000多種字體,有些可能從未使用過,出于某種原因總是堅持使用相同的5到10種字體。

If you are always in the veld, chasing your next .tff download you potentially forget about the important things in life: creating stuff. I want to make your work easier here and show you the top 10 classic typefaces you can always use when in doubt:

如果您始終不知所措,那么追逐您的下一個.tff下載文件可能會讓您忘記生活中的重要事情:創造東西。 我想在這里簡化您的工作,并向您展示在有疑問時可以使用的十大經典字體:

A list of 10 typefaces you should use in the beginning like Bodoni, Baskerville, Garamond, Sabon and Times New Roman.
Choose any font you like … as long it belongs to this list.
選擇您喜歡的任何字體...只要它屬于此列表。

If you don’t know the difference between Serif and Sans serif, “sans” simply means “without” and serifs are small lines or strokes attached to the end of a larger stroke. You know Arial, right? That is a typical Sans Serif typeface — Times New Roman, on the other hand, is a font with serifs. In general, benefits are using both Serif and Sans Serif fonts in different situations. A very simple approach is to use Serif fonts at smaller body copy sizes as they are usually easier to read. While Sans Serif fonts typically really stand out in large titles.

如果您不知道Serif和Sans Serif之間的區別,“ sans”僅表示“無”,而Serif是連接到較大筆畫末尾的細線或筆畫。 你知道Arial,對嗎? 那是典型的Sans Serif字體,另一方面,Times New Roman是帶有襯線的字體。 通常,在不同情況下同時使用Serif和Sans Serif字體是有好處的。 一種非常簡單的方法是在較小的正文副本尺寸上使用Serif字體,因為它們通常更易于閱讀。 雖然Sans Serif字體通常在大標題中真正脫穎而出。

Even in 2020, there is this infamous superstition, that you shouldn’t use serif fonts on a digital screen. This opinion still perseveres because, in the early days of digital design, you would have tried to avoid using serif typefaces on screens because of their small pixel density. However, this argument is no longer valid with today’s technology. You can use every font you like in every scenario you could imagine … as long it’s one of the above mentioned.

即使在2020年,也有這種臭名昭著的迷信,您不應該在數字屏幕上使用襯線字體。 這種觀點仍然存在,因為在數字設計的早期,由于像素密度小,您可能會嘗試避免在屏幕上使用襯線字體。 但是,這種論點在當今的技術中不再有效。 您可以在想像中的每種情況下使用喜歡的每種字體……只要它是上述內容之一。

03點數加倍 (03 Double your point size)

When you start with Web or Interface Design it’s often difficult to determine the font size of headlines, subheadlines, and body text. Yes, you can indeed use your gut feeling, but especially at the beginning, you should follow this simple rule: Always double your point size.

從Web或Interface Design開始時,通常很難確定標題,副標題和正文的字體大小。 是的,您確實可以使用自己的直覺,但是尤其是在開始時,應該遵循以下簡單規則:始終將點大小加倍。

This is a good rule of thumb to make sure you get the right visual contrast between different parts of your design. Always double or halve your point size. So if we set our body text in font size 20, it is a good idea to set headlines at 40 pixels. In special cases, the incrementation can also be done by a factor of 3x or 4x.

這是一個很好的經驗法則,可確保您在設計的不同部分之間獲得正確的視覺對比。 始終將點數加倍或減半。 因此,如果將正文文本設置為字體大小20,則將標題設置為40像素是一個好主意。 在特殊情況下,也可以將系數增加3倍或4倍。

An image with an example paragraph showing how to double the point size in your designs.
When in doubt, try to double your point sizes when sizing type.
如有疑問,請在調整大小時嘗試將點大小加倍。

Of course, this is just a tip for the right start in dealing with sizes in typography. And you don’t have to follow this rule in a sectarian way, you might as well experiment with other factors. Often an analysis of websites that use good type design and that you like can help a lot. To check the fonts of other websites quickly and easily, use chrome extensions like Fonts Ninja.

當然,這只是正確處理字體大小的提示。 而且您不必以宗派的方式遵循此規則,您也可以嘗試其他因素。 通常,對使用良好字體設計且您喜歡的網站進行分析會很有幫助。 要快速,輕松地檢查其他網站的字體,請使用Chrome擴展程序,例如Fonts Ninja 。

There are also other more complex ratios in scaling fonts up and down like “Major Third” and the “Golden Ratio”, that you can check out here with the handy tool Type-Scale. Also, examine the rule of 8dp increments. The “Double your point size” rule is though the most practical and remarkable one in your daily work.

在向上和向下縮放字體時,還有其他更復雜的比例,例如“主要比例”和“黃金比例”,您可以在此處使用方便的Type-Scale工具進行檢查。 另外,檢查8dp增量的規則。 “將您的點數加倍”規則雖然是您日常工作中最實用,最出色的規則。

04對比事項:跳過字體粗細 (04 Contrast matters: Skip font weights)

In the other tips, you have already heard about font weights. To get a better understanding of that term if you’ve never heard of it: The weight of a typeface is the thickness of the outline. While in normal text editing tools like Word there are usually just two font thicknesses (normal and bold), we as designers can choose from a variety of font weights — as long as we have a font family that allows this.

在其他技巧中,您已經聽說過字體粗細。 如果您從未聽說過該術語,則可以更好地理解它:字體的粗細是輪廓的粗細。 盡管在普通的文本編輯工具(如Word)中,通常只有兩種字體粗細(常規和粗體),但作為設計師,我們可以從各種字體粗細中進行選擇-只要我們有允許使用此字體的字體家族即可。

Take Helvetica for example, it’s probably the most loved typeface on planet earth and millions of designers have used it since it’s development in 1957. The problem with this timeless classic though is, that it has only a limited amount of different font weights and the subsequently added weights are not as consistent for example the variants of the font Univers. This is the reason for the success of Helvetica Neue, a new take on of the classic with a more structurally unified set of heights and widths made up of 51 fonts including nine different weights.

以Helvetica為例,它可能是地球上最受歡迎的字體,自1957年問世以來,已經有數百萬設計師使用了它。盡管這個永恒的經典字體存在問題,但它的字體粗細有限,其后例如,增加的權重與Univers字體的變體不一致。 這就是Helvetica Neue成功的原因,Helvetica Neue是經典的新代表,其高度和寬度在結構上更加統一,由51種字體組成,包括9種不同的粗細。

An image, showing the differences in font weights of classic Helvetica and Helvetica Neue.
Helvetica Neue offers much more variety than classic Helvetica.
Helvetica Neue提供的品種比經典Helvetica多得多。

Don’t get me wrong, there are several situations where three font weights are more than enough and Helvetica has proven it’s usability multiple times in the past. But Helvetica Neue allows you to achieve visual contrast much easier, which brings me back to tip four: Skip a font-weight in between.

別誤會我的意思,在某些情況下,三種字體的權重已綽綽有余,而Helvetica過去已多次證明其可用性。 但是Helvetica Neue使您更輕松地獲得視覺對比度,這使我回到了提示四:跳過兩者之間的字體粗細。

What that means is, if you want to have a striking headline and some decent body text, try to format the headline in Bold and the body in Light or even thin of it’s still readable and the font family is offering you the possibility. The reason behind that is visual contrast.

這就是說,如果您想要醒目的標題和一些體面的正文,請嘗試將標題格式設置為粗體,將正文格式設置為淺色,甚至仍然可以理解,并且字體家族仍然為您提供可能性。 其背后的原因是視覺對比。

A comparison between a paragraph with great visual contrast and one with bad visual contrast because of their font weights.
Try to be bold or light, never regular.
嘗試大膽或輕描淡寫,永遠不要常規。

Slight changes in font-weight may often get overlooked by the audience, so to try to catch their eye with diversity and bolden up your typography to make them notice a difference.

字體粗細的細微變化通常可能會被觀眾忽略,因此請嘗試以多樣化吸引他們的注意力,并加粗您的排版以使他們注意到與眾不同。

05注意構圖中的空間 (05 Mind the space in your composition)

A picture with the Apple Slogan “One more thing?…” in white Helvetica on a dark background.

Do you know, why Apple is putting their “one more thing” slogan in tightly kerned Helvetica onto a large screen year and year again completely isolated? Because it is striking. And the reason for that is called white space or negative space.

您知道嗎,為什么蘋果公司將緊緊緊緊圍繞的Helvetica的“另一件事”口號又一次又一次地完全隔離在大屏幕上? 因為令人震驚。 其原因稱為空白或負空格。

For every design work you are doing, whether it’s a magazine or an app, many different visual elements make up the whole layout. And there is one section beside the text, illustrations or images that is invisible. However it is maybe the most important one in terms of visual aesthetic: the white space between your elements, which indicates the presence of a canvas. Design theory promotes the use of negative space for elegance and ensuring a quality user experience.

無論是雜志還是應用程序,對于您進行的每項設計工作,整個布局都包含許多不同的視覺元素。 在文字,插圖或圖像旁邊有一個看不見的部分。 然而,就視覺美感而言,它可能是最重要的一個:元素之間的空白表示畫布的存在。 設計理論促進了負空間的使用,以達到優雅并確保高質量的用戶體驗。

So when in doubt, try to let your layout “breathe” a little by reducing the number of things going on at your canvas. If you stuck in your design process, duplicate the artboard and attempt to reduce a certain section of your composition by half and look at the result. Maybe it sucks, maybe not. It is worth trying.

因此,如果有疑問,請嘗試通過減少畫布上正在進行的事情來讓布局稍微“呼吸”。 如果您陷于設計過程中,請復制畫板,并嘗試將構圖的特定部分縮小一半,然后查看結果。 也許很爛,也許沒有。 值得嘗試。

06獎勵之一:永遠不要使用Comic Sans或Papyrus (06 Bonus one: Never use Comic Sans or Papyrus)

That one was obvious, right? If not, look at how your decisions as a designer can have a significant impact on the lives of others:

那是顯而易見的,對吧? 如果不是,請查看您作為設計師的決定如何對他人的生活產生重大影響:

Watch Ryan Gossling go crazy over AVATARs use of papyrus–the second-worst font in the world.
觀看Ryan Gossling為AVATAR使用紙莎草紙而瘋狂-這是世界上第二大不良字體。

翻譯自: https://uxdesign.cc/5-typography-rules-for-non-designers-7fb72bb40984

中文排版規則

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274386.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274386.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274386.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基本響應性的Web設計測試工具

在重新設計頁面的過程中。要使頁面完全響應的設計(這意味著它會重新調整大小根據瀏覽器的尺寸和方向)。如iPhone和iPad的移動電話和平板電腦我碰到了一些非常方便的響應設計工具,幫我測試網站在不同的屏幕響應。下面的這些響應的網頁設計工具…

ux設計_聲音建議:設計UX聲音的快速指南

ux設計Mating calls, warning grunts, and supportive coos are some of the sounds heard throughout the animal kingdom. All species use finely-tuned noises to communicate to one another and inform others of an action or behavior. We humans aren’t all that dif…

css3高級和低級樣式屬性先后順序

寫css hack 時,由于hack主要針對的是個別瀏覽器,hack的書寫順序應當是從一般到特殊的寫法。 如: .box { width:200px; height:200px; position:fixed; left:0; top:0; _position:absolute; } 如果顛倒順序,從特殊到一般&#xff0…

sans serif_Sans和Serif相遇可愛

sans serifI first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed!我在此推文中首先注意到了它。 我驚呼即將推出的激動人心的產品和令人眼花,亂的動作,“多么迷人…

[ckeditor系列]ckeditor 自己寫的一個簡單的image上傳js 運用iframe的ajax上傳

ckeditor最近修改一個上傳的,原來的Image的上傳插件功能很多,但是自己用,沒有必要,就進行了修改,后來就改成了目前的樣子,根據_samples/api_dialog.html 進行了修改,把頁面里面的調用都進行了修…

sql 避免除0錯誤_設計簡歷時避免這3個常見的UX錯誤

sql 避免除0錯誤重點 (Top highlight)Having a great looking resume on hand is very important when you’re looking for a job. It is your ticket to land the interview that will get you one step closer to that one job you’ve been dreaming of.在找工作時&#xf…

一個網站自動化測試程序的設計與實現

CSDN博客不再經常更新,更多優質文章請來 粉絲聯盟網 FansUnion.cn! (FansUnion) 代碼 下載地址:http://download.csdn.net/detail/fansunion/5018357(免積分) 代碼亮點:可讀性很好,注釋詳盡 背景 工作中,在維護一…

如何編寫數據庫可視化界面_編寫用于數據可視化的替代文本

如何編寫數據庫可視化界面什么是替代文字 (What is Alt Text) Alt text (sometimes called Alt tags or alternative text) are written descriptions added to images that convey the meaning of the visual. Good alt text helps more people understand the content. Assis…

(轉)swc與swf的區別

在Flash Builder中用Actionscript寫的類可以打包成swc或swf, 在Flash CS中制作的元件也可以打包成swc或swf文件, 一個swc或swf文件中可以包含多個類或元件, 每個元件會映射成一個類, 因此,在Flash Builder中的類和在Fl…

js 驗證各種格式類型的正則表達式

<script src"scripts/jquery-1.4.1.js" type"text/javascript"></script> <script language"javascript" type"text/javascript"> /** * 定義驗證各種格式類型的正則表達式對象 */ var Regexs { email: …

reloaddata 跳動_紙跳動像素

reloaddata 跳動I would like to open with a problem.我想開一個問題。 Why are so many designer going straight to pixels?為什么這么多設計師直接使用像素&#xff1f; Over the past few years i’ve witnessed this in my team, my clients and others throughout th…

使用自定義RadioButton和ViewPager實現TabHost效果和帶滑動的頁卡效果。

參考自http://www.apkbus.com/android-86125-1-1.html 這篇文章技術含量一般&#xff0c;大家別見笑。源碼我以測試&#xff0c;在底部可下載。 好了先上效果圖&#xff1a; 以下是實現步驟&#xff1a; 1、準備自定義RadioButton控件的樣式圖片等&#xff0c;就是準…

利益相關者軟件工程_改善開發人員團隊與非技術利益相關者之間交流的方法

利益相關者軟件工程Whether you’re working on a startup or a big company, keeping your stakeholders and non-technical partners engaged and up to date on what the tech team has been building can be hard.無論您是在初創公司還是大公司中工作&#xff0c;都要讓您的…

Hibernate的檢索策略

Hibernate的Session在加載一個Java對象時&#xff0c;可以將與這個對象相關聯的其他Java對象都加載到緩存中&#xff0c;以便程序及時調用。但有些情況下&#xff0c;我們不需要加載太多無用的對象到緩存中&#xff0c;一來這樣會撐爆內存&#xff0c;二來增加了訪問數據庫的次…

響應式網格項目動畫布局_響應式網格及其實際使用方式:常見的UI布局

響應式網格項目動畫布局重點 (Top highlight)第二部分 (Part II) Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web. Responsive grids are a method to systematically align your des…

SQL函數大全

SQL函數大全 --聚合函數use pubsgoselect avg(distinct price) --算平均數from titleswhere typebusinessgo use pubsgoselect max(ytd_sales) --最大數from titlesgo use pubsgoselect min(ytd_sales) --最小數from titlesgo use pubsgoselect type,sum(price),sum(advanc…

時間軸ui設計_我應該在UI設計上花更多時間嗎?

時間軸ui設計Let’s start with an example of communication skills: they are important for any profession, and you expect any professional to have a decent level. However, excellent communication skills won’t make up for the lack of core expertise. Imagine …

一、Oracle介紹

Oracle學習筆記 一、 Oracle介紹 選擇數據庫的標準 項目的規模 負載量多大&#xff0c;用戶量多少 成本 安全性 Oracle 認證 初級&#xff1a;OCA&#xff1a;Oracle Certificated Associate 中級&#xff1a;OCP&#xff1a;Oracle Certificated Professional 高級&#xff…

移動端分步注冊_移動應用程序的可用性測試:分步指南

移動端分步注冊Written by Justin Mifsud由賈斯汀米夫蘇德 ( Justin Mifsud)撰寫 The mobile market is huge and growing at a very fast rate. With an estimated 4.5 billion subscribers worldwide, it is forecasted that the number of mobile phones will surpass the …

ldd隨筆(1)-linux設備模型

一下只是個人學習后的理解&#xff0c;可能有很多不對的地方。 要學習linux的設備驅動模型&#xff0c;首先必須要知道kobject和kset的概念&#xff0c;下面是kobject在2.6.38的源碼中的實現。 struct kobject {const char *name; //名稱&#xff0c;可能在sysfs中創…