As designers, we are acutely aware of how large a role our chosen typefaces play in conveying a brand’s character. Fonts carry with them an emotional impact and expressive quality. Readability enhances a user’s experience. And research suggests that 95% of a website’s design is typography.

作為設計師，我們敏銳地意識到，我們選擇的字體在傳達品牌個性方面所起的作用。 字體帶有情感影響力和表現(xiàn)力。 可讀性增強了用戶的體驗。 研究表明，網(wǎng)站的設計中有95％是版式。

該項目 (The Project)

And so, when I was asked to participate in a recent one-week design challenge, in which the goal was to create a prototype landing page showcasing a randomly picked font, I was looking forward to the journey ahead.

因此，當我被要求參加一個為期一周的最近的設計挑戰(zhàn)賽時，我的目標是創(chuàng)建一個展示隨機選擇的字體的原型著陸頁 ，我很期待前進。

And the typeface I was handed; the incredible Baskerville.

還有我的字體。 令人難以置信的巴斯克維爾。

巴斯克維爾-快速歷史 (Baskerville — A Quick History)

Baskerville is a Transitional typeface, meaning it is a refinement of the Old-style typefaces that preceded it. It is named after its creator, John Baskerville (1706–1775), who designed it in the 1750s as part of an ambitious project to create books of the highest possible quality.

Baskerville是一種Transitional字體，這意味著它是對它之前的Old-style字體的改進。 它以其創(chuàng)造者約翰·巴斯克維爾(John Baskerville，1706–1775年)的名字命名，約翰·巴斯克維爾(John Baskerville)于1750年代對其進行了設計，這是一個雄心勃勃的項目的一部分，目的是創(chuàng)造最高質(zhì)量的書籍。

Moreover, Baskerville took a radical approach in which much of his designs recalled aspects of his own handwriting. And, compared to other typefaces popular during the period, Baskerville also increased the contrast between thick and thin strokes, made the serifs of his characters sharper and more tapered, and defined curved strokes as more circular in shape.

此外，巴斯克維爾(Baskerville)采取了激進的方法，他的許多設計都回想起了自己的筆跡。 并且，與該時期其他流行的字體相比，巴斯克維爾還增加了粗筆和細筆的對比度，使他的字符的襯線更清晰，更尖細，并將彎曲筆畫定義為更圓的形狀。

Printed version of Virgil’s “Aeneid” by John Baskerville (1757). 約翰·巴斯克維爾(1757)印制的維吉爾的《 埃涅德》。

Baskerville first used his typeface in a printed edition of Virgil’s epic Aeneid in 1757, which was then followed by other classics, including an edition of John Milton’s Paradise Lost, wherein Baskerville wrote a preface explaining his ambitions.

1757年，巴斯克維爾在維吉爾的史詩《 埃涅度》的印刷版中首次使用了他的字體，隨后又出版了其他經(jīng)典作品，包括約翰·彌爾頓的《 失樂園》 ，其中巴斯克維爾寫了序言來解釋他的野心。

Having been an early admirer of the beauty of letters, I became insensibly desirous of contributing to the perfection of them. I formed to myself ideas of greater accuracy than had yet appeared, and had endeavoured to produce a set of types according to what I conceived to be their true proportion.

作為對字母之美的早期崇拜者，我變得非常渴望為字母的完美做出貢獻。 我對自己形成了比以前更精確的想法，并努力根據(jù)我認為是它們的真實比例來產(chǎn)生一組類型。

— John Baskerville, preface to Milton’s “Paradise Lost” (1758).

約翰·巴斯克維爾(John Baskerville)，是彌爾頓的《失樂園》(1758)的序言。

Even today, Baskerville remains a truly excellent typeface for book design. Its sharp, high-contrast forms make it highly legible — and it is considered to be a true representation of eighteenth-century rationalism and neoclassicism.

即使在今天，Baskerville仍然是書籍設計的真正優(yōu)秀字體。 它鮮明，高對比度的形式使其清晰易讀-并且被認為是18世紀理性主義和新古典主義的真實代表。

設計過程 (Design Process)

為什么-設計開始 (The Why — Design Inception)

In beginning my design process, I first defined my Why. This was born through consideration of Baskerville and the interesting duality it seemed to exhibit.

在開始設計過程時，我首先定義了Why 。 這是通過考慮巴斯克維爾(Baskerville)以及它表現(xiàn)出的有趣的對偶性而誕生的。

