15 Thuật ngữ thiết kế rất dễ bị nhầm lẫn cho người không chuyên

Thỉnh thoảng bạn hay nghe designer nói về các thuật ngữ sang chảnh trong thiết kế, nhưng chúng ta đã hiểu đúng nó chưa? Đó là một câu hỏi hay, bởi vậy hôm nay, chúng ta sẽ cùng nhau đi qua 15 thuật ngữ thiết kế mà chúng ta hay nhầm lẫn nhất! Ok triển nào!

  1. Font vs. Typeface
  2. Lettering vs. Calligraphy
  3. Leading vs. Tracking vs. Kerning
  4. Vector vs. Raster
  5. Dodge vs. Burn
  6. Opacity vs. Translucency
  7. Opacity vs. Fill (Photoshop)
  8. Letterpress vs Engraving
  9. Negative Space vs. White Space
  10. OTF vs. TTF
  11. Rem vs. Em vs. Px
  12. PPI vs. DPI
  13. Trim vs. Crop vs. Bleed
  14. X-height vs. Line height
  15. Italic vs. Oblique

1. Thuật ngữ Font vs. Typeface

Typeface hay còn gọi là Font family, kiểu chữ, là một bộ các chữ cái có cùng điểm chung trong thiết kế. Nói cách khác, mỗi typeface là tập hợp các ký tự, mỗi ký tự đại diện cho một chữ cái, số, dấu câu và các biểu tượng khác. Như trên đã nói, typeface khác với font, điều sẽ trở nên rõ ràng hơn khi đề cập đến định nghĩa về font.

Theo định nghĩa truyền thống, thì một font là một bộ chữ cái thuộc một typeface với kích thước và định dạng xác định. Nói dễ hiểu, thì 8pt-Arial và 10pt-Arial là hai font khác nhau, cũng như Arial Bold và Arial Italic cũng là hai font khác nhau.

Tuy nhiên vào thời kỹ thuật điện tử phát triển, với sự ra đời của font máy tính thì định nghĩa của font cũng bị biến đổi, do trên máy tính việc thay đổi kích cỡ của một bộ chữ trở nên đơn giản hơn bao giờ hết, vì các font được định dạng vector, có thể phóng to, thu nhỏ tuỳ ý.

Chính vì vậy, định nghĩa về font được rút lại chỉ còn là một bộ chữ cái thuộc cùng typeface với định dạng xác định. Nói cách khác, 8pt-Arial và 10pt-Arial bây giờ là thuộc cùng 1 typeface (vẫn là một font), nhưng Arial Bold và Arial Italic là hai font khác nhau.

Tóm lại, typeface là một định nghĩa rộng hơn, nó bao trùm khái niệm font vì nó không chịu giới hạn về kích thước cũng như định dạng. Chúng ta có thể nói là sử dụng typeface Arial kích thước 10pt với định dạng Bold Italic, nhưng nếu dùng khái niệm font thì phải nói là sử dụng font Arial Bold Italic với kích thước 10pt (thậm chí là sử dụng font 10pt-Arial Bold Italic theo định nghĩa truyền thống).

2. Thuật ngữ Lettering vs. Calligraphy

Theo cách hiểu đơn giản nhất, calligraphy là về kỹ năng viết, cách sử dụng công cụ (các loại bút, màu vẽ) để tạo ra chữ (thư pháp) ngay tại chỗ, những con chữ có luật riêng của nó. Còn lettering là trình diễn chữ, bạn có thể sử dụng bất kỳ công cụ nào (từ các công cụ thô như bút, kéo, màu vẽ…cho đến các phần mềm đồ hoạ như Adobe Illustrator).

Khi nhắc đến calligraphy có nghĩa là nghệ thuật viết chữ, những con chữ sẽ được bạn tạo ra ngay tại chỗ, nó phụ thuộc vào cảm xúc mỗi khi bạn đặt bút xuống, dựa trên những quy tắc viết cực kỳ nghiêm ngặt, bạn không thể viết “thư pháp” bằng máy tính mà chỉ có thể mô phỏng nó.

