目錄
1. 高級感和傳統感
2. 親近感和柔和感
3. 未來性與科技感
4. 情懷感與復古感
5. 裝飾性與華麗感
6. 傳統文化
7. 嚴謹感與信賴感
8. 精致的印象
1.高級感和傳統感
字體結構中，西文的襯線體比無襯線體更有高級感，而中文宋體要比黑體字更有傳統感。襯線體大多由曲線組成的，雖然只有很小的曲線組成，但這些曲線搭配出的字體，卻能營造出柔美而華麗的美感。
另外想要營造出“高級感”，應要在文字周圍多留一些白；在顏色的處理上也不能過于艷麗，降低明度與純度營造一種沉穩的感覺；文字與文字的距離也不能過窄，盡量讓文字之間的距離留多一些白；字號也不能過大，字的顏色要選用灰階色（黑白灰），顏色也不能過于艷麗。
營造高級感也是有一些規則約束的。“配圖沒有高級感”、“字體選用不對”和“文案與圖底關系不明確”都不會營造出高級感。這些知識會做知識保留，以后再我的公眾號里以視頻的形式進行講解。
2.親密感和柔和感
生活中如小刀，錐子和針等尖銳的物體會給人一種緊張感和危險感。文字也會讓人產生同樣的心理。字體線條越纖細，前端越尖銳，給人感覺就越冰冷，危險，難以靠近的感覺。相反的，不管是在自然界還是在生活中所接觸到的人工制品，圓潤的形狀會給人安全，安心，親密的感覺。線條粗大，前端越圓潤的字體，不會讓人感覺到緊張感和危險感。這種字體會給人一種易于親近，柔和，輕松的感覺。
進一步說，如果想加深親密感和柔和感的印象，可以采用類似手寫字的文字設計或樣式。我們知道無襯線體（黑體字）要比襯線體（古典字）更具有冷峻感和機械感。所以用無襯線體不太好營造柔和感，做母嬰類等主調較為柔和的項目時盡量用手寫體和襯線體，來突出與消費者之間的親密感和人文感。如果非要用到無襯線體（黑體字），也要盡量采用幼圓的黑體字來營造柔和感。
3.未來感與科技感
文字的構成要素越簡單，未來感和科技感的感覺就越強烈。表現科技感時，西文的無襯線體要比襯線體更合適，中文的黑體字要比宋體更合適。但要注意的是，別把正文中的文字不斷變得單純化，這樣就不易閱讀。
讓文字的構成顯得更加的簡單，或者直接把文字給圖形化，更能增強具有未來感的感覺。另外配色的顏色使用過多，科技的印象就會變得非常的弱，因此不要用飽和度和明度過高的顏色，最少采取灰階色/消色這類無顏色的配色，整體感覺就更加的和諧。
4.情懷感與復古感
插畫與圖片的質感隨著流行趨勢的變化而變化，文字也要符合時代需求的設計。我們選用字體時需要先清楚那個時代的文化特色，巧妙的掌握流行的走向、轉變設計的特色，就可以設計出符合特定時代的平面視覺設計效果。一般來說具有“情懷感”的文字均有種手寫字的溫暖和柔和感。要注意每種手寫字的風格帶給人的印象也不同。尖銳的手寫字會給人一種理性，思考，判斷等感受；而毛筆字會給人一種灑脫，隨性，創造，感性等感受。
想要文字表現出復古感，就要從文字的歷史角度去考慮，表現復古感就應該采用具有一定歷史的字體。從字體角度來講，采用現代字體（無襯線體或黑體）不能表現出復古感。因此要表現出復古感用具有文化氣息的襯線體和歷史悠久的字體更為合理。另外合理使用一定的復古元素搭配著襯線體，也可以表現出一定的“復古”的感覺，這塊的知識做了保留不會做細節的講解。
5.裝飾性與華麗性
原本文字就是供人閱讀的，但從18世紀后半葉（1750~1800）開始，商家為了吸引客戶眼球就不斷的強化設計的裝飾性，希望文字裝飾的差異與其他店家不同，這樣才能突顯品牌的差異化。從那時候隨著文字功能性的提升，設計性也不斷被重視。為了吸引用戶注意，劇場或店家的廣告牌總是以粗大的文字來表現內容。
而表現華麗感就要體現在裝飾性上。從植物的蔓藤，葉子，羽毛和其他自然景物中取得的靈感，把它們融入到設計中，就可以營造出優美而華麗的感覺。但要注意的是，裝飾性過強的字體不管是用在標題上，還是正文上，都會顯得不易閱讀并較低讀者的可讀性，尤其是在正文字體的選擇上，盡量不要用裝飾性過強的字體。
6.傳統文化
傳統文化指的是歷史文化的沉淀，我國歷史悠久文化源遠流傳，具有代表性的文化傳承是書法五體，即楷、行、草、隸、篆，而楷書又分為歐、顏、柳、趙四種字體，并能讓人感受到很強烈的文人氣息。這里我在多說兩句啊，其實我個人不喜歡日本設計風格和西方設計風格，更喜歡傳承下來的中華傳統文化。由于市場需求的不確定性導致大家過度依賴于西方設計，這個真的沒有辦法。我希望以后越來越多的設計能傳承和弘揚中國藝術與文化，把傳統藝術結合現代藝術與科技來表現出來。日本人和歐洲設計師不斷在中華文化中尋找靈感，并融入到自己的文化當中，然后說這就是“西方的文化”，還對我們抱有偏見，對此我也沒有什么好講的，也不多說了。
除了中國傳統的毛筆字外，日本也有被稱為江戶文字的毛筆字字體，如歌舞伎等劇場廣告牌上縮寫的勘亭流及單口相聲的客寄文字，以及相撲文字，都是為了特定目的而設計的。我對日本傳統文化理解的不深，“勘亭流”和“客寄文字”是什么也不太懂，這里就附加兩張其他的，能體現傳統文化的案例了。
7.嚴謹感和信賴感
較為活潑輕松并充滿現代感的文字，在吸引目光方面效果顯著，但很難讓人感到有一定的信賴感。要想塑造出嚴謹感和信賴感，中文中最好采用宋體這種有歷史沉淀的字體，給人感覺很沉穩可靠，同理西文采用襯線體。
在排版時要注意，要將版面設置得更寬松、文字更易讀一些。像字間距過近、文字在版面上顯得過大，都會給人留下雜亂的印象。另外也要注意，想要營造嚴謹感和信賴感，配色不可過于跳躍，可選用藍色、白色、灰色、深色等較為不搶眼的顏色，給人一種輕松的閱讀體驗。
8.精致的印象
在文字設計方面，比起宋體和襯線體這類歷史悠久的字體，黑體和無襯線體更能給人現代感，利落，清爽的印象。另外，比起粗線條的文字，線條較細的文字能給人留下強烈的纖細感，也相對更細膩精致一些。這里我多說幾句，下圖左面那張圖，正因為字體線條較粗設計師在字體上做了斜體處理，就不會顯得那么男性化和沉穩的力量感。不做斜體處理就太過男性化了，這么處理能表現出“活潑”與“動勢”的感覺，沒有那么死板和呆板。而模特穿著中性的感覺也與整體調性呼應，配色標題以黃色、背景以紅色為主，誘目色突出動感，整體畫面較為和諧。
不論使用哪種文字設計，如果頁面布局過于擁擠，整體的設計看上去就會顯得更沉悶土氣。想解決這個問題就要調整好字號，極力縮減字數，布置的要素盡量力求精簡，盡可能留出更多的白，這樣便能營造出精致的感覺。配色過多也會顯得過于繁雜，要想更好的營造精致感，最好要用灰色來進行處理。
最后要感謝伊達千代前輩的知識分享。
內容改編自《文字設計的原理》- 伊達千代一書
原文地址：站酷
作者：羅耀_平面
]]>overflow
版本：CSS2 兼容性：IE4+ NS6+ 繼承性：無
語法：
overflow : visible | auto | hidden | scroll
參數：
visible : 不剪切內容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切為包含對象的window或frame的大小。并且clip屬性設置將失效
auto : 此為body對象和textarea的默認值。在需要時剪切內容并添加滾動條
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示滾動條
說明：
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
設置textarea對象為hidden值將隱藏其滾動條。
對于table來說，假如table-layout屬性設置為fixed，則td對象支持帶有默認值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那么超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文本溢出到右邊或左邊（視direction屬性設置而定）的單元格。
自IE5開始，此屬性在MAC平臺上可用。
對應的腳本特性為overflow。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
語法：
text-overflow : clip | ellipsis
參數：
clip : 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記（…）
說明：
設置或檢索是否使用一個省略標記（…）標示對象內文本的溢出。
對應的腳本特性為textOverflow。請參閱我編寫的其他書目。
示例：
div { text-overflow : clip; }
代碼：
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>無標題文檔</title>
</head>
<body>
<table width=”100%” border=”1″ cellspacing=”2″ cellpadding=”2″ style=”table-layout:fixed”>
<tr>
<td width=”10%”>s</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td width=”30%”> </td>
</tr>
<tr>
<td>d</td>
<td><div STYLE=”width:60%; overflow:hidden;text-overflow:ellipsis”> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
<td> </td>
</tr>
</table>
</body>
</html>
相信很多人都看過《Mission Impossible 3》了，下面的教程將教你學會如何用Photoshop設計Mission Impossible這樣的文字。
首先建立一個新的文檔，畫布大小為756×768像素。將圖片背景色設置為#1A1A1A，并將調色板前景色設置為白色，在圖片中輸入任意文字，在本教程中我用的字體名稱為：Planet Kosmos。
建立文字后，請按照如下設置文字層的效果：
設置完畢后，你的文字應該是這樣的：
#p#副標題#e#
現在我們需要建立內部的文字。
按住鍵盤的Ctrl鍵同時用鼠標左鍵點擊文字層，該操作將選中文字層。
在菜單中選擇Select>Nodify>Contract（選擇>修改>縮小），將選擇區域縮小4個像素。
建立一個新的層，將調色板前景色設置為#D01A1A，并填充到選擇的區域中。
繼續設置新的一層的層效果：
設置完畢后圖片效果：
Ctrl+鼠標左鍵選擇紅色文字的層，使用Select>Modify>Contract，將選擇區域再縮小一個像素。
建立第三個層，并用白色填充，圖片效果將顯示為：
將層的透明度降低至10%，最終的文字顯示如下圖：
AI CS的強大文字排版功能
在AI以前的版本中，對于長篇的文字排版一直是讓大家頭疼的問題，整篇文章不可以象PM或ID里將文字塊隨意的進行縮短再延續，而需要把文字塊切斷才可以再繼續排列。而伴隨著還有其它關于文字一系列的小問題，這次AI CS對文字的排版功能做了徹底的改進，使得ADOBE公司的軟件在彼此之間的互容性更強大了。下面我就為大家簡單的剖析一下AI CS里的文字排版功能及使用方法。
1.使用文字工具再頁面上隨意的拉出一個文本框。我們仔細觀看這個文本框，會發現在文本框的右下角有一個空白的小方框。（如下圖） 2.接著我們把文字拷貝進文本框里，這時會發現原本在文本框右下角的小方框里出現了一個十字，而且整個小框的顏色顯示變為紅色了，這其實是提示你，由于文字較多，其余部分被隱藏掉了。（用過PM和ID的朋友肯定對這個標記不陌生，這次AI CS就是把這個功能加了進來，使得整個文字排版的功能被大大增加。）
650)this.width=650;” style=”CURSOR: hand” onclick=javascript:window.open(this.src); src=”//images.sj33.cn/uploads/allimg/200605/20060512231631451.jpg” width=650 onload=”javascript:if(this.width>650)this.width=650;” align=absMiddle border=0>
4.接著在畫面上的任一位置點一下就會出現另外一個文本框。這個時候請注意紅色肩頭所指的部分，原來的紅色+號小方框變成了蘭色的帶有一個右側箭頭的小方框，同時上一個文本框與下一個文本框之間卻出現了一個連線。這個其實就是告訴你，現在文本框被分成兩個部分了，但是它們卻還是一個完整的文本聯體，你改變一下上面一個文本框大小會發現隨著上面文本框大小的改變，下面文本框內的文字會自動上升到上一個文本框里，而你壓縮上一個文本框，文字就會自動的降到下一個文本框里。
#p#副標題#e#
5.如果你的文字篇幅比較長的時候，前面第4步的時候，你可以按住ALT鍵，這個時候鼠標會變成一個S型向下的箭頭，按住ALT鍵不要放，你可以在畫面任意的地方連續點擊鼠標，將你的文本徹底的釋放出來，而且所有的文本之間都有連線，你可以根據你的需要隨意編輯任何一個文本框的大小及文字的大小，后面的文字都會隨著你上面的改動而自動調整。
650)this.width=650;” style=”CURSOR: hand” onclick=javascript:window.open(this.src); src=”//images.sj33.cn/uploads/allimg/200605/20060512231635816.jpg” width=650 onload=”javascript:if(this.width>650)this.width=650;” align=absMiddle border=0>
7.接著你就可以隨意的編輯或移動任何一個文本框，也可以選中所有的文本框一起調整位置，并為你的文本配上圖片。這樣你就完成了在AI CS中的長篇文字排列了。大家是不是覺得這個給你的工作帶來了更多的優化？而且熟悉PM與ID的朋友，你們是不是也覺得有這個功能，用AI CS排文字也一樣容易上手？
650)this.width=650;” style=”CURSOR: hand” onclick=javascript:window.open(this.src); src=”//images.sj33.cn/uploads/allimg/200605/20060512231639158.jpg” width=650 onload=”javascript:if(this.width>650)this.width=650;” align=absMiddle border=0>
文字是人類文化的重要組成部分。無論在何種視覺媒體中，文字和圖片都是其兩大構成要素。文字排列組合的好壞，直接影響其版面的視覺傳達效果。因此，文字設計是增強視覺傳達效果，提高作品的訴求力，賦予作版面審美價值的一種重要構成技術。
在計算機普及的現代設計領域，文字的設計的工作很大一部分由計算機代替人腦完成了（很多平面設計軟件中都有制作藝術漢字的引導，以及提供了數十上百種的現成字體）。但設計作品所面對的觀眾始終是人腦而不是電腦，因而，在一些需要涉及人的思維的方面電腦是始終不可替代人腦來完成的，例如創意、審美之類。 在這里，想談一談在平面設計中文字設計的幾條原則及文字的組合應注意的幾點。特別提醒一下，這應該是人腦完成的工作，電腦是無法代替的。
一、文字設計的原則
1． 文字的可讀性：
文字的主要功能是在視覺傳達中向大眾傳達作者的意圖和各種信息，要達到這一目的必須考慮文字的整體訴求效果，給人以清晰的視覺印象。因此，設計中的文字應避免繁雜零亂，使人易認，易懂，切忌為了設計而設計，忘記了文字設計的根本目的是為了更好，更有效的傳達作者的意圖，表達設計的主題和構想意念。
2． 賦予文字個性：
文字的設計要服從于作品的風格特征。文字的設計不能和整個作品的風格特征相脫離，更不能相沖突，否則，就會破壞文字的訴求效果。 一般說來，文字的個性大約可以分為以下幾種：
（1） 端莊秀麗。這一類字體優美清新，
（2） 格調高雅，
（3） 華麗高貴。
（4） 堅固挺拔。字體造型富于力度，
（5） 簡潔爽朗，
（6） 現代感強，
（7） 有很強的視覺沖擊力。
（8） 深沉厚重。字體造型規整，
（9） 具有重量感，
（10） 莊嚴雄偉，
（11） 不
（12） 可動搖。
（13） 歡快輕盈。字體生動活潑，
（14） 跳躍明快，
（15） 節奏感和韻律感都很強，
（16） 給人一種生機盎然的感受。
（17） 蒼勁古樸。這類字體樸素無華，
（18） 飽含古韻，
（19） 能給人一種對逝去時光的回味體驗。
（20） 新穎獨特。字體的造型奇妙，
（21） 不
（22） 同
（23） 一般，
（24） 個性非常突出，
（25） 給人的印象獨特而
（26） 新穎。
3.在視覺上應給人以美感：
在視覺傳達的過程中，文字作為畫面的形象要素之一，具有傳達感情的功能，因而它必須具有視覺上的美感，能夠給人以美的感受。字型設計良好，組合巧妙的文字能使人感到愉快，留下美好的印象，從而獲得良好的心理反應。反之，則使人看后心里不愉快，視覺上難以產生美感，甚至會讓觀眾拒而不看，這樣勢必難以傳達出作者想表現出的意圖和構想。
4.在設計上要富于創造性：
根據作品主題的要求，突出文字設計的個性色彩，創造與眾不同的獨具特色的字體，給人以別開生面的視覺感受，有利于作者設計意圖的表現。設計時，應從字的形態特征與組合上進行探求，不斷修改，反復琢磨，這樣才能創造出富有個性的文字，使其外部形態和設計格調都能喚起人們的審美愉悅感受。
二、文字的組合
文字設計的成功與否，不僅在于字體自身的書寫，同時也在于其運用的排列組合是否得當。如果一件作品中的文字排列不當，擁擠雜亂，缺乏視線流動的順序，不僅會影響字體本身的美感，也不利于觀眾進行有效的閱讀，則難以產生良好的視覺傳達效果。要取得良好的排列效果，關鍵在于找出不同字體之間的內在聯系，對其不同的對立因素予以和諧的組合，在保持其各自的個性特征的同時，又取得整體的協調感。為了造成生動對比的視覺效果，可以從風格、大小、方向、明暗度等方面選擇對比的因素。
但為了達到整體上組合的統一，又需要從風格、大小、方向、明暗度等方面選擇協調相同的因素。 將對比與協調的因素在服從于表達主題的需要下有分寸的運用，能造成既對比又協調的，具有視覺審美價值的文字組合效果。
文字的組合中，要注意以下幾個方面：
1． 人們的閱讀習慣 文字組合的目的，是為了增強其視覺傳達功能，賦予審美情感，誘導人們有興趣的進行閱讀。因此在組合方式上就需要順應人們心理感受的順序。下面，列出人們的一般閱讀順序。
1.水平方向上，人們的視線一般是從左向右流動；垂直方向時，視線一般是從上向下流動；大于45度斜度時，視線是從上而下的；小于45度時，視線是從下向上流動的。
2． 字體的外形特征 不同的字體具有不同的視覺動向，例如：扁體字有左右流動的動感，長體字有上下流動的感覺，斜字有向前或向斜流動的動感。因此在組合時，要充分考慮不同的字體視覺動向上的差異，而進行不同的組合處理。比如：扁體字適合橫向編排組合，長體字適合作豎向的組合，斜體字適合作橫向或傾向的排列。合理運用文字的視覺動向，有利于突出設計的主題，引導觀眾的視線按主次輕重流動。 3． 要有一個設計基調 對作品而言，每一件作品都有其特有的風格。在這個前提下，一個作品版面上的各種不同字體的組合，一定要具有一種符合整個作品風格的風格傾向，形成總體的情調和感情傾向，不能各種文字自成一種風格，各行其是。總的基調應該是整體上的協調和局部的對比，于統一之中又具有靈動的變化，從而具有對比和諧的效果。這樣，整個作品才會產生視覺上的美感，符合人們的欣賞心理。 除了以統一文字個性的方法來達到設計的基調外，也可以從方向性上來形成文字統一的基調，以及色彩方面的心理感覺來達到統一基調的效果等等。
4． 注意負空間的運用 在文字組合上，負空間是指除字體本身所占用的畫面空間之外的空白，即字間距及其周圍空白區域。 文字組合的好壞，很大程度上取決于負空間的運用是否得當。 字的行距應大于字距，否則觀眾的視線難以按一定的方向和順序進行閱讀。 不同類別文字的空間要作適當的集中，并利用空白加以區分。 為了突出不同部分字體的形態特征，應留適當的空白，分類集中。
在有圖片的版面中，文字的組合應相對較為集中。如果是以圖片為主要的訴求要素，則文字應該緊湊地排列在適當的位置上，不可過分變化分散，以免因主題不明而造成視線流動的混亂。 創意是設計者的思維水準的體現，是評價一件設計作品好壞的重要標準。在現代設計領域，一切制作的程序由電腦代勞，使人類的勞動僅限于思維上，這是好事，省卻了許多不必要的工序，為創作提供了更好的條件，但是，在某些必要的階段上，還是不能完全讓電腦來做，人，畢竟是人。
]]>