nugget vs2015_Type Nugget：好的排版是关于找到合适的游乐场

雨点打透心脏的1/2处 2022-12-03 09:55 197阅读 0赞

nugget vs2015

![Play time][]

This is a golden era for web typography – in relative terms at least.

这是Web排版的黄金时代-至少相对而言。

After spending most of two decades working within the tiny design sandpit of Times, Helvetica, Arial and Courier, we now have the facility to embed almost any font we like on a page or app (without needing a flashy hack either).

在Times，Helvetica，Arial和Courier的微型设计沙坑中工作了二十多年后，我们现在可以将几乎我们喜欢的任何字体嵌入页面或应用程序中(也不需要任何技巧)。

Have our tools caught up? I’d argue probably not.

我们的工具赶上了吗？ 我可能不会。

While online type services offer thousands of free embeddable fonts, experimenting with those fonts in Sketch, Illustrator, Photoshop or even XD is hardly seamless.

在线类型服务提供了数千种免费的可嵌入字体，而在Sketch，Illustrator，Photoshop甚至XD中尝试这些字体几乎是无缝的。

And good typography is so often about trial and error. While sound typographic principles will always help to guide you, lots of fantastic type combinations shouldn’t work so well in theory.

好的印刷术常常是关于反复试验的。 虽然可靠的印刷原则将始终为您提供指导，但许多出色的字体组合在理论上应该不太理想。

So here’s a promising new free tool to help your typographical tweaking.

因此，这是一个很有前途的新免费工具，可帮助您进行印刷调整。

## 型块 **(** Type Nugget**)** ##

[Type Nugget][] is a handy web app designed to be that place to play and experiment. It brings together an extensive external font list with robust CSS controls to let you tune your way to attractive type.

[Type Nugget][]是一款方便使用的Web应用程序，旨在作为可以玩耍和进行实验的地方。 它汇集了广泛的外部字体列表和健壮CSS控件，可让您将自己的方式调整为吸引人的字体。

![Type Nugget][Type Nugget 1]

## 用户界面 **(** The UI**)** ##

The Type Nugget UI is divided into left and right halves – live preview on the left, controls the right. There are five fairly sensible categories for your type styling, nicely organized into an accordion menu.

Type Nugget UI分为左半部分和右半部分-左侧的实时预览，控制右侧。 对于您的字体样式，有五个相当合理的类别，它们被很好地组织为手风琴菜单。

1.  **Global type styles**: Including background color
    
    **全局字体样式** ：包括背景色
2.  **Headings**: H1 – H6
    
    **标题** ：H1 – H6
3.  **Paragraphs**: Base text, Strong, Emphasis
    
    **段落** ：基本文本，重点，重点
4.  **Links**: Hover, Active, Visited
    
    **链接** ：悬停，活动，访问
5.  **Lists**: Order lists, Unordered lists & List items
    
    **列表** ：订单列表，无序列表和列表项

![Accordion menu][]

Each accordion panel offers all the relevant CSS text properties you’d want to have access to including `font-style` to `letter-spacing` to `text-align` to `text-transform`.

每个手风琴面板都提供了您想要访问的所有相关CSS文本属性，包括`font-style` ， `letter-spacing` ， `text-align` ， `text-transform` 。

## 导入外部字体 **(** Importing External Fonts**)** ##

For me, the most interesting part of Type Nugget is being able to play with fonts. Adding fonts to your collection is easy. Hit the ‘Font-family’ dropdown to open the ‘*Select Theme Fonts*’ option.

对我来说，Type Nugget最有趣的部分是能够使用字体。 将字体添加到收藏夹很容易。 点击“字体家族”下拉列表以打开“ *选择主题字体* ”选项。

![Select Font Theme][]

This launches a scrolling modal window that lets you browse hundreds of fonts and collect the ones you like. As far as I can tell, Type Nugget currently only offers Google Fonts – though there’s nothing stopping them from adding other font services in future. Your fonts collect at the top.