Conducting my research and delving deeper into its forms, Baskerville’s most obvious characteristics were that it was confident, resilient, and timeless — all qualities likely demonstrated in the fact that it is a refinement of Old-style designs.

在進行我的研究并深入研究其形式時，巴斯克維爾最明顯的特征是自信 ，有彈性且歷久不衰 -所有這些特質(zhì)都可以通過對老式設計的完善來證明。

However, where many of Baskerville’s characters were clean, defined, and stoic, others were flourishing and elegant; a personality exemplified in its uppercase “Q” with beautiful flowing swash, as well as the typeface’s iconic ampersand.

然而，在許多巴斯克維爾的人物很干凈 ， 定義和堅忍 ，其他人蒸蒸日上 ， 典雅 ; 以大寫字母“ Q”舉例說明的個性，帶有漂亮的流動斜線以及字體的標志性“與”號。

…And as I thought more I also discerned an intellectual, sophisticated, and mysterious quality to Baskerville, again shown in the subtle details of some of its characters, lending to an evocative sense of smokiness and a strange intensity.

…而且我想得更多，我也對巴斯克維爾(Baskerville)有著敏銳的知識 ， 精致和神秘的特質(zhì)，再次以其某些角色的微妙細節(jié)表現(xiàn)出來， 給人一種令人回味的煙熏感和奇怪的強度。

情緒與視覺語言 (Mood & Visual Language)

With Baskerville inspiring these various (and sometimes competing) concepts, I began to think about the visual language for my design, along with iterating on various mood boards.

隨著巴斯克維爾(Baskerville)啟發(fā)了這些(有時是相互競爭的)概念，我開始考慮自己設計的視覺語言，并在各種情緒板上進行迭代。

Ultimately, I really wanted to capture the essence of duality in what I felt was Baskerville. And I didn’t want to create something too traditional or predictable either, or anything that simply showed that Baskerville was “old” (during my research, I saw too many existing type specimens for Baskerville that followed this direction).

最終，我真的很想抓住巴斯克維爾(Baskerville)的雙重性本質(zhì)。 而且我也不想創(chuàng)建任何過于傳統(tǒng)或可預測的東西，或者僅僅顯示巴斯克維爾“古老”的東西(在研究期間，我發(fā)現(xiàn)遵循該方向的巴斯克維爾已有太多類型的標本)。

For myself, Baskerville felt neither traditional nor old. But it was timeless.

就我自己而言，巴斯克維爾既不覺得傳統(tǒng)也不古老。 但這是永恒的。

—

-

Colour: For my colour palette, I wanted to represent Baskerville’s duality of character with grey and cream tones set against deep and dreamy pinks and blues — an analogous colour palette set against a monochromatic one.

顏色：對于我的調(diào)色板，我想用深和夢幻的粉紅色和藍色設置的灰色和奶油色調(diào)來代表巴斯克維爾的雙重角色-類似的調(diào)色板設置在單色上。

The depth of these colours also aimed to emphasize my Why’s motif of sophistication, and the juxtaposition of bold colour against monochrome aimed to embody Baskerville’s confident personality.

這些顏色的深度還旨在強調(diào)我“ 為什么”的 精致主題，將大膽的顏色與單色并置，以體現(xiàn)巴斯克維爾的自信個性。

Further to this, as I experimented with these colours, I found that their dream-like qualities resonated with a sense of mystery and brooding character. Perfect for what I was trying to achieve through my Why.

除此之外，當我嘗試這些顏色時，我發(fā)現(xiàn)它們的夢dream般的特質(zhì)與神秘感和沉思特質(zhì)共鳴。 非常適合我通過“ 為什么”嘗試實現(xiàn)的目標。

• Keywords: Deep, dreamy, analogous, monochromatic, mysterious.

  關鍵字：深刻，夢幻，類似，單色，神秘。

—

-

Space & Shape: John Baskerville was a self-professed perfectionist, with the forms and construction of his typeface meticulously crafted. So my design needed to show that level of precision, measured detail, and (similar to colour) depth.

空間與形狀：約翰·巴斯克維爾(John Baskerville)是一位自稱的完美主義者，他的字體的形狀和構造均經(jīng)過精心制作。 因此，我的設計需要顯示該精度級別，所測量的細節(jié)和(類似于顏色) 深度 。

That being said, as the characters themselves took occasional inspiration from John Baskerville’s own handwriting, the man was not opposed to adding a natural, flowing quality to his work.