Đối với lettering, chúng ta lại đang đề cập đến khái niệm VẼ CHỮ, chứ không phải là viết chữ, sắp xếp bố cục, trình bày chữ sao cho bắt mắt trên các phương tiện online (truyện tranh cũng là lettering), chúng ta toàn quyền tự do sáng tạo bất kỳ hình dạng nào mà chúng ta thấy phù hợp với mục đích đề ra.

3. Thuật ngữ Leading vs. Tracking vs. Kerning

leading, tracking và kerning là gì

Leading: khoảng cách theo chiều dọc đặt giữa mỗi dòng chữ. Leading càng nhỏ, các câu càng gần nhau và ngược lại. Trên nhiều chữ cái, bạn có một chữ viết tắt – ví dụ chữ “Q” – hoặc chữ viết tắt – chữ thường “B” – và giữa hai chữ cái là đường cơ sở, nơi đặt đáy của phần chính của chữ cái. Leading được đo lường dựa trên những yếu tố đó.

Bạn có thể điều chỉnh Leading trong Photoshop và AI qua thông hình sau

Kerning: là khoảng cách giữa các chữ cái riêng lẻ. Trong một số trường hợp, bạn muốn kéo khoảng cách giữa hai chữ cái để nó trông bắt mắt hơn, nhưng vào những lúc khác bạn lại muốn nới rộng nó ra cho dễ đọc.

Bạn có thể điều chỉnh Kerning trong Photoshop và AI qua thông hình sau

Tracking: cũng khá giống với Kerning, nhưng không hoàn toàn giống. Trong khi Kerning là khoảng cách giữa các chữ cái riêng lẻ, Tracking là khoảng cách của toàn bộ một từ. Có nghĩa là, nếu bạn tăng hoặc giảm mức tracking trên một từ, nó sẽ trải rộng ra hoặc thắt chặt chiều rộng của một từ.

Bạn có thể điều chỉnh Tracking trong Photoshop và AI qua thông hình sau

4. Thuật ngữ Vector vs. Raster

Vector và raster

Mình có viết một bài dài hơn nói kỹ về hai khái niệm này, nó gắn với hai phần mềm đồ hoạ nổi tiếng là Adobe Photoshop và Adobe Illustrator.

Trong các bài phát biểu của mình Apple luôn trình bày về số Pixel của màn hình điện thoại của họ. Những pixel này tạo thành hình ảnh trên màn hình, đặc biệt là các bức ảnh trên internet và những thứ tương tự được gọi là hình ảnh “raster”. Bất kỳ các định dạng jpeg, tiff, bmp, png hoặc gif mà bạn thấy là một file raster và người dùng Photoshop chủ yếu xử lý đồ họa raster.

Một đồ họa vector không dựa trên pixel, mà thay vào đó dựa trên toán học. Bởi vậy nó có thể kéo dãn phóng to thu nhỏ ở bất kỳ kích thước nào mà không hề ảnh hưởng đến chất lượng hiển thị. Bạn thường sẽ gặp đồ họa vector chủ yếu ở các font (bạn kéo bự cỡ nào tỉ lệ chữ vẫn vậy) và logo, bởi vì cả hai đều cần sắc nét cho dù chúng có kích thước như thế nào.

5. Thuật ngữ Dodge vs. Burn

Hai thuật ngữ này xuất phát từ kỹ thuật chụp ảnh film ở những năm 2000 để điều chỉnh độ sáng tối cho bức ảnh. Vào thời điểm đó nếu bạn muốn làm cho hình ảnh sáng hơn (dodge), bạn sẽ phơi sáng một số phần nhất định của ảnh trong thời gian ngắn hơn để làm cho nó sáng hơn.

Nếu bạn muốn làm ảnh tối đi (burn), hãy làm ngược lại, phơi sáng một số phần nhất định trong thời gian dài hơn để nó tối hơn. Ngày nay, những thuật ngữ tương tự được sử dụng trong Photoshop. Nếu bạn muốn làm sáng một hình ảnh, bạn có thể thêm một layer dodge và để làm tối hãy thêm một layer burn.

6. Thuật ngữ Opacity vs. Translucency