这将启动一个滚动模式窗口，使您可以浏览数百种字体并收集所需的字体。 据我所知，Type Nugget当前仅提供Google字体-尽管没有阻止其将来添加其他字体服务的措施。 您的字体收集在顶部。

![Select theme fonts][]

The type selection screen shares quite a bit with Google Fonts’ recent UI redesign. That’s not a bad thing – it’s a good UI.

类型选择屏幕与Google字体最近的UI重新设计有很多相似之处。 这不是一件坏事–这是一个很好的UI。

## 生成您CSS **(** Generating your CSS**)** ##

When you’re happy with the look of your text, hit the ‘Generate Code’ button and you’ll be taken to screen like this.

当您对文本的外观感到满意时，请点击“生成代码”按钮，您将被带到这样的屏幕。

![Type Nugget export][]

As you can see, the link at the bottom allows you to grab a copy of the CSS.

如您所见，底部的链接使您可以获取CSS的副本。

More interestingly, Type Nugget also provides you with a link to your CSS on their CDN. You could paste the link straight into the top of your HTML and see to in action immediately.

更有趣的是，Type Nugget还为您提供了CDN上CSS的链接。 您可以将链接直接粘贴到HTML的顶部，然后立即查看实际操作。

In practice, I suspect you’ll want your CSS local – going back to Type Nugget to make small tweaks seems needless. Nevertheless, it’s a nice show of faith. ‘*Not only will we help you style your type – we’ll even help you serve it!*’.

在实践中，我怀疑您会希望CSS处于本地状态–回到Type Nugget进行细微调整似乎是不必要的。 然而，这是对信仰的很好表现。 ' *我们不仅会帮助您为您的类型设置样式-我们甚至还会为您提供服务！* '。

## 结语 **(** Wrapping up**)** ##

Type Nugget isn’t perfect. It’s still in beta and hints at a future where it can re-style your type for different screen sizes. While that’s cool, I’d almost prefer to NOT know about it now. Then when it arrives, it’s a ‘*Wow!*’ rather than ‘*about time!*’.

Type Nugget并不完美。 它仍处于测试阶段，暗示着将来可以为不同的屏幕尺寸重新设置您的字体的样式。 虽然很酷，但我几乎不希望现在不知道它。 然后，当它到达时，它是“ *哇！* “而不是” *关于时间！* '。

But I’m being picky. Even in this beta-state, I think Type Nugget has some real value for designers. Check it out and let me know what you think.

但是我很挑剔。 即使在这个beta状态下，我认为Type Nugget对设计师也有一些真正的价值。 检查一下，让我知道您的想法。

*Originally published in the [SitePoint Design Newsletter][]*.

*最初发布在[SitePoint设计新闻中][SitePoint Design Newsletter]* 。

> 翻译自: [https://www.sitepoint.com/type-nugget-good-typography-finding-right-playground/][https_www.sitepoint.com_type-nugget-good-typography-finding-right-playground]

nugget vs2015

[Play time]: /images/20221123/e994033e8f1348999839c5c7c15e50dc.png
[Type Nugget]: http://beta.typenugget.com/
[Type Nugget 1]: /images/20221123/71f1c1f82e2a4d219daa4e2ec7c76306.png
[Accordion menu]: /images/20221123/e3a4fcd4de8a43a0addc8e69eb2bbb9c.png
[Select Font Theme]: /images/20221123/559c5d16e9ca4e5ab2a6b3a683ad5a74.png
[Select theme fonts]: /images/20221123/86ce7b0c83d044dfaad5b8cded4d15f5.png
[Type Nugget export]: /images/20221123/3d949bcfe69b497493a8fbfd7a6d5211.png
[SitePoint Design Newsletter]: https://www.sitepoint.com/newsletter/
[https_www.sitepoint.com_type-nugget-good-typography-finding-right-playground]: https://www.sitepoint.com/type-nugget-good-typography-finding-right-playground/