Hãy đối mặt với một thực tế rằng mục tiêu cốt lõi nhất của mọi website chính là sự giao tiếp. Bất cứ là một wesbsite bán hàng, một website doanh nghiệp hay một trang xã hội thì Kiểu chữ cũng là một yếu tố quan trọng. Đa số mọi người đều nghĩ đơn giản rằng kiểu chữ là sự sắp xếp những hình dạng quen thuộc dể tạo thành chữ, câu và đoạn văn. Việc này làm chúng ta quên đi mất tính sáng tạo và nghệ thuật của công cụ này.
Có rất nhiều những chướng ngại vật bạn cần vượt qua để có thể có được những font chữ tùy chỉnh hiệu quả trên website – và tôi sẽ nói tới những vấn đề này ở những trang tiếp theo – nhưng tầm quan trọng của font chữ cũng đủ để bạn phải cố gắng vượt qua chúng. Vẫn chưa bị thuyết phục? Hãy xem một tờ tạp chí, mở một kênh truyền hình trên tivi lên, hoặc đi dạo một vòng quanh cửa hàng tạp hóa, bạn sẽ chắc chắn thấy được hàng trăm cách sử dụng kiểu chữ sáng tạo và hiệu quả. Nó là một chiến lược của
xây dưng thương hiệu, những kí hiệu giao tiếp, và là một phần tất yếu của
thiết kế website.
Chủ đề này có thể gây nghiện
Sau khi nghiên cứu một thời gian về font chữ, bạn sẽ không bao giờ nhìn vào một bảng quảng cáo, một tờ brochure hoặc một cuốn sách như bạn nhìn trước đây nữa. Bạn sẽ bắt đầu chụp hình những biển báo, những hình ảnh ngoài công viên nhiều hơn là chụp hình cho con bạn. Bạn sẽ bắt đầu xem xét coi những font chữ trong menu của nhà hàng sử dụng là Cantoria hay là Meyer Two mà quên mất đi cả việc gọi món. Nghiên cứu về Font chữ là một việc mà có đường vào nhưng lại khó có đường ra. Nhớ là bạn đã được cảnh báo rồi đấy.
Để có thể giải mã được cách sử dụng font chữ thì trước tiên chúng ta phải hiểu được nó đã. Phải thừa nhận rằng đây không phải là một điều dễ dàng. Những chi tiết nhỏ nhất và những khoảng trống xung quanh những kí tự alphabet đã dược tính toán, đánh giá và thử nghiệm qua hàng thế kỉ. Vào những thời kì đầu tiên của in ấn, từng chữ trong từng kiểu chữ phải được khắc vào một miếng gỗ hoặc được đúc bằng chì, sau đó được tô mực và cuối cùng mới được in lên giấy. Đây là một quá trình thủ công đòi hỏi sự chính xác tuyệt đối đến từng chi tiết. Cho dù ngày nay quá trình này không còn nữa và đã được thay thế bởi các máy in hiện đại thì nhiều trường đại học và cao đẳng vẫn có những lớp về in ấn thủ công (letterpress) để mà các nhà thiết kế ngày nay biết trân trọng những lợi ích được làm việc với những kiểu chữ trên máy tính và nhìn ra được những tiềm năng trong việc khám phá kiểu chữ.
Đối với tôi thì tình yêu mà tôi dành cho font chữ còn gấp đôi các bạn. Là một nhà thiết kế, tôi thích làm việc với kiểu chữ qua khía cạnh nghệ thuật của nó. Tôi thích những cung bậc cảm xúc, trạng thái khác nhau mà mỗi một kiểu chữ mang lại như trong hình 4.1. Là một lập trình viên, tôi cũng rất thích làm những công việc khó khăn có liên quan tới kiểu chữ. Những sự lựa chọn về font và
màu sắc chỉ mới là phần nổi của tảng băng Kiểu chữ mà thôi. Thực tế thì những quyết định quan trọng trong việc thiết kế kiểu chữ lại liên quan nhiều hơn tới những khoảng không gian xung quanh chúng và những khung chứa hơn là chính bản thân của chữ đó. Nhưng dù thế nào đi chăng nữa thì việc chọn ra được một kiểu chữ phù hợp là một bước quan trọng.
Lịch sử về những sự ứng dụng của kiểu chữ là một chủ đề có thể viết đầy hàng trăm cuốn sách – và thực sự là nó đã đầy được hàng trăm cuốn sách. Mặc dù vậy, trong chương này tôi chỉ sẽ giới thiệu cho bạn ngắn gọn về thế giới của những kiểu chữ. Đầu tiên tôi sẽ đề cập đến những vấn đề - và cả giải pháp nữa – trong việc đưa kiểu chữ vào website. Sau đó, chúng ta sẽ cùng nhau thử nghiệm những thuật ngữ, hướng dẫn trong kiểu chữ và xem xét những đặc điểm của từng font chữ khác nhau. Tôi hy vòng rằng các bạn sẽ thấy chương này bổ ích và truyền cảm hứng được cho bạn. Nếu bạn có thích thú trong việc muốn tìm hiểu sâu hơn về đề tài này thì hãy ghé thăm một vài nguồn sau:
■ The Elements of Typographic Style Applied to the Web, at http://webtypography.net
■ Typophile, at http://typophile.com/
■ I Love Typography, at http://ilovetypography.com
■ Typographica, at http://typographica.org
■ The Font Feed, at http://fontfeed.com/
Đưa kiểu chữ vào website
Khi nói về việc chọn font chữ nào sẽ được hiển thị trên web của bạn thì nó không quan trọng là việc bạn có 5 hay 5000 font chữ khác nhau, điều quan trọng là bạn phải nghĩ ra được một mẫu số chung nhỏ nhất.
Số lượng những font chữ quen thuộc mà được hỗ trợ một cách mặc định trong hầu như mọi hệ điều hành là rất ít. Danh sách ở dưới hình 4.2 đây là 9 font chữ quen thuộc được coi là danh sách an toàn.
Mặt bất lợi của danh sách an toàn này đó là sự hạn chế về tính đa dạng. Nếu bạn cần một font sans-serif tiêu chuẩn thì bạn sẽ phải chọn giữa Arial, Trebuchet MS và Verdana. Đối với những người chưa tiếp xúc nhiều với các font chữ thì những lựa chọn trên trông có vẻ là khá đa dạng rồi nhưng với chúng tôi, những người biết những kiểu font sans-serif khác như Helvetica Neue, Futura, và Univers thì việc sử dụng những font chữ trong danh sách an toàn ở trên giống như là đếm trên đầu ngón tay vậy.
May mắn thay, tính năng font-family trong CSS cho phép bạn chọn nhiều font khác nhau theo thứ tự ưu tiên. Tính năng này còn được gọi tên khác là font stack. Nếu font chữ đầu tiên không được hỗ trợ thì font chữ thứ 2 sẽ được sử dụng; nếu font chữ thứ 2 cũng không có thì font thứ 3 sẽ được sử dụng, và cứ tiếp tục như thế. Ví dụ nếu như bạn muốn cho phần tiêu đề của bạn font chữ serif, bạn nghĩ font đẹp nhất sẽ là Calisto MT, cho nên bạn sẽ định dạng nó là font thứ 1 – cho những người dùng đã cài đặt font này trong máy. Lựa chọn thứ 2 của bạn chính là kế hoạch dự phòng cho lựa chọn một, bạn chọn font Georgia. Nếu những người dung không có font Calisto MT, họ sẽ thấy font Georgia. Cho dù font Georgia nằm trong danh sách an toàn nhưng một vài người có thể vẫn chưa cài font này. Times New Roman là một sự thay thế tối ưu để bạn có thể lựa chọn nó cho font thứ 3 của mình. Để kết thúc danh sách font chữ của bạn và cũng để tiện cho những người dùng mà không có bất cứ font chữ nào trên đây được cài đặt, bạn thêm vào Generic font family. Những Generic font family này là serif, sans-serif, cursive (tương tự như mẫu chữ viết tay), fantasy và monospace. Tất cả những font mà bạn đã chọn từ nãy đến giờ đều nằm trong nhóm font serif. Khi hoàn thành thì Font stack của bạn sẽ trông như thế này:
font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’, serif;
Những tên font có khoảng cách
Nhớ rằng bất cứ tên font nào mà có chứa dấu space trong nó phải được nằm trong dấu ngoặc đơn ‘ hoặc ngoặc kép “.
Điều quan trọng khi bạn tạo một font stack hữu hiệu là phải biết được font nào thông dụng nhất và quan trọng hơn những font khác, font nào được cài mặc định vào các hệ điều hành. Để có thể nắm vững được những điều này, tôi giới thiệu cho bạn một bài viết của Nathan Ford năm 2008, “Building Better Font Stacks.”. Một nguồn để bạn có thể kiểm tra được một font cụ thể nào đó có nằm trong hệ điều hành không là Code Style’s interactive Font Stack Builder.
Thay thế chữ bằng hình
Bây giờ thì bạn đã nằm được những yếu tố font stack rồi. Nhưng nếu bạn muốn người truy cập của bạn phải thấy được một font chữ nhất định thì sao? Trong trường hợp đó thì một giải phải rõ ràng là dựa vào hình ảnh để hiển thị chữ. Đây là cách làm của Adam Akers đã sử dụng trong
thiết kế web của mình, Attack from Planet B, ở hình 4.3. Những chữ ở khung tiêu đề, khung chuyển hướng và những đường link liên kết bạn thấy ở cột bên phải đều được hiển thị ở dạng hình ảnh. Cách này không những giúp cho Adam có được sức mạnh kiểm soát được font chữ của mình mà còn cho anh có khả năng xoay chuyển, làm nghiêng, và bóp méo những font chữ như B Movies. Đáng sợ hơn nữa là các font chữ ở phần nội dung được để font Comic Sans. Tôi không thể đọc bài viết về cá Piranha này mà không tưởng tượng chúng đang được đọc của tiếng Alvin and the Chipminks. Sự thật là nó làm tôi sợ nổi da gà. Tôi đoán đó là mục đích của anh ta.
Một điều quan trọng cần chú ý ở đây là không nên plopping một <img> tag với chữ vào thẳng trong HTML. Cách sử dụng image tag này không đem lại hiệu quả cao và không được tối ưu hóa – bởi vì những người truy cập mà không thể thấy được hình sẽ bị thấy thay vào đó là một khoảng tối đen.
Thay vào đó, bạn sẽ chỉ muốn đánh dấu văn bản của bạn đơn giản là văn bản mà thôi. Lấy cột phía bên phải của trang Attack from Planet B làm ví dụ. Nếu tôi muốn thêm một mục mới – mục “Killer Clowns” vào phía tren của mục “horror” – tôi sẽ mark nó với một đường link đơn giản: một HTML.
Để thay thế với một hình ảnh, tôi sẽ sử dụng CSS để thiết lập một chiều dài và rộng cho hình của tôi, và để chỉnh chế độ display sang block, vì các đường link được mặc định là inline. Sau đó tôi sử dụng một phương pháp có tên là Phark Method. Phương pháp này điều chỉnh hình ảnh của tôi trở thành một hình nền, sau đó thêm vào text-indent với giá trị đủ cao để có thể làm cho nó nổi lên. Một câu lệnh CSS sẽ như ssau:
.clowns {
display:block;
width:300px;
height:150px;
background:url(/images/clowns.png);
text-indent:-9999px;
}
Việc hiển thị chữ thông qua hình ảnh sẽ được sử dụng tốt trong những trường hợp mà các chữ này cố định, nhưng nếu bạn muốn sử dụng một font chữ nhất định mà có tính thường xuyên thay đổi như một tiêu đề hoặc một bài viết tin tưc thì sao? Trong trường hợp này tạo dựng và tải lên một hình ảnh hiển thị chữ sẽ là một nhiệm vụ khó khăn và dễ nhàm chán, cho dù người thiết kế có thành thạo các chương trình chỉnh sửa hình ảnh đi chăng nữa. Nếu bạn đang thiết kế một trang blog cho một khách hàng không biết gì về photoshop hoặc HTML thì lựa chọn này là không phù hợp. Vậy có một cách giải quyết nào không?
Font chữ trên web với @font-face (web fonts with @font-face)
Jason Cranford Teague, tác giả của cuốn sách Fluid Web Typography đã dược hỏi trong một buổi thuyết trình của ông “Điểm chung giữa 3 vật này là gì: xe hơi bay, du hành tới sao Mộc và những font chữ web có thể được tải về?” Câu trả lời là chúng ta sẽ có được tất cả 3 thứ này vào năm 2010. Teague đang bàn về khả năng hiện thị chữ trên website với những font chữ không được hỗ trợ trong máy tính của người truy cập. Kĩ thuật làm được điều này đã được tích hợp trong CSS từ năm 1998. Nó được gọi là @font-face, và đây là cách nó làm việc:
@font-face {
font-family: "League Gothic";
src: url("/type/league_gothic.otf") format("opentype");
}
h1 {
font-family:"League Gothic", Arial, sans-serif;
}
Nếu bạn đã quen thuộc với CSS thì cú pháp code của @font-face là điều rất dễ giải thích. Ta chỉ đơn giản là đinh dạng URL nơi mà font chữ có thể được tìm thấy. Một khi đã đinh dạng xong thì bạn chỉ việc đưa nó vào font stack như mọi font khác. Vậy tại sao ta lại không sử dụng cách này ngay từ đầu? Có 2 lí do làm cản trở việc sử dụng font này đó là các nhà thiết kế font và sự không đồng bộ trong việc hỗ chợ các định dạng font.
Lí do cản trở từ các nhà thiết kế font cũng là điều dễ hiểu. Họ kiếm sống là nhờ vào tiền bản quyền cho font của họ, nên họ ngăn chặn việc sử dụng, download, copy miễn phí. Lí do còn lại về định dạng font thì hơi mơ hồ. Một vài trình duyệt web thì hỗ trợ định dạng TTF và OTF, trong khi các thiết bị iOS (iPhone và iPad) yêu cầu SVG, còn IE thì chỉ sử dụng định dạng EOT của Microsoft, và để thống nhất lại tất cả các định dạng này, sắp tới chúng ta sẽ có định dạng nguồn WOFF hỗ trợ hầu hết trên tất cả các trình duyệt. Tuy nhiên trong nhiều năm qua, những vấn đề kĩ thuật về font đã được loại bỏ. Việc này dẫn tới sự bùng nổ về những font chữ miễn phí, buộc các nhà thiết kế font phải suy nghĩ lại về việc bản quyền cho font của họ.
Nhưng không may măn thay, chúng ta vẫn sẽ phải chờ một thời gian nữa để có được xe hơi bay và du hành tới sao Mộc.
Font self-hosted (self-hosted web fonts)
Bởi sự khác biệt trong các yêu cầu dịnh dạng nên bạn không thể đơn giản là chỉ đưa một file TTF lên một thư mục trên trang của bạn và liên két như một code @font-face. Hơn nữa, làm như vậy sẽ khiến cho bạn bị vi phạm bản quyền sử dụng (EULA) đối với những nhà thiết kế font. Nếu bạn muốn tự host một font của mình, họ sẽ tính tiền bản quyền và bạn sẽ cần thêm một vài định dạng font khác nữa, và bạn cũng phải cần trả tiền cho những code mới nhất trên tất cả các định dạng này. Đây là khi mà Font Squirrel, ở hình 4.4, ra tay giải cứu. Ở trang web hữu dụng này, bạn sẽ tìm thấy hàng trăm những font miễn phí và những kits có thể download được giúp cho bạn đưa font vào trong trang của bạn, và cho bạn một generator cung cấp tất cả các font files vào một định dạng nhất định. Nếu bạn không tìm ra được font mình muốn ở đây thì bạn có thể vào trang khác, Fontspring. Ở đây bạn có thể mua những font từ chính nhà thiết kế, những font này có thể kết hợp được trong @face-font và tất cả những font này đều chỉ cần mua license một lần duy nhất.
Hình 4.4
Dịch vụ Font (web font service)
Nếu như bạn không muốn dính dáng tới những font files hoặc những mã code rắc rối thì có một vài dịch vụ có thể giúp bạn host cho font và đưa vào trang web của bạn. Với những dịch vụ này, bạn đơn giản chỉ cần chọn một font, tìm ra đoạn code tương ứng của nó và bỏ vào trong trang của bạn, thế là xong.
http://typekit.com
Đây là một trang web giải pháp cho font chữ đầu tiên và nổi tiếng nhất. Được phát triển bởi những nhà lãnh đạo Jeffrey Veen và Jason Santa Maria, trang web có một thư viện và đội ngũ thiết kế font khổng lồ. Nó được ví như là iTune của font chữ vậy. Họ còn cung cấp cho bạn những bản dùng thử cho một trang đơn; mặc khác, họ tính tiền bạn hàng năm dựa trên số lượng lượt view theo từng tháng.
http://fontdeck.com
Giống như typekit, Fondeck là một dịch vụ cho thuê font chữ được thành lập bởi các nhà lãnh đạo. Điểm khác nhau là trang web này cho phép bạn trả tiền cho mỗi font chữ mà bạn sử dụng, thay vì trả cho nguyên một bộ sưu tập.
http://www.extensis.com/en/WebINK/
Extensis là một ứng dụng quản lí font thịnh hành nhất. WebINK là một cổng vào “chợ Font” này. Trang web có một số lượng đông đảo các nhà thiết kế font nhưng bạn sẽ phải trả tiền theo tháng thay vì theo năm.
http://code.google.com/webfonts
Với sự giúp đỡ của typekit thì mới đây Google đã cho ra giải pháp font-hosting của riêng mình. Mặc dù font ở đây là rất ít so với Fontdeck và Typekit nhưng bởi vì nó chỉ host những font thông dụng nhất và nó hoàn toàn miễn phí nên nó vẫn được ưa chuộng.
Còn có nhiều nữa những dịch vụ font web với nhiều những quảng cáo nổi lên hàng tuần. Một vài nhà thiết kế font đã bắt đầu hành động bằng cách mở ra các dịch vụ host cho font của riêng họ. Nhưng vì sự thiếu hỗ trợ và rất khó nhận biết font nào sẽ đẹp và font nào sẽ mờ nhạt trên website của @font-face cho nên những font miễn phí và có thể download trực tiếp trên mạng vẫn được sử dụng nhiều cho tới ngày nay. Một nguồn để đọc những thông tin mới nhất về @font-face và web font là webfonts.info wiki.
sIFR and Cufón
Trước khi có @font-face, các nhà phát triển web đã thử mọi thủ thuật, mánh khóe thông minh để có thể hiển thị font chữ của họ. 2 giải pháp thành công và nổi trội nhất đó là sIFR and Cufón. Tuy rằng 2 cách này sẽ sớm bị tụt hậu so với các web font có thể được donwload trên mạng, nhưng chúng vẫn còn được sử dụng rộng rãi cho tới ngày nay và đáng để được nói tới.
sIFR (còn được gọi là siffer) là từ viết tắt của Scalable Inman Flash Replacement. Tiền đề căn bản của sIFR và việc sử dụng các đoạn Flash để chứa và hiển thị font với những hiệu ứng đẹp mắt. Vì đa số những người sử dụng web đều được cài Flash, sIFR đã sử dụng JavaScript để thay thế những khung chữ (như <h1>) bằng những đoạn Flash trống. Sau đó nó hiển thị nội dung của khung chữ bằng cách sử dụng đoạn Flash đó. Mặt hạn chế của kĩ thuật tinh ranh này là nó đòi hỏi máy phải có cả JavaScript và Flash.
Cufón là một sự lựa chọn khác của sIFR, nó biến đổi font thành file SVG; sau đó sử dụng JavaScript rendering engine để vẽ lại những kí tự đó bằng cách sử dụng tính năng canvas. Nghe có vẻ phức tạp nhưng thực ra nó dễ hơn rất nhiều so với sIFR.
Bất kể chúng ta có sử dụng kĩ thuật nào để hiển thị font chữ đi chăng nữa điều quan trọng nhất là làm sao để hiểu rõ cách chọn lựa font hơn là chỉ chọn cho đẹp. Để làm được điều này, đầu tiên bạn cần phải hiểu rõ từng yếu tố tượng hình, kí hiệu tạo dựng nên font chữ.
Kết cấu của chữ
Một số lớp thiết kế mà tôi đã học ở trường đại học dạy rất kĩ về những kết cấu và thuật ngữ của kiểu chữ. Nhiều người có thể đã nhận diện được các từ đơn giản như serifs, ascenders và descenders nhưng với những lớp này, chúng tôi phải nhớ khoảng 100 thuật ngữ khác nhau. Ở cuốn sách này thì tôi sẽ không làm khó với bạn, nhưng điều quan trọng là bạn phải biết một vài thuật ngữ căn bản trước khi chúng ta tiếp tục học về kiểu chữ. Chắc chắn rằng chúng ta cũng có thể sử dụng những từ ngữ đơn giản như squigles, slants và thingies thay vì những thuật ngữ phức tạp này, nhưng nó sẽ làm cho bạn rất rối sau này.
Hình 4.5 thể hiện các yếu tố của một font chữ. Chúng tôi sẽ giải thích từng yếu tốt một.
Hình 4.5
1. Baseline
Baseline là một đường kẻ nằm ngang mà hầu hết các kí tự đều nằm trên đó. Một kí tự duy nhất nằm phía dưới Baseline ở hình 4.5 là kí tự “q” viết thường.
2. Cap height
Cap height hoặc Capline cũng là một đường thẳng nằm ngang. Nó đánh dấu chiều cao của tất cả các kí tự khi được viết hoa. Chú ý rằng đường Cap height thì nằm dưới chiều cao tối đa của một kiểu chữ.
3. Crossbar
Nét thẳng nằm ngang nối 2 đường kẻ trong kí tự hoa “A” và “H” được gọi là crossbar. Một nét thẳng nằm ngang nhưng lại không nối 2 đường kẻ nào, như nét thẳng nằm ngang trong chữ “t” hoặc “f”, thì được gọi là cross stroke.
4. Serif
Serif là tên được đặt cho đường kẻ nằm ngang phía dưới hoặc trên đầu những kiểu chữ nhất định. Tôi sẽ nói nhiều hơn về Serif trong phần sau.
5. Mean line
Một đường kẻ nằm ngang nữa được sử dụng để đánh dấu rìa phía trên của những kí tự viết thường được gọi là Mean line (hoặc là Midline). Trái với tên của chúng thì Meanline không có nghĩa là nó luôn luôn nằm chính giữa 2 đường Baseline và Cap height.
6. Bowl
Bowl là những đường cong tạo ra những khoảng trống kín bên trong những kí tự. Ví dụ của Bowl ta có thể thấy được trong những chữ “D”, “o” và “g”.
7. Descender
Phần phía dưới của những kí tự viết thường như “g”, “j”, “p”, “q” và “y” mà chìa ra khỏi đường Baseline của một kiểu chữ được gọi là descender. Những kí tự duy nhất mà có phần dưới chìa ra khỏi đường baseline nữa là những số toán học kiểu cũ trong một vài kiểu chữ. Những loại số này, ví dụ như trong kiểu Georgia ở hình 4.6, được cho là sẽ hài hòa hơn với những số được hạ xuống và trông rất đẹp khi được sử dụng trong phần nội dung.
Hình 4.6
8. Counter
Khoảng trống nằm trong một kí tự được gọi là counter. Trong một vài kí tự như “A”, “o” và “P” thì couter là một khoảng trống kín. Những khoảng trống hở như trong những kí tự “G”, “u” và “c”.
9. Stem
Stem là những đường kẻ chính nằm dọc hoặc chéo trong một chữ. Những đường này bao gồm những đường dọc trong những kí tự như “I” và “H” và tất ra những đường chéo trong chữ “W”.
10. Tittle
Đây có lẽ là thuật ngữ kiểu chữ ưa thích của tôi. Tittle là cái tên được đặt cho những dấu chấm phía trên những kí tự viết thường như “j” và “i”.
11. Terminal
Điểm kết thúc của những Stem hoặc những đường thẳng mà không có serif được gọi là terminal. Ngay cả điểm kết thúc của một vài serif cũng có terminals như chữ “c” trong hình 4.5 bạn có thể thấy.
12. Ascender
Một vài những kí tự viết thường có ascender, được định nghĩa là phần trồi ra cao hơn đường meanline. Những kí tự đó là “b”, “d”, “f”, “h”, “k”, “l” và “t”.
13. Leg
Những đường kẻ chéo góc nằm phía dưới những kí tự “K”, R” và “Q” được biết đến với tên là Leg. Đôi khi chúng cũng được xài với tên là Tail.
14. Ligature
Bạn có thể đã để ý ở hình 4.5 rằng chữ “f” và chữ “i” của từ “fix” được nối lại với nhau thành một từ. Sự nối lại với nhau như vậy được gọi là Ligature. Ligature có thể được thấy đa số ở serif và chúng tạo ra được sự cân bằng thẩm mĩ cho những khoảng trống của những kí tự nhất định như ở hình 4.7 miêu tả.
15. x-height
Hiểu đơn giản x-height là khoảng không dọc chứa những kí tự viết thường như “x” ở hình trên. Chính xác hơn thì nó là khoảng cách giữa baseline và meanline, định dạng cho phần thân của những kí tự viết thường – ngoại trừ ascenders và descenders. X-height là một yếu tố then chốt cho việc định dạng một kiểu chữ, và những kiểu chữ có phần x-height rộng thì thông thường sẽ dễ đọc hơn.
Mặc dù nó cũng chỉ là lý thuyết nhưng bạn có thể sử dụng x-height như một đơn vị đo lường trong CSS(ex).
Khoảng cách chữ
Bây giờ khi bạn đã biết được cách mô tả những phần trong một kiểu chữ rồi, bước tiếp theo sẽ là định dạng được khoảng cách của những kí tự. Tôi đã nói ở trước rằng việc chọn lựa kiểu chữ nhiều khi được dựa vào khoảng cách này. Điều này luôn luôn đúng trong những kiểu chữ in ấn và trở nên có thể ứng dụng được trong web với những tính năng của CSS. Cho dù ta đang nói về in ấn hay là website đi chăng nữa thì có 2 hướng chính để chúng ta có thể kiểm soát khoảng cách: theo chiều ngang và theo chiều dọc.
Khoảng cách theo chiều ngang
Kerning và Tracking là 2 thuật ngữ mà bạn sẽ thường được nghe khi bàn về khoảng cách chữ theo chiều ngang. Kerning là một quá trình điều chỉnh khoảng cách giữa từng kí tự đơn lẻ. Thông thường khi làm việc với kiểu chữ, bạn sẽ để ý rằng có những cặp kí tự thì quá gần nhau hoặc quá xa nhau. Đa số mỗi font chữ điều có một bộ luật lệ riêng quyết định khoảng cách giữa các kí tự cụ thể. Một Kerning giữa các kí tự “Wa” thì gần hơn rất nhiều so với “WV”. Đa số thì những luật lệ trong font chữ tập trung vào việc làm sao cho chữ dễ đọc nhất. Mặt khác, bạn có thể điều chỉnh từng cặp kí tự riêng lẻ với những lựa chọn của chương trình tạo hình của bạn. hình 4.8 cho thấy một ví dụ của các kí tự không có Kerning, có Kerning tự động và Kerning được tùy chỉnh.
Đối với font chữ trên trang web thì không thể ngồi chỉnh kerning cho từng chữ một. Điều bạn có thể làm ở đây là tùy chỉnh tính năng letter-spacing trong CSS, còn được biết trong thiết kế in ấn là tracking. Cũng giống như Kerning, Tracking điều chỉnh khoảng cách giữa các kí tự với nhau nhưng nó được áp dụng cho tất cả các kí tự. Nếu bạn muốn làm cho đoạn văn của bạn thêm sự cởi mở, thoáng đãng thì hãy thử thêm một chút khoảng cách vào như tôi đã làm ở hình 4.9.
Một lựa chọn cho khoảng cách theo chiều ngang trên CSS nữa là tính năng word-spacing. Tính năng này có thể thay đổi chiều dài của khoảng cách hoặc để từ khóa normal. Tính năng này điều chỉnh số lượng khoảng trắng giữa các chữ.
Khoảng cách theo chiều dọc
Trong thiết kế in ấn thì khoảng cách giữa các dòng chữ với nhau được đặt tên là leading. Thuật ngữ này bắt nguồn từ những ngày đầu tiêu trong việc in chữ khi mà những dòng trống này được thêm vào để phân biệt giữa các dòng chữ với nhau. Khi mà không có những khoảng cách này thì các đoạn văn được gọi là “đặc”. Những đoạn văn được thêm dòng ngăn cách thì sẽ dễ đọc hơn. Như bạn thấy ở hình đầu tiên trong hình 4.10, khoảng cách mặc định giữa các dòng là quá nhỏ. Lí tưởng thì bạn sẽ muốn khoảng cách dòng này bằng 1.5 lần kích thước chữ; vậy nên nếu chữ của bạn là 12px thì 18px là một khoảng cách hợp lí. Ở đoạn thứ 2 trong hình 4.10 thì chúng tôi đã điều chỉnh tính năng line-height trong CSS lên 1.5em. Em là một đơn vị đo lường kích cỡ font chữ trong CSS, tính từ cap height cho tới phần cuối của descender. Thông thường thì một em tương đương với chiều rộng của chữ viết hoa M, cũng là chữ mà tên của nó được hình thành.
Sắp xếp từ
Bạn có bao giờ chú ý rằng các đoạn văn bạn nhìn thấy trong sách hoặc một cuốn tạp chí thường được căn thẳng hàng cả bên trái và bên phải của trang hoặc cột không? Kiểu sắp xếp từ này được gọi là justification. Khi một đoạn văn bản được justification thì những từ và khoảng cách từ trong đó được tự động điều chỉnh sao cho mỗi dòng đều được căn lề đều 2 bên trái và phải. Nhiều nhà thiết kế in ấn sẽ sử dụng tùy chỉnh này cho bất cứ ô nội dung nào đủ dài và có nhiều hơn 2 dòng. Bạn có thể sử dụng tính năng này trong web với tính tăng text-alignment trong CSS. Trước khi bạn điều chỉnh justification cho cả một trang web của bạn thì hãy để tôi đưa 2 cho bạn 2 cảnh báo:
Có một dòng sông chảy xuyên xuốt
Thông thường thì có một khoảng trống được tạo ra bởi khoảng cách giữa mỗi từ trong một hàng được justification sẽ thẳng hàng với khoảng trống trong dòng tiếp theo, và tiếp theo, và tiếp theo nữa … và bạn sẽ có được một vết nứt dòng sông chảy xuyên xuốt đoạn văn của bạn như ở hình 4.11. Điều này có thẻ gây ra sự sao lãng cho người đọc. Những nhà thiết kế in ấn có thể tùy chỉnh để khắc phục vấn đề này những đối với website thì nó rất khó để dự đoán và hầu như vô phương cứu chữa.
Bạn? Đang? Nói? Gì?
“Dòng sông” ở trên lại càng rắc rối thêm khi được sử dụng trong những cột ít chữ. Những từ ngữ sẽ bị cô lập so với các cạnh bên trái và phải, hoặc bị giãn ra theo chiều dài của cột. Đa số những chương trình văn bản đều sửa được vấn đề này bằng việc nối từ lại ở những chỗ cần thiết. Nhưng các trình duyệt web thì lại không có khả năng làm việc này, cho nên chúng ta nên tránh sử dụng justification trong những cột ít chữ.
Hình 4.11
Nếu bạn không muốn sắp xếp từ của bạn theo cách justification thì bạn còn có thể chọn những cách sắp xếp như left, right, hoặc center. Khi một đoạn văn được chỉnh chế độ center, left hoặc right thì những khoảng cách giữa các từ sẽ được giữ bình thường. Vấn đề “dòng sông” có thể xảy ra ở bất kì đoạn văn bản nào nhưng nó khó bị hơn ở những đoạn được chỉnh center, left và right hơn so với justification.
Nếu bạn muốn xem thử những HTML sẽ trông như thế nào trong trình duyệt với những tùy chỉnh leading, tracking, và sắp xếp từ khác nhau thì Marko Dugonjic’s Typetester và Panduka Senaka’s Typechart là 2 công cụ tuyệt vời bạn có thể xem qua. Chúng đều là những ứng dụng web cho phép bạn thử sự đa dạng của các tuy chỉnh kiểu chữ cho văn bản HTML và sau đó đưa vào CSS khi bạn ưng ý.
Hình 4.12
Phân loại kiểu chữ
Bây giờ thì các bạn đã hiểu font là gì rồi chứ. Nó là một tập hợp những chữ cái có cùng chung một kiểu mẫu và được cài vào máy tính của bạn. Bạn thay đổi nó khi bạn muốn chữ của mình được trông khác đi. Một hệ điều hành PC được cài mặc định hơn 40 font, trong khi những người dùng Mac có được khoảng 100 font. Đa số những font này đều được nhóm lại với nhau thành từng nhóm, mỗi font trong một nhóm đại hiện cho một biến thể khác nhau của một font chính. Đa số các nhóm font có cùng một font face, cùng với italic, bold, and bold italic. Một vài font thì lại không có những biến thể của nó; một vài font chỉ có bold hoặc italic và một vài font thì lại có hàng trăm những biến thể khác nhau.
Cũng giống như tất cả các thành viên trong một vài gia đình đều có lỗ tai to hoặc ngón chân út dài, mỗi một nhóm font đều có một đặc điểm độc nhất để nhận dạng giữa những nhóm font khác. Hãy nhìn vào tất cả các biến thể của chữ “g” ở hình 4.13.
Những đặc điểm này giúp chúng ta phân loại và chia các font thành từng nhóm. 2 nhóm font chính có thể được phân loại đó là serif và sans-serif. Trong 14 font khác nhau ở hình 4.13, thì có 7 font thuộc nhóm serif và 7 font thuộc nhóm sans-serif. Bạn có thể phân biệt được chúng không? Ngoài cách này ra ta còn có nhiều cách khác để chia nhóm cho font. Nhưng ở đây tôi thường chia font thành 6 nhóm đơn giản: serif, sans-serif, handwritten, monospace, novelty và dingbats. Hãy đi vào từng nhóm nhé.
Nhóm Serif
Nhiều nhà sử học tin rằng kiểu serif bắt nguồn từ những hình tượng được khắc trên đá ở Rome. Có nhiều cuộc tranh luận đã xảy ra về ý nghĩa của những hình này, nhưng gần đây thì chúng đã được chứng minh là để làm tăng tính dễ dọc cho những đoạn văn bản bằng cách thêm vào những đường kẻ ngang ở dưới mỗi chữ. Khi một nhà thiết kế chọn font Serif, Times New Roman là font đầu tiên mà họ nghĩ tới. Tuy nhiên, có rất nhiều biến thể khác nhau của font serif mà bạn có thể lựa chọn. Để có thể quyết định được font nào, trước tiên bạn phải quyết định được ý nghĩa mà bạn muốn những chữ của bạn có được.
Hãy nhìn vào chữ Garamond ở hình 4.14. Đây là một font serif cổ điển. font serif cổ điển được hình thành từ những nét vẽ của các nhà ghi chép Ý và có thể được nhận diện bởi những nét nối nhẹ nhàng giữa những đường dày và mỏng, và những góc tròn mềm mại của nó. Khi tôi thấy một font serif cổ điển, tôi lại có một cảm giác sử thi, như những lá bùa được làm bằng tay. Hơn nữa, những font như Garamond hết sức linh hoạt: Chúng không cổ tới mức không thể được dùng trong thời đại ngày nay.
Một font thứ 2 ở hình 4.14 là Baskerville, một font serif tiêu chuẩn. Những góc cong nối những terminal lại với nhau được gọi là bracket. Những góc nối này trong font serif tiêu chuẩn thường là hình tròn, nhưng những góc khác trong font serif thì lại là hình vuông. Sự thêm vào những góc 90 độ này làm cho font chữ thêm phần hiện đại và kĩ thuật. Nhóm font này của serif được gọi là font tiêu chuẩn vì nó là sự chuyển giao từ kiểu cổ điển sang kiểu hiện đại.
Font thứ 3, Didot ở hình 4.14, là một font serif hiện đại. Những font này cho thấy được sự tương phản rất lớn giữa những đường dày và mỏng, và font này hoàn toàn không có những bracket. Font serif hiện đại được giới thiệu trong thời kì cuộc cách mạng công nghiệp như là một sự lựa chọn khác thay cho font serif tiêu chuẩn. Ngày nay, những font này thường đại diện cho sự thanh lịch, tinh tế và thời trang. Nó đại diện cho sự vô hạn hơn là sự hiện đại. Vì những chi tiết tuyệt hảo trong từng nét, font này là một lựa chọn duy nhất phù hợp cho các tiêu đề. Việc sử dụng font Italian Didot ở tạp chí Vogue, ở hình 4.15, giúp khẳng định cho cả font chữ và cuốn tạp chí là một biểu tượng của thời trang. Những tạp chí nổi tiếng khác cũng sử dụng font serif hiện đại cho tiêu đề của mình là Brides, W, Elle, Parents, Seventeen và Harper’s Bazaar. Cho rằng font này ít được chọn trong thiết kế website nhưng nó sẽ là một lựa chọn thú vị nếu bạn đang nhắm vào một chủ đề mang đậm chất phong cách.
Vào cuối những năm 1880s, quảng cáo, poster,
tờ rơi ngày càng phổ biến và theo đó là việc sử dụng ngày càng nhiều font serif hiện đại để lôi kéo được sự chú ý của người dân. Đây cũng chính là thời điểm mà font Slab serif được giới thiệu. Font Slab serif như chữ Rockwwell ở hình 4.14 mang tính kinh tế nhưng lại thân thiện, đỡ ồn ào và hiện đại hơn font serif hiện đại. Bởi vì đa số các font Slab serif đều được thiết kế để có thể dễ dàng đọc được ở khoảng cách xa nên font này làm nên những tiêu đề xuất xắc và được dùng rất phổ biến trên web. Hình 4.16 cho thấy một vài ví dụ bắt mắt của những font Slab. Ở bên trái chúng ta có trang The Sew Weekly,
logo của trang được thiết kế sử dụng font Brosse. Cá nhân tôi nghĩ thì những font Slab serif thì sẽ rất nam tính nhưng trang web này lại cho thấy vẻ đẹp hoàn toàn trái ngược lại. Điều này chứng tỏ việc chọn font là không có luật lệ nhất định nào cả.
Nhóm Sans-serif
Vào thời điểm mà các nhà thiết kế font bắt đầu thử nghiệm với Slab serif thì ý tưởng về việc loại bỏ font serif là một lỗi lầm to lớn. Serif là một font tiêu chuẩn, vì vậy việc loại bỏ nó sẽ làm sụp đổ cả hệ thống kiểu chữ. Những font chữ sans-serif ban đầu bị căm ghét tới mức được coi là một sự lố bịch trong những năm 1800s. Nhưng cuối cùng, người ta bắt đầu nhận thức được font sans-serif và cho tới những năm 1920s một vài người đã dự đoán rằng font serif sẽ sớm bị đánh bại.
Mặc dù font serif vẫn được sử dụng một cách rộng rãi nhưng sự nổi tiếng và đa dạng của font sans-serif vẫn tiếp tục tăng. Những loại font này mang lại cảm giác ngay ngắn và đương thời. Nó có thể nổi lên như một tiêu đề, đặc biệt là khi được đặt trong phần nội dung được sử dung font serif. Điều này là một tiêu chuẩn đã được áp dụng trong
thiết kế in ấn từ lâu, và cũng là một mẹo mà tôi được dạy ở trường để tạo ra sự tương phản giữa tiêu đề và nội dung. Mặc dù vậy, đối với website, vai trò giữa 2 font này đã bị đảo ngược từ rất lâu rồi. Nguyên nhân chủ yếu là do hiển thị độ phân giải thấp cộng với việc những hệ điều hành cũ thì rất ít hỗ trợ cho các font này. Vì sự đa dạng của những nét chữ và những chi tiết đẹp của nó nên font serif sẽ rất khó đọc ở kích cỡ nhỏ hoặc độ phân giải thấp. Cùng với sự phát triển về kĩ thuật và những máy tính cũ bị loại bỏ thì chúng ta cũng đã thoải mái hơn trong việc sử dụng font serif. Hình 4.17 là trang The Donut Project, một trang blog được thiết kế mà tôi ưa thích, sử dụng tiêu đề sans-serif và phần nội dung serif.
Bất kể sử dụng cho việc gì đi nữa thì font sans-serif có thể phù hợp với mọi mục đích khác nhau. Những font sans-serif được sử dụng thường xuyên nhất trên web đó là
Arial và Verdana. Mỗi nhóm font chữ này đều có trong những font được cài mặc định vào hệ điều hành. Đối với
thiết kế web thì những nhóm font này có tiếng là được sử dụng quá nhiều và quá giống nhau. Điều này làm cho chúng được sử dụng rất tốt trong phần nội dung, khi mà sự dễ đọc được đặt trên hết. Nhưng với tiêu đề và những phần khác đòi hỏi tính nghệ thuật thì nó là một lựa chọn tồi. Đôi khi một font serif mạnh hoặc một font sans-serif dễ dàng phân biệt, sẽ làm được điều này. Nhưng chúng ta còn nhiều những sự lựa chọn khác ngoài 2 font này mà.
Nhóm handwritten
Trước khi có sự ra đời của hệ thống đánh chữ thì tất cả mọi chữ viết đều được khắc, vẽ hoặc viết bằng tay. Mặt bất lợi của việc viết bằng tay – đặc biệt là đối với tôi – là để có được một mẫu chữ, một sự xắp xếp và khoảng cách thống nhất là điều gần như không thể. Cũng vì lí do đó mà chữ viết tay thường rất khó để đọc. Nhưng mặt khác, một khía cạnh tuyệt vời của nhóm handwritten này là nó tượng trưng cho tính cách con người, giúp truyền tải được một nhân cách qua chữ viết. Hãy nhìn vào hình 4.18, mỗi dòng chữ đại diện cho một tính cách của riêng nó.
Font handwritten cho ta được những xúc cảm của một con người mà không có những lỗi hạn chế như trên. Cũng như những font khác, sự sắp sếp và khoảng cách của font chữ này được đảm bảo và nếu một font được thiết kế tốt thì ngay cả khoảng cách giữa các chữ cũng tốt nữa. Khi mà bạn tham khảo những mẫu font handwritten trên web, bạn có thể sẽ nghĩ rằng bất cứ ai cũng có thể tạo ra được một font chữ, và đó là sự thật. Không giống như font serif và sans-serif đòi hỏi sự chính xác về tỉ lệ cũng như nét chữ, font handwritten tập trung vào cá tính. Nếu bạn muốn tạo một font handwritten cho riêng mình thì có hàng tá công cụ và dịch vụ có thể giúp bạn. Một trang web đơn giản nhất đó là YourFonts.com. Bạn chỉ cần in một bản PDF template, vẽ một vài chữ mẫu của bạn vào, scan nó vô, tải lên trang, và với một số tiền phí nhỏ, bạn có thể tải về một file font của mình.
Nếu bạn muốn thiết kế một website thân thiện có có tính cách, thì đôi khi sử dụng một font chữ, ngay cả font handwritten cũng là hơi quá. Hãy nhìn vào trang Twitter Chirp Conference ở hình 4.19 làm ví dụ. Nếu bạn nhìn kĩ thì bạn sẽ thấy được rằng không có chữ nào trong đây giống nhau. Đó là bởi vì thay vì chọn một font chữ nhất định thì đây hoàn toàn là những chữ viết tay. Đa số mọi người sẽ không thấy được sự đa dạng hài hòa giữa những chữ ở đây, nhưng chi tiết nhỏ này đã giúp làm cho trang web này thú vị và thân thiện hơn.
Hình 4.19
Bạn có thể sẽ để ý thấy rằng tất cả các nhóm font ở trên đều có kích thước kí tự khác nhau. Lấy ví dụ như chữ “W” hoa sẽ chiếm nhiều diện tích hơn là chữ “I”. Để có thể mô tả điều này trong tình huống cụ thể, hãy đoán xem trong hình 4.20, câu nào có nhiều có kí tự hơn.
Đây là một câu hỏi mẹo; thực chất thì 2 câu trên đều có cùng số kí tự như nhau! Vậy thì tại sao câu đầu tiên lại dài hơn câu thứ hai? Lời giải thích cho hiện tượng này chính là tỉ lệ khoảng cách tương ứng giữa các từ. Mỗi một kí tự của mỗi font khác nhau đều có một quy tắc quyết định độ rộng của kí tự và khoảng trống xung quanh kí tự đó. Bây giờ hãy nhìn lại 2 câu ở hình 4.21. Lần này chúng được viết ở font Courier.
Lí do 2 câu này lại có cùng một độ rộng là font Courier là một font fixed-width hay còn được gọi là font monospaced. Nhóm font này sử dụng thống nhất một khoảng cách nhất định, và các kí tự được thiết kế sao cho chúng có cùng độ rộng. Font fixed-width đầu tiên được thiết kế bởi vì sự hạn chế về mặt kĩ thuật của các máy đánh chữ. Những máy đánh chữ đời đầu này không có khả năng tạo ra những khoảng cách khác nhau, khi đánh chữ “w”, độ rộng của nó cũng tương tự như chữ “i”. Vì vậy điều cần thiết là phải có một font chữ làm sao phù hợp trong thời điểm này, và đó là khi font fixed-width ra đời. Những nhóm font này phải duy trì được sự dễ đọc mặc dù mỗi kí tự đều có một kích cỡ giống nhau. Những máy tính đời đầu cũng hiển thị những nhóm font này, nhưng chỉ trong một thời gian ngắn trước khi các máy tính có thể hiển thị được nhiều các loại font có độ rộng khác nhau hơn.
Vậy tại sao những font fixed-width này vẫn còn tồn tại cho tới bây giờ? Chúng tồn tại được chủ yếu là dành cho các coders và kế toán. Khi mà bạn phải ngồi gõ code hoặc hiện thị các dữ liệu dạng văn bản thì việc các kí tự được xếp thẳng hàng theo từng cột, từng dòng là điều quan trọng. Nếu bạn đang đọc cuốn sách này thì có lẽ bạn đã quen với những font fixed-width này từ các kí tự ở HTML và CSS. Những lợi ích của những font monospaced này có thể được nhìn thấy ở hình 4.22, CSS3, please! là một tính tăng của CSS3.
Đối với website, một cách tiêu chuẩn để hiển thị văn bản ở font fixed-width là các tag <pre> và </pre>. Pre có nghĩa là các văn bản định dạng sẵn, và ngoài việc thể hiện các kí tự fixed-width thì nó còn chứa các tab, space và line break. Điều này thường làm cho việc hiển thị các dòng code hoặc các thông tin dạng bảng trên website đơn giản như được coppy và paste từ nguồn vậy. Tôi nói “thường” bởi vì các HTML tag có trong văn bản định dạng sẵn sẽ được trả lại, vậy nếu bạn đang cố đưa bất cứ tag nào vào trong code thì bạn sẽ phải thay các <s với < và >s với >. Cũng như mọi yếu tố khác trên HTML, Pre có thể được thiết kế trong CSS. Thông thường khi một nhà phát triển web muốn hiển thị code trên page thì các code này phải được nổi bật lên khỏi các đoạn văn bản thường khác. Sử dụng CSS bạn có thể cho thêm pre các đường viền, hiệu ứng nền, các đường viền bổ sung hoặc một hiệu ứng văn bản khác để làm cho nó nổi bật.
Một cách sử dụng thú vị, mặc dù đã lỗi thời, của các font fixed-width là sự sáng tạo của nghệ thuật ASCII. Được viết tắt từ American Standard Code for Information Interchange, ASCII là một trong những ngôn ngữ mã hóa cho các thiết bị thông tin liên lạc và là 95 kí tự có thể in được trong hệ thống 7-bit chỉ có hình được hiển thị. Trước khi Internet được sử dụng rộng rãi ngoài quân đội và các trường học thì một hệ thống bảng thông báo dial-up được hiển thị các thanh menu là đồ họa game trên các kí tự ASCII. Tôi thực sự rất thích những tác phẩm mà người ta tạo ra chỉ với những kí tự fixed-width.
Mặc dù bây giờ bạn có thể tạo ra được nhiều sáng tác nghệ thuật ASCII với những ứng dụng web như ASCII-O-Matic hoặc Patrick Gillespie’s Text Ascii Art Generator, nhưng những thiết kế nghệ thuật ASCII từ những thập niên 80s đến đầu thập niên 90s chỉ được thiết kế dựa trên từng kí tự và thực sự đã được nâng lên một tầm cao mới. Những loại hình nghệ thuật này, như hình Energy BSS ở hình 4.23.
Hình 4.23
Nhóm Novelty
Nhóm font novelty, còn được biết đến như những font đẹp đẽ, bắt mắt và được dùng để trang trí, đại diện cho một số lượng lớn các font tự do có thể tải trực tiếp trên mạng. Một vài font trong nhóm này được phân loại như là một biến thể của font serif hoặc sans-serif, còn một vài font thì lại hoàn toàn khác lạ tới nỗi nó được miêu tả như một tác phẩm nghệ thuật hơn là một font chữ. Cũng bởi những tính chất này mà nhóm font này không có được sự dễ đọc như các nhóm font khác, nhưng khi nó được sử dụng một cách vừa phải thì nó có thể đem lại sự phong phú trong tính cách và sự tinh tế cho thiết kế. Một vài ví dụ cho font này có thể được xem ở hình 4.24.
Đôi khi, một chỗ tốt để sử dụng font novelty là ở khung logo. Hãy nhìn vào trang Hype-nation ở hình 4.25. Logo của trang là một font được thiết kế đậm, cổ điển và vuông vức, hợp với hình logo được thiết kế theo khối của trang. Nó trông giống như những kí tự in hoa trong một font mà tôi nhớ có tên là La Moda, nhưng có vẻ như nó đã được chỉnh sửa lại một chút để thêm tính đặc trưng.
Mặc dù tôi cũng có thể coi là biết được đôi chút về kiểu chữ nhưng khó có thể nói rằng tôi là một “máy nhận diện font”. Thông thường nếu tôi đi ngang đường và gặp một đoạn chữ nào đó sử dụng font tôi không thể nhận diện được, ý nghĩ đầu tiên tôi nghĩ đến là “WTF”!. Tất nhiên là tôi thích sử dụng những hệ thống nhận diện font tự động MyFont’s excellent WhatTheFont (WTF; không phải như bạn nghĩ đâu nhé). Tất cả những gì tôi cần làm là crop một vài chữ ra và tải nó lên WTF và nó sẽ tự tìm kiếm xem có font nào phù hợp trong dữ liệu không. Hình 4.26 cho thấy một vài kết quả giống với logo Hype-nation mà tôi tải lên. WTF thật sự là một công cụ vô giá, và nếu nó không nhận diện được font của bạn tải lên, thì trang web còn một forum được gọi là “Cloak-draped font enthusuasts” cho những người thích giải những bài toán về font.
Với tất cả những thiết kế, trước khi bạn muốn sử dụng font novelty, bạn nên nghĩ trước tiên đến những yêu cầu của khách hàng và nhóm đối tượng mục tiêu của web. Đa số các khách hàng đã có sẵn thương hiệu của mình, vì vậy việc chọn một kiểu font kì lạ và khác hẳn với logo sẽ làm cho trang web bị rối. Mặc dù vậy thì nhóm font này vẫn là sự lựa chọn tốt nhất khi bạn muốn thiết kế một kiểu mẫu website. Nó có thể làm cho công ty khách hàng của bạn muốn thay đổi hình ảnh công ty của họ thì sao.
Nhóm Dingbat
Khi bạn đang tìm kiếm một hình ảnh hoặc một thiết kế nghệ thuật để đưa vào trong thiết kế website của bạn thì font dingbat, hoặc symbol, là những font bạn nên cân nhắc. Trong những thời kì đầu của in ấn, font dingbat là những kí tự tượng hình được dùng để phân biệt giữa các chữ và chèn vào các khoảng trống. Những font dingbat đầu tiên bao gồm chủ yếu là những biểu tượng thông thường; tuy nhiên, nhóm font này đã thay đổi một cách mạnh mẽ cùng với sự phát triển của font kĩ thuật số. Hiện nay bất cứ một nhóm hình ảnh nào cũng có thể được thêm vào thành một nhóm trong font dingbat.
Trong khi những font này thì không có tác dụng nhiều trong việc thể hiện chữ nghĩa nhưng chúng có thể có ích trong việc làm những hình ảnh hỗ trợ và icon. Những kí tự của dingbat này có thể được đưa vào photoshop hoặc Illustrator để chỉnh sửa, thay đổi kích thước, tháo gỡ, tùy chỉnh mà không sợ bị bể hình. Vấn đề duy nhất khi sử dụng font này là bạn phải biết được bạn có thể tìm được những hình mình cần ở đâu. Thông thường tôi sẽ nhớ một mũi tên hoặc một biểu tượng trong font dingbat, và ngồi gõ ra cả một nửa số kí tự alphabet để tìm ra được cái tôi muốn. May mắn thay đa số các font dingbat đều có một mẫu chung và sẽ dễ dàng nhớ được biểu tượng nào thuộc font nào, cho dù việc tìm ra được một kí tự cụ thể là rất khó.
Khi nghĩ đến font dingbat, ngưởi ta thường nghĩ ngay đến Wingdings và Webdings, những font được cài sẵn trong Windows. Thật ra còn có hàng trăm font khác nữa có thể được sử dụng trên web. Một vài ví dụ có thể được thấy ở hình 4.27.
Đi tìm font
Mặc dù đã một vài lần tôi có nói bạn có thể tìm những font này trên web nhưng tôi vẫn chưa nói cụ thể cho bạn một web nào cả. Nếu bạn bắt đầu google để tìm font thì bạn có thể sẽ khám phá ra rằng có 3 nhóm font chính trên web: Thư viện font miễn phí, Thư viện font thương mại, và những trang cá nhân của các nhà họa sĩ và các nhà thiết kế font. Tất cả đều là những nguồn font bạn có thể dắt lưng sử dụng.
Thư viện font miễn phí
Dưới đây là danh sách những website và thư viện font miễn phí từ nhiều nhà thiết kế font khác nhau. Một vài nhà thiết kế font còn liệt kê những thư viện riêng trên trang web cá nhân của họ, để họ có thể bán được chúng. Nếu bạn thích những font được thiết kế từ một nhà thiết kế cụ thể nào đó thì hãy đảm bảo rằng phải coi qua hết các thiết kế của họ. Hãy nhớ rằng cũng có rất nhiều những font miễn phí xấu xí, và với những website cho tải miễn phí font thì bạn cũng phải chật vật bơi qua một đống quảng cáo để có thể tải được. Còn nữa, nếu bạn muốn đưa một font (kể cả font miễn phí) vào web của bạn thông qua @font-face thì hãy đảm bảo tính bản quyền của nó. Và sau đây là một vài nguồn font miễn phí cho các bạn:
■ Font Squirrel, at http://fontsquirrel.com/
■ The League of Movable Type, at http://leagueofmovabletype.com/
■ DaFont, at http://dafont.com/
Thư viện font thương mại
Cũng như những website font miễn phí ở trên, những website thương mại này cũng cung cấp nhiều thiết kế font khác nhau từ nhiều nhà thiết kế font. Nhưng khác một điểm là những font này được tính phí. Đa số trường hợp thì bạn sẽ có được tiền nào của nấy với kiểu chữ. Nếu bạn mua bản quyền sử dụng một font từ những website này, cùng với việc mua toàn bộ đầy đủ kí tự thì bạn sẽ có được cả những font bold, italic, oblique và nhiều dạng khác nữa.
■ FontShop, at http://fontshop.com/
■ Monotype, at http://fonts.com/
■ Veer, at http://veer.com/products/fonts/
■ MyFonts, at http://myfonts.com/
■ Adobe Fonts, at http://adobe.com/type/
Các họa sĩ và thiết kế font
Có nhiều những font ưa thích tôi kiếm được từ những website cá nhân của những nhà thiết kế font. Đa số những trang này đều có một vài font miễn phí và còn lại là tính phí.
Jos Buivenga’s exljbris Font Foundry, at http://www.josbuivenga.demon.nl/
144 The Principles of Beautiful Web Design
■ Letterhead Fonts, at http://letterheadfonts.com
■ Blue Vinyl Fonts by Jess Latham, at http://bvfonts.com
■ Fountain Type by Peter Bruhn, at http://fountaintype.com/
■ Typodermic Fonts by Ray Larabie, at http://typodermic.com/
■ Misprinted Type by Eduardo Recife, at http://misprintedtype.com/
■ Pizzadude by Jakob Fischer, at http://pizzadude.dk/
Lựa chọn font chính xác
Cho dù bạn đã hiểu rõ mọi khía cạnh kĩ thuật của kiểu chữ và các nhóm chữ, và có được tất cả các font chữ trên thế giới này đi nữa thì việc chọn ra một font phù hợp vẫn là một việc khó khăn. Đó là bởi vì việc chọn font phải cần đáp ứng cả 2 khía cạnh: khía cạnh thẩm mĩ, cảm xúc và khía cạnh kĩ thuật. Vậy chúng ta sẽ bắt đầu từ đâu?
Để có thể bắt đầu công cuộc đi tìm font hoàn hảo, đầu tiên bạn cần xác định cảm xúc nào bạn muốn truyền tải đến nhóm khách hàng của mình. Bạn muốn thể hiện sự thời thượng và tuổi trẻ hay bạn muốn miêu tả một thần thái trí tuệ? Bạn muốn tạo một trang web dựa trên một chủ đề cụ thể, như du lịch Hawai hoặc lễ hội Mexico, hay bạn muốn truyền đạt một sự nhận dạng chính thức? Bằng cách hỏi mình những câu hỏi như vậy, và suy nghĩ về các font chữ qua khía cạnh cảm xúc của nó, bạn sẽ có thể quyết định được dễ dàng nên chọn font nào là hợp lý cho mục tiêu của bạn.
Nếu bạn không thể tự trả lời các câu hỏi trên thì hãy tự nghĩ ra các câu hỏi cho riêng mình. Hãy nhìn vào ảnh chụp từ trang web Mellow Mushroom ở hình 4.28. Bạn nghĩ nhà thiết kế đã tự hỏi mình những câu hỏi gì để chọn được font này? Rõ ràng là họ đang nhắm đến một cảm giác những chữ được viết bằng tay, nhưng tại sao? Tôi đoán rằng họ muốn truyền tải thông điệp đây là một thương hiệu gần gũi và dễ tiếp cận.
Hình 4.28
Hãy nghĩ thử xem, bạn đã thấy hàng tỉ các kí tự và hàng triệu các chữ trong cuộc đời bạn; vậy cho dù bạn có để ý hay không thì bạn đã từng có sự liên kết cảm xúc với chúng. Những cảm xúc này có thể làm nền tảng để bạn chọn font cho mình. Hãy nghĩ về những logo, bìa album, những cuốn sổ tay, và những chữ kí mà bạn đã thấy. Những kiểu chữ đó có ảnh hưởng gì đến suy nghĩ của bạn đối với những thứ mà chúng tượng trưng cho không?
Bây giờ từ nhữ ý nghĩ đó, sử dụng một thương hiệu chung là Joe’s Restaurant, hãy bắt đầu thử nghiệm lên nó. Font mà bạn chọn cho thiết kế này sẽ đóng một vai trò quan trọng trong việc quyết định thái độ của các khách hàng về nhà hàng. Hãy nhìn vào nhìn 4.29 và thử chọn ra một vài font mà bạn nghĩ là sẽ hợp với một quán rượu Ý nhỏ. Được rồi, bây giờ hãy chọn ra các font bạn sẽ sử dụng cho một nhà hàng sang trọng 5 sao. Thật sự ra không có câu trả lời chính xác nào cho các câu hỏi này nhưng sẽ có một vài sự lựa chọn sẽ thật sự thất bại nếu bạn chọn để trả lời. Đầu tiên hãy khoang vùng xuống những lựa chọn tốt nhất và cố xác định lại sự lựa chọn của bạn một lần nữa, cho tới khi nào bạn tìm được một font hiệu quả.
Hình 4.29
Hãy nhớ rằng không có font xấu, chỉ có font không phù hợp mà thôi. Trong khi một font có thể hoàn toàn thất bại trong một mục đích thì nó cũng có thể là font duy nhất đánh trúng tim đen trong một hoàn cảnh khác. Một mẹo ở đây là cố gắng giữ một đầu óc cởi mở. Nếu bạn có thể khoanh vùng lại một vài lựa chọn có khả năng thì hãy đem chúng đi hỏi những người bạn hoặc đồng nghiệp của bạn một câu hỏi: “Cái nào trong đây làm bạn cảm thấy [ tính từ ] ?” và sử dụng những cảm giác đó để lựa chọn.
Cuối cùng, khi bạn chọn font, điều mấu chốt là phải hạn chế sự lựa chọn của mình lại. Đây là một quy tắc kiên quyết: bạn chỉ được sử dụng tối thiểu là 2, nhưng không được quá 4 font khác nhau trong một thiết kế website. Trước khi áp dụng một font nào đó, hãy nhớ rằng bạn còn nhiều những biến thể khác của font đó nữa (bold, italic, condensed, black, regular, vân vân) để bạn có thể tạo thêm sự đa dạng mà vẫn giữ nguyên quy tắc. Hãy cố tránh sử dụng kết hợp 2 font serif hoặc 2 font sans-serif trong cùng một thiết kế. Giống như sự rối loạn màu sắc mà tôi đã nói ở chương 2 thì việc đặt 2 font khác nhau trong cùng một nhóm ở gần nhau có thể trông rất không thoải mái.
Điều chỉnh kích thước và chiều cao của font
Kích thước của chữ đã và luôn luôn là một chủ đề gây tranh cãi. Hơn 300 năm trôi qua trong lịch sử in ấn trước khi nhà sáng tạo ra kiểu chữ người Pháp Père Sébastien cho ra đời point. Mặc dù point là một đơn vị tiêu chuẩn trong đo lường kiểu chữ kể từ khi nó được ra đời thì sự “tiêu chuẩn” ở đây cũng được thay đổi nhiều lần trong lịch sử, vì sự khác biệt giữa đơn vị đo lường giữa Anh và Pháp. Sự khởi đầu của kiểu chữ kĩ thuật số đã xác định một point tương đương với 1/72 inch.
Việc điều chỉnh kích thước của chữ trên website cũng có một quá khứ phức tạp tương tự. Trong khi point là đơn vị đo lường chữ trong in ấn thì do sự đa dạng của độ phân giải dẫn đến có rất nhiều đơn vị đo kích thước chữ trên web. Những đơn vị đo thường được sử dụng trên web nhất đó là pixels, points, % và ems. Để khỏi đi vào quá sâu, tôi xin nói ngắn gọn cho các bạn: 16px = 12point = 100% =1em. Ở CSS thì pixel là đơn vị nhỏ nhất – và tốt nhất – để thiết kế kích thước chữ. Vì độ phân giải màn hình được để ở đơn vị pixel, cũng như tất cả các màn hình hiển thị khác, cho nên việc sử dụng pixel làm kích thước cho font chữ là điều dễ hiểu. Vậy tại sao mọi người không sử dụng pixel cho chữ trên web? Lí do chính là vì một số trình duyệt web không cho phép các chữ để chế độ pixel được thu nhỏ lại. Đây là một vấn đề tiềm tàng có thể xảy ra khi người truy cập muốn thu nhỏ kích thước của trình duyệt. Tôi nói tiềm tàng ở đây có nghĩa là đa số các trình duyệt hiện giờ đã cho phép người dùng có thể zoom trang web lại thay vì phóng to chữ lên. Nếu bạn muốn đảm bảo chữ trong website của bạn có thể thay đổi kích thước cũng như là có thể phóng to thu nhỏ thì bạn nên sử dụng đơn vị em.
Khi nghĩ đến pixel thì cách mà tôi tùy chỉnh kích thước và chiều cao chữ trên web đều tuân theo những quy tắc logic trong bài viết A List Apart của Wilson Miner năm 2007 “ Tùy chỉnh font chữ trên web dựa vào đường kẻ ô căn bản”. Cũng như các đường kẻ ô chia cột theo chiều dọc, đường kẻ ô căn bản là tập hợp những đường thằng nằm ngang cách đều nhau để các chữ có thể nằm lên đó. Sử dụng đường kẻ ô này làm cho phần nội dung của bạn có nhịp điệu hơn. Nội dung chính trong bài viết của Wilson là bạn xóa đi những đường lề mặc định, tùy chỉnh kích thước và chiều cao cho chữ của bạn trong phần body và sau đó cho tất cả các chữ của bạn có cùng một chiều cao và đường viền phía dưới chân giống nhau. Nghe có vẻ phức tạp nhưng thực ra nó lại rất dễ làm.
Cách sử dụng dấu chấm câu và các kí tự đặc biệt
Khi bạn gõ chữ trong các chương trình văn bản hiện đại, bạn sẽ thấy được một đường cong đẹp của dấu mở ngoặc kép và đóng ngoặc kép khi bạn gõ 2 lần vào phím đó. Một dấu ngoặc cong như vậy không hề có trên bàn phím của bạn, như hình 4.30 chỉ là đường thẳng; tuy nhiên, các chương trình gõ văn bản hiểu được rằng khi bạn cho sử dụng dấu ngoặc trong một câu thì bạn sẽ muốn cả 2 dấu mở và đóng ngoặc và chúng sẽ thay thế những kí tự mà bạn gõ vào với những kí tự đúng hơn. Điều tương tự xảy ra với dấu nháy (‘). Bạn đã bao giờ thấy mộn dấu nháy ASCII như dấu nháy trên bàn phím của bạn vào trong một cuốn sách hay một tấm brochure chưa? Tất nhiên là chưa rồi. Chúng ta chỉ nhìn thấy trong các tài liệu in ấn là các dấu ngoặc đơn. Sự thật ở đây là có rất nhiều các kí tự mà trên bàn phím của chúng ta không được thể hiện hết, mặc dù những kí hiệu đó được xuất hiện trên trang web và trong các tài liệu in ấn.
Hình 4.30
Vậy nên tất cả đều tuyệt vời và tốt đẹp cho những người sử dụng các chương trình gõ văn bản. Còn đối với chúng tôi, những người gõ chữ trong các HTML thì không có một sự điều chỉnh tự động nào để thay thế các kí tự trên bàn phím của chúng tôi thành những kí tự đúng hơn cả. Tùy thuộc vào loại mã hóa kí tự nào mà website của bạn sử dụng, khi bạn paste những kí tự này trực tiếp vào trong một file HTML thì bạn sẽ thấy được một đống những từ vô nghĩa xuất hiệt trên page của bạn. Thêm vào đó, những kí tự được sử dụng trong HTML như <and> sẽ tàn phá page của bạn khi mà nó xuất hiện khắp nơi.
Vì những lí do trên, Một loạt các mã đặc biệt hay được gọi là entities đã được hình thành; Chúng tôi đánh những mã này vào HTML để cho ra được những dấu câu đúng như chúng tôi cần. Ví dụ ở bảng 4.1 là một vài mã trong rất nhiều mã kí tự trong HTML. Những mã trong cột bên trái ngoài cùng được gọi là entity hoặc từ khóa. Ví dụ để có được biểu tượng copyright trên văn bản, nhập © thẳng vào file HTML của bạn, và bạn sẽ có được một dấu © trên trang của mình.
Bảng 4.1
Ứng dụng thực tế: Mẫu in hoàn hảo
Quay trở lại với dự án tái thiết kế trang web Southern Savers, tất cả các mảnh ghép giờ đã được thu thập đủ chỉ chờ được tập hợp lại thành một sản phẩm cuối cùng. Emily Smith đã có được một nền tảng web, kết cấu thông tin và một sơ đồ web. Tiếp theo, Andrew Ramos đã sử dụng moodboard để có được ý tưởng xây dựng thương hiệu cho web.
Đây là lúc mà Matthew Smith, giám đốc sáng tạo của nhóm Squared Eye ra tay và bắt đầu vào việc thiết kế website. Dựa trên những yếu tố thương hiệu của Andrew, công việc mà anh ưu tiên trước hết là chọn kiểu chữ. Anh nói : “Từ những việc trong xây dựng thương hiệu, tôi đã cố để giữ lại sự tự nhiên nhưng hợp lí trên website”. Một phần của sự hợp lý đó là tìm ra được một kiểu chữ có thể đi đôi cùng với chữ viết tay độc đáo và mềm mại trên logo.
Sau khi lướt qua các sự lựa chọn của mình, Matthew cuối cùng lựa font Slab Serif Fago Office Serif. Vì font chữ trên logo là một font biến thể trong nhóm slab serif, lựa chọn này có thể hợp với thương hiệu trong khi vẫn duy trì được tính tương phản đủ để nổi bật lên. Với phần thân, Matthew muốn có một font đơn giản nhưng nổi bật có thể làm cho tiêu đề Fago nổi bật lên. Helvetica là một sự lựa chọn tốt nhất trong trường hợp này. Cuối cùng anh rút lại font stack của mình đơn giản là: Helvetica, Arial, sans-serif. Hình 4.31 cho thấy Logo font chữ Fago Office Serif và phần thân Helvetica hòa hợp với nhau.
Hình 4.31
Khi đã lựa được các kiểu chữ phù hợp, tiếp theo là lựa chọn một vài màu sắc và kết cấu còn lại cho sơ đồ web. Matthew đã quyết đinh sẽ sử dụng màu sắc của bông hoa trên logo làm nguồn cảm hứng của mình. “Tôi thấy được có một kết cấu đẹp ở những cánh hoa, mang lại cảm giác vừa tinh tế lại vừa thiên nhiên, và tôi muốn mang điều này đến những phần còn lại của website”. Matthew đã kết hợp một chiếc ruy băng cho phần cong phía trên để nhấm mạnh logo, phía trên ruy băng anh sử dụng màu xanh đen từ bảng màu để mô tả cho những chiếc lá hoa mộc lan. Những yếu tố này cung cấp một cái nhìn tổng thể cho thanh chuyển hướng trên sơ đồ web của Emily.
Trong khi Matthew tiếp tục thiết kế bản website mẫu, thì Kevin Smith, nhà phát triển của dự án, bắt đầu đưa những font chữ vào web và kết hợp từ Wordpress sang website. Công việc của Kevin là quyết định sẽ sử dụng cách nào để đưa font vào trong website. Anh biết rằng mình sẽ phải sử dụng phương pháp thay thế chữ bằng hình ảnh, vì vậy anh chọn phương pháp Cufón cho đa số các tiêu đề, các nút bấm và các yếu tố chiến lược khác. Hình 4.32 cho cách mà những kiểu chữ này trông như thế nào trên sản phẩm cuối cùng.
Chúng ta sẽ chính thức coi trang của Southern Savers ở chương sau. Trước tiên chúng ta cần phải học về Hình ảnh: Tìm ở đâu, tìm cái gì và làm sao để sử dụng nó một cách hiệu quả nhất.