Opacity gần với khái niệm độ trong suốt, tức là nếu bạn giảm chỉ số này xuống còn 0 thì chúng ta có thể nhìn xuyên qua rõ ràng và dễ dàng. Nhưng Translucency lại khác.

Nó là một khái niệm về “độ mờ” của vật thể trong thực tế, độ trong suốt của một vật thể như lăng kính, khi ánh sáng đi vào vật thể này sẽ xảy ra hiện tượng tán xạ và khúc xạ ánh sáng trong các tinh thể của vật thể, làm cho chúng ta không thể nhìn rõ mọi vật, mọi thứ bị bóp méo hoặc không thể nhìn thấy.

Nó giống như cánh cửa nhà vệ sinh có lắp kiếng mờ đó các bạn (mọi thứ mờ ảo bạn không thể nhìn xuyên qua nhưng nó vẫn cho ánh sáng đi qua). Translucency là như vậy!

7. Thuật ngữ Opacity vs. Fill (Photoshop)

Opacity và fill

Rất dễ nhầm lẫn hai thứ này với nhau. Nếu bạn có một đối tượng và bạn muốn giảm độ trong suốt của nó thì cơ bản trong trường hợp này hai cái giống nhau. Cả hai đều làm giảm khả năng hiển thị của hình ảnh.

Tuy nhiên, khi bạn chọn Fill để điều chỉnh mức độ hiển thị thì nó không ảnh hưởng đến bất kỳ hiệu ứng nào được áp dụng cho đối tượng. Vì vậy, nếu bạn có một đường viền (stroke) hoặc bạn đổ bóng (shadow) xung quanh chữ chẳng hạn, nó sẽ không thay đổi chút nào – chỉ có phần nằm giữa đường bao của các đối tượng mới bị ảnh hưởng.

Nếu bạn làm điều tương tự với Opacity, cả đối tượng và hiệu ứng đi kèm sẽ mờ dần cùng nhau. Video này của Cindy Lemons cho thấy sự khác nhau đó khá rõ ràng.

8. Thuật ngữ Letterpress vs Engraving

letterpress và engraving

Nếu bạn google những từ này thì đa phần nó chỉ hiện ra thiệp cưới…! Để mình nói rõ sự khác nhau này:

Letterpress là một kỹ thuật/phương pháp in ấn (còn được gọi là phương pháp in nổi), những phần cần in sẽ được nâng lên cao hơn những phần không phải in hình ảnh lên trên tờ giấy, sau đó máy sẽ dùng áp lực đẩy mực vào những chỗ lồi lên đó trong khi phần không có hình ảnh sẽ không có mực.

Engraving là kỹ thuật chạm khắc nổi được làm với nguyên tắc gần như tương tự letterpress, phần chữ và các hình ảnh đồ hoạ sẽ nổi lên trên vật thể hoặc trang giấy. Và chạm khắc cần rất nhiều áp lực từ máy móc. Điểm khác nhau là chạm khắc sẽ in hằn lên vật thể những nếp dập, bạn nhìn mặt sau là biết ngay, trong khi in ấn thì mọi thứ vẫn nhìn thấy phẳng (nếu bạn chọn loại giấy dày, giấy mỏng quá cũng không dùng để in vì sẽ bay hết mực trong thời gian ngắn).

9. Thuật ngữ Negative Space vs. White Space

Negative space và white space

Đây thực sự là một khái niệm rất phức tạp và cực kỳ dễ nhầm lẫn!

Nó đã được trải qua khá nhiều thời kỳ với nhiều tên gọi khác nhau dùng cho hai thuật ngữ này, và bạn sẽ rất ngạc nhiên về nó.

…Thật ra nó là một thôi bạn trẻ ạ :))

10. Thuật ngữ OTF vs. TTF

TTF là viết tắt của TrueType Format, đã xuất hiện từ cuối những năm 80. Mỗi font có một phiên bản cho màn hình và máy in, điều đó có nghĩa là bạn không thể cài đặt hai phiên bản khác nhau của cùng một font được.