話雖這么說，但由于角色本身偶爾會從約翰·巴斯克維爾(John Baskerville)的筆跡中汲取靈感，因此他并不反對為作品增添自然 流暢的品質(zhì)。

Baskerville’s use of space, as well as its carefully considered forms, are what really makes it feel elegant, sophisticated, and intellectual.

巴斯克維爾(Baskerville)對空間的利用，以及經(jīng)過精心考慮的形式，才真正使它顯得優(yōu)雅 ， 精致 ， 和知識分子。

Furthermore, since Baskerville is an incredibly readable font, openness would be another important aspect to convey.

此外，由于Baskerville是一種難以置信的字體，因此開放性將是傳達的另一個重要方面。

• Keywords: Open, precise, measured, defined, elegant, natural, flourishing.

  關鍵字：開放，精確，測量，定義，優(yōu)雅，自然，繁榮。

—

-

Movement: Similar to its use of space and shape, Baskerville is full of constant movement due to the fact that it is a legible and readable typeface.

運動：與使用空間和形狀類似，Baskerville由于其字體清晰易讀，因此充滿了不斷的運動。

And to add to this, with it being occasionally punctuated by its use of flourishes and swashes, there is a feeling of rhythmic progression and interest not shown in other typefaces.

除此之外，它偶爾會因使用華麗和水刺而被打斷，有一種節(jié)奏性的發(fā)展和興趣，這在其他字體中是沒有表現(xiàn)出來的。

• Keywords: Flowing, progressive, constant.

  關鍵字：流動，漸進，恒定。

—

-

And so below is the final iteration of my mood board design:

以下是我的情緒板設計的最終迭代：

This mood board captures my deep, dreamy colour palette, and aims at expressing my visual language to further evoke feelings relating to my Why:

這個情緒板捕捉了我深deep而夢幻的調(diào)色板，旨在表達我的視覺語言，以進一步喚起與我的為何有關的感覺：

• First, the photographs of the gentlemen here show Cary Grant — an individual who, as I researched and began to think more on Baskerville and who it would be if it were a person, seemed to be a fun fit. Grant, amongst many things, represents the confidence and sophistication of Baskerville, but framing the photographs so that they cut off below his eyes adds to the sense of mystery.

  首先，這里的先生們的照片顯示了卡里·格randint(Cary Grant)，這個人，正如我研究并開始對巴斯克維爾(Baskerville)進行更多的思考，如果是一個人，那似乎很有趣。 格randint(Grant)在許多方面都代表著巴斯克維爾(Baskerville)的自信和成熟 ，但是對照片進行取景以使它們在他的眼睛下方被切斷，則增加了神秘感 。

• In the top left, the MC Escher-like “impossible geometry” further brings this feeling of sophistication and intellectualism, but also of measured rationalism juxtaposed with mysteriousness; again, the interesting duality of Baskerville.

  在左上角，類似MC Escher的“不可能的幾何形狀”進一步帶來了這種精致和理性的感覺，也帶來了與神秘并列的審慎理性主義 。 再次，巴斯克維爾有趣的二重性 。

• Which in turn leads into the depictions of the clouds and smoke. Here, they explore that mysterious and brooding, yet elegant and flourishing, quality within Baskerville.

  反過來導致對云和煙霧的描繪。 在這里，他們探索了巴斯克維爾(Baskerville)那種神秘而沉思 ，卻又優(yōu)雅而繁榮的品質(zhì)。

中保真度和結構設計 (Mid-Fidelity and Structural Design)

As part of this design challenge, it was required that the final type specimen be made in Adobe Photoshop, which in itself provided some unique challenges (more on that later).

作為設計挑戰(zhàn)的一部分，要求最終類型的標本必須在Adobe Photoshop中制作，這本身就帶來了一些獨特的挑戰(zhàn)(稍后會詳細介紹)。

Shown here is my final mid-fi design. I wanted to get as close to my final proportions and layout as possible before adding any colour, something I felt was important in respect to John Baskerville’s perfectionism (and a quality of his I believe I share).

這里顯示的是我最終的中保設計。 在添加任何顏色之前，我想盡可能地接近最終比例和布局，這對約翰·巴斯克維爾(John Baskerville)的完美主義(以及我相信的他的素質(zhì))而言非常重要。

Around 80–90% of the elements are perfectly aligned to the 12 column grid that is typical of modern webpages, which also allowed the design to feel open with room to breathe.

大約80-90％的元素與現(xiàn)代網(wǎng)頁中典型的12列網(wǎng)格完全對齊，這也使設計感到開放而有呼吸的空間。