OTF là OpenType Format, và đây là loại font mới nhất và lớn nhất hiện giờ. Về cơ bản, đó là TTF được nâng cấp lên; nó có cùng khả năng như TTF nhưng nó cũng hỗ trợ các bộ ký tự mở rộng. Ví dụ ở hình bên trên, cùng một từ có thể được thể hiện bằng nhiều phiên bản dù sử dụng vẫn những chữ cái đó. Đó là lợi thế của font OTF.

11. thuật ngữ Rem vs. Em vs. Px

Rem, em và pixel là gì?

Tất cả những thứ này đều có liên quan đến hai thứ: CSS và kích thước trên website.

Các pixel theo thuật ngữ CSS là một phép đo góc phi tuyến tính (nếu bạn nhấp vào liên kết và bạn không thích toán học, bạn có thể có cảm giác: mình đang đọc cái quái gì vậy?!!). Nếu bạn đang đo mọi thứ bằng pixel (px), thì bạn đang sử dụng một đơn vị đo tuyệt đối. Điều đó không có nghĩa là những gì bạn thấy trên iPhone sẽ giống như trên laptop của bạn, vì px không phải lúc nào cũng được sử dụng giống nhau từ thiết bị này đến thiết bị khác, nhưng chúng là đơn vị tuyệt đối.

Em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size. Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.

Rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Cũng như em, nếu bạn khai báo font-size cho thẻ <html> là 16px thì 1rem = 16px.

Kích thước font chữ ảnh hưởng khá nhiều đến thiết kế của một website. Vì thế ta nên sử dụng Rem, Em để đảm bảo với bất kỳ kích thước font chữ nào người dùng thiết lập thì bố cục trang web của bạn cũng sẽ điều chỉnh phù hợp với kích thước font đó.

Ví dụ trên các trình duyệt phổ biến, kích thước font mặc định là 16px. Do dó thiết kế ban đầu của website sẽ tập trung và kích thước đó, giúp cho website liền mạch và “dễ nhìn” hơn. Tuy nhiên nếu ta cứ dùng px mãi thì nếu một người dùng nào đó mang website của bạn và hiển thị nó trên một màn hình lớn hơn và tăng kích thương font lên đễ dễ nhìn, bạn sẽ thấy cấu trúc trang web của bạn đã bị lộn xộn. Vì thế bằng các sử dụng rem hay em, bố cục sẽ vẫn được bảo toàn và có thể được điều chỉnh một cách linh hoạt.

12. Thuật ngữ PPI vs. DPI

Theo cách hiểu đơn giản nhất, PPI là pixel per inch (số pixel trên mỗi inch) và DPI là Dot per inch (số chấm điểm trên mỗi inch). DPI ban đầu là một thuật ngữ in ấn và nó đề cập đến số lượng mực in mà máy in có thể đặt vào một inch vật liệu in. Một hình ảnh 300-DPI là siêu sạch và chi tiết, trong khi 72-DPI, không quá nhiều. PPI là từ màn hình máy tính và nó cũng đếm số pixel có thể được đặt vào một inch màn hình.

Ví dụ bạn đang nhìn vào màn hình Dell 27 inch ngay bây giờ và nó có PPI là 109. Điều đó có nghĩa là cứ 1 inch trên màn hình của bạn, sẽ xuất hiện 109 pixel. Nếu quy đổi theo pixel, màn hình của bạn có độ phân giải 2560X1440. Nếu bạn tạo một vật thể cao và rộng 109px, nó sẽ hiển thị đẹp và rõ ràng trên màn hình của bạn và với độ chính xác là 1 inch x 1 inch. Nhưng nếu bạn chọn chiếc MacBook Air 13 inch, nhưng nó lại hiển thị ở mức 128 PPI (mức độ hiển thị cao hơn cái màn hình Dell 27 inch), điều đó có nghĩa là hình vuông 109px của bạn sẽ nhỏ hơn một inch trên máy Mac.

DPI cũng gần tương tự như vậy nhưng dành cho thiết bị in ấn.

DPI chỉ là một khía cạnh kỹ thuật của máy in, giống như độ phân giải pixel trên màn hình máy tính. Bạn không thể kiểm soát DPI. Tất cả những gì bạn có thể làm tìm đến một tiệm in chuyên nghiệp, nơi mà họ hiểu rõ về những đặc điểm kỹ thuật của thiết bị để có thể in ra những sản phẩm chất lượng nhất.

13. Thuật ngữ Trim vs. Crop vs. Bleed

Trim, crop và bleed

Ba thuật ngữ này đều có nguồn gốc từ in ấn.

Trong Photoshop, nếu bạn muốn loại bỏ một vùng nào đó bên ngoài rìa hình ảnh của mình, bạn có thể sử dụng lệnh Trim. Tuy nhiên, với Trim bạn đang cắt xén theo kiểu tự động dựa trên các giá trị pixel được tìm thấy ở rìa ảnh, thay vì đưa ra lựa chọn cụ thể như Crop. Crop là bạn làm nổi bật phần của đối tượng mà bạn muốn giữ và mọi thứ bên ngoài các đường crop sẽ được loại bỏ. Chúng tương đối giống nhau.

Trong Photoshop lệnh Trim (chọn trên thanh menu > Image) sẽ phá huỷ hình ảnh. Còn công cụ Crop sẽ cho bạn lựa chọn quay lại nếu lỡ Crop nhầm.

Giả sử bạn muốn in một số danh thiếp. Nếu bạn đang sử dụng một mẫu như mẫu ở hình trên, nó sẽ có một khu vực “bleed”. Đây là khu vực sẽ được cắt bớt khi danh thiếp được in xong. Nếu không có nó, mực sẽ không in hết ra rìa và bạn sẽ có phần gần với viền bưu thiếp bị nhem nhuốc không đều màu.

14. Thuật ngữ X-height vs. Line height

X-height và line height

Line height liên quan đến chiều cao của một dòng được chỉ định bởi chương trình thiết kế hoặc trình duyệt web của bạn. Đó là một đơn vị đo chiều dọc và nó có thể được điều chỉnh bằng cách điều chỉnh Leading (đọc lại phần leading ở phần đầu bài nhé).

X-height là chiều cao của chữ cái “x” (ghi thường chứ không ghi hoa) trong bất kỳ font nào. Tại sao lại như vậy? Các phông chữ được đo theo kích thước điểm (point size), đi từ đỉnh của ký tự cao nhất phía trên đường cơ sở, sau đó xuống đến mức thấp nhất từ cùng một điểm.

Khi chúng ta đọc, hầu hết các chữ cái đều là chữ thường và các tỷ lệ đó thay đổi tùy thuộc vào font bạn đang sử dụng. Bằng cách tham khảo X-height, bạn biết font có dễ đọc ở các kích cỡ khác nhau hay không.

15. Thuật ngữ Italic vs. Oblique

Italic và oblique

Hai thứ này rất dễ bị nhầm lẫn. Lấy một font chữ, và nghiêng nó ở một góc; bây giờ là một phiên bản xiên của phông chữ đây là Oblique. Bây giờ lấy một font chữ, nghiêng nó ở một góc và thay đổi một số ký tự để làm cho nó nhìn đẹp hơn và nghệ thuật hơn đó là Italic.

Oblique là bắt mọi chữ cái trong font nghiêng cùng một góc mà không thay đổi gì cả (bạn chỉ đơn giản là transform nó), trong khi Italic là một phiên bản bổ sung của font gốc, nhưng ở một góc nghiêng xác định.


Mình hy vọng bài viết này có thể giải đáp thật nhiều thắc mắc của các bạn về các khái niệm dễ bị nhầm lẫn. Mình có còn thiếu khái niệm nào hay có sai sót gì không, hãy comment cho mình biết nhé 🙂

Tan-Avatar-author

Lê Đình Tân

Founder của Leap Content - marketing nerd. Sở thích: đọc và tự mày mò những thứ hay ho một mình. Về cơ bản, là người chịu trách nhiệm để mọi bài post ở Leap Content đều "trên cả tuyệt vời". Tìm hiểu thêm về Tân ở đây.

Cùng thảo luận nào!

Email của bạn sẽ được giữ kín. Những phần bắt buộc có đánh dấu *.

15 Thuật ngữ thiết kế rất dễ bị nhầm lẫn cho người không chuyên