The element that most notably breaks this rigid and defined structure is the large diagonal letter river that flows through the first part of the design. This is perhaps one of my favourite parts of the landing page (even more so once colour was added). It adds a sense of confidence and movement while beautifully demonstrating many of Baskerville’s characters, and its complexity really adds to the sophisticated feeling I was working to evoke.

最明顯破壞這種剛性和定義結構的元素是流過設計第一部分的大對角字母河。 這可能是我最喜歡的目標網(wǎng)頁之一(添加顏色后更是如此)。 它在展示巴斯克維爾許多人物的同時，還增加了自信和動感，其復雜性確實增加了我正在喚起的復雜感覺。

Continuing on, the landing page would then give visitors the opportunity to test Baskerville in various weights and point sizes (using a quote belonging to Cary Grant). And in the section beneath this, we see examples of all of Baskerville’s alphanumeric characters accompanied by a faux mock-up of Paradise Lost — the intent here being to imitate Baskerville’s use in high-quality book design.

繼續(xù)，登錄頁面將使訪問者有機會測試各種重量和磅值的Baskerville(使用屬于Cary Grant的報價)。 在下面的部分中，我們看到了巴斯克維爾所有字母數(shù)字字符的示例，并附帶了一個仿造的《 天堂迷失》模型 ，其目的是模仿巴斯克維爾在高質(zhì)量書籍設計中的使用。

The middle portion of my landing page is then dominated by another vertical letter river, again that breaks my otherwise rigid grid, which showcases some of the key characteristics and subtle elements of Baskerville’s most unique characters. And to continue experimenting with a sense of depth, this section is also backed by a collection of characters at a reduced opacity.

然后，目標網(wǎng)頁的中間部分由另一個垂直字母河控制，這又打破了我本來就很僵硬的網(wǎng)格，該網(wǎng)格展示了巴斯克維爾(Baskerville)最獨特字符的一些關鍵特征和微妙元素。 為了繼續(xù)嘗試深度感，此部分還以不透明度降低的字符集為后盾。

The last section I wished to include in my landing page was the opportunity for visitors to see Baskerville paired with modern, sans serif fonts. I included another cheeky, yet not so subtle, nod to Cary Grant here. No one said Baskerville wasn’t allowed a sense of humour!

我希望在登錄頁面中包含的最后一部分是訪問者有機會看到Baskerville與現(xiàn)代無襯線字體配對的機會。 我在這里向卡里·格randint(Cary Grant)點頭，但又不那么微妙。 沒有人說不允許巴斯克維爾幽默。

最終的高保真設計與原型 (Final Hi-Fidelity Design & Prototype)

Moving on from my mid-fi, I began the process of experimenting with the chosen colours from my visual language. To represent Baskerville’s sense of consistent progression, I also wanted to use a lot of gradients. For which I will not apologize!

從我的中音開始，我開始嘗試從視覺語言中選擇顏色的過程。 為了表示巴斯克維爾(Baskerville)的持續(xù)進步感， 我還想使用很多漸變 。 為此我不會道歉！

And so here it is, the pay-off! Not only do I love a good gradient, but playing with these against the rigid structure I had created really added to the duality and juxtaposition I was aiming to achieve.

因此，這就是回報！ 我不僅喜歡一個不錯的漸變色，而且還可以將它們與我創(chuàng)建的剛性結構一起使用，這確實增加了我想要達到的二元性和并列性。

For the background of the design, my gradient becomes deeper, darker, and broodier, as if we are descending into a strange dream-filled sleep.

在設計的背景下，我的梯度變得更深，更暗，更沉悶，仿佛我們正在進入一個充滿夢幻的夢境般的睡眠。

And to further reinforce this, my letter rivers, along with the alphanumeric/Paradise Lost section, both use gradients to capture the mysterious, yet sophisticated, air I was going for.

為了進一步加強這一點，我的字母河以及字母數(shù)字/ 失落天堂部分都使用漸變來捕獲我想要的神秘而又復雜的空氣。

—

-

Another element that stands out in my final design is the focus on Baskerville’s big, beautiful, italic ampersand. This character is quite obviously a pleasure to look at in its own right, so I sought to use it to my advantage in my design.

在我的最終設計中脫穎而出的另一個元素是對巴斯克維爾(Baskerville)大，漂亮，斜體的“＆”號的關注。 顯然，很高興看到這個角色，因此我嘗試在設計中利用它。

Utilizing this ampersand as a decorative aspect — to guide the eye, add visual flair, or frame certain sections — proved to be quite powerful.

事實證明，將“＆”號用作裝飾方面(引導眼睛，增加視覺風格或構圖某些部分)非常有效。

—

-

I created the isometric shapes in Adobe Illustrator, inspired by the work of Daily Minimal. I believe they do an excellent job of conveying Baskerville’s sense of intellectualism, sophistication, and mystery. Moreover, their precise geometry also further helps reinforce the theme of perfectionism that had begun to manifest in my design.

我受Daily Minimal的啟發(fā)，在Adobe Illustrator中創(chuàng)建了等距形狀。 我相信他們在傳達巴斯克維爾的智識，成熟和神秘感方面做得非常出色。 此外，它們精確的幾何形狀還進一步有助于強化已經(jīng)在我的設計中開始體現(xiàn)的完美主義主題。

—

-

A final decorative element you may notice are the various floating diamonds. These essentially came about by accident with little forethought (something that, when it happens during the design process, I truly love and find exciting).

您可能會注意到的最后一個裝飾元素是各種浮動鉆石。 這些本質(zhì)上是偶然的，很少有預見性的事情(在設計過程中發(fā)生的事情，我真的很喜歡并且發(fā)現(xiàn)令人興奮)。

Scattered throughout the beginning and end sections of my landing page, playing with the size and opacity of these diamonds also helped add depth, elegance, and mystery to the design.

分散在我著陸頁的開始和結束部分，玩弄這些鉆石的大小和不透明性也有助于增加設計的深度，優(yōu)雅和神秘感。

I have included the hi-fi prototype again at the end of this case study in full-width, so that you may experience it how it is truly intended.

在本案例研究的最后，我將全尺寸再次包含了高保真原型，以便您可以真正體驗到它。

結論 (Conclusion)

As mentioned earlier, I was excited to start on this project from the outset. It was great getting to portray and experiment with a typeface in this way — very meta, in other words, but I think that in itself really lent well to Baskerville and the direction I chose to go.

如前所述，我很高興從一開始就開始這個項目。 能夠以這種方式來描繪和試驗字體真是太好了-換句話說，它非常有用，但是我認為它本身確實非常適合Baskerville和我選擇的發(fā)展方向。

I will most likely go through this exercise again for my own satisfaction; choosing a different font and searching for an exciting way to represent it.

為了自己的滿意，我很可能會再次進行此練習； 選擇其他字體并尋找一種令人興奮的方式來表示它。

I certainly feel that I was able to bring much of my own aesthetic to this project too, while still remaining true to my Why and the spirit of Baskerville. And I found my only real challenge during the process was dealing with the huge amount of text layers in Adobe Photoshop. As is known, Photoshop is not the most friendly nor the most optimized application for dealing with text! But whatever, it worked out in the end, s’all good!

我當然感覺到，我也能夠?qū)⒆约旱脑S多美感帶到這個項目中，同時仍然忠于我的《 為什么》和巴斯克維爾的精神。 而且我發(fā)現(xiàn)在此過程中，我唯一真正的挑戰(zhàn)是在Adobe Photoshop中處理大量文本圖層。 眾所周知，Photoshop并不是處理文本的最友好也不是最優(yōu)化的應用程序！ 但是無論如何，最終都成功了，一切都很好！

未來考慮 (Future Considerations)

I do have a few elements I would like to refine in this design, should I wish to add that final coat of polish.

我確實想在此設計中完善一些元素，如果我希望添加最后的拋光劑。

• Font colours/sizing: The body text that gives an overview of Baskerville’s history could do with some property tweaking to make it a bit more legible against the background gradient.

  字體顏色/大小：概述Baskerville歷史的正文文本可以通過一些屬性調(diào)整來實現(xiàn)，以使其在背景漸變下更清晰易讀。

• Headings: I may wish to experiment with headings to give more context to the various sections of the design, rather than leaving it in its current, more abstract, state.

  標題：我不妨嘗試使用標題為設計的各個部分提供更多的背景信息，而不是將其置于當前的，更抽象的狀態(tài)。

Enjoy the full-width prototype below, and I would love to hear your thoughts! Thanks for reading.

享受下面的全尺寸原型，我很想聽聽您的想法！ 謝謝閱讀。

翻譯自: https://uxdesign.cc/baskerville-typeface-specimen-a-ui-case-study-1eeff7663bd7

總結

以上是生活随笔為你收集整理的巴斯克维尔字体标本案例研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。