word排版技巧_借鉴大师的排版技巧

word排版技巧

I started "modernizing" the look of this blog last weekend. It's a mess^H^H^H^Hwork-in-progress. Asked for inspiration on twitter (thanks!) and started... hmm...well, stealing from:

我上周末开始“现代化”此博客的外观。 混乱中的^ H ^ H ^ H ^ H正在进行中。 在Twitter上寻求灵感( 谢谢 ！)，然后开始...嗯...好吧，从以下地方窃取信息：

• http://www.strangenative.com/category/ideas/

  http://www.strangenative.com/category/ideas/

• http://jasonsantamaria.com/

  http://jasonsantamaria.com/

• http://www.nitinh.com/

  http://www.nitinh.com/

• http://www.integralist.co.uk/

  http://www.integralist.co.uk/

I like stuff minimal. And this is a blog, so it's meant to be read. The only thing I can do to improve the life of the three people reading it is to make the content readable. This will also probably help the content appear more trustworthy. I know sometimes crappy design can cause the content to be perceived as lower quality.

我喜欢极少的东西。 这是一个博客，因此可供阅读。 我唯一能做的就是改善阅读内容的三个人的生活。 这也可能会帮助内容显得更值得信赖。 我知道有时候糟糕的设计会导致内容质量下降。

So design... and typography. Two areas where I don't know what I'm doing. I spent Saturday night assembling my Frankenstein of a design from these sites above. (I know good designers keep a list of stuff they stumble upon and like in preparation for the times when inspiration is needed. I, of course, don't do any such thing)

所以设计...和版式。 我不知道我在做什么的两个方面。 我花了星期六晚上从以上这些地点组装我的科学怪人设计。 (我知道优秀的设计师会保存一份清单，列出他们偶然发现并喜欢的东西，以备不时之需。我当然不会做任何这样的事情)

移动Safari阅读器 (Mobile Safari Reader)

Testing the little monster on iPhone I thought about checking it out in the Mobile Safari's Reader. Wha - not too far off! Except for the huge H1. I decided to look at how Reader renders more closely and see what I can learn from it.. After all Apple are known for their design work. They must be the Masters!

测试iPhone上的小怪物，我想过要在Mobile Safari的Reader中进行检查。 哇-不太远！ 除了巨大的H1 。 我决定看一下Reader如何更紧密地渲染，并从中学习到什么。.毕竟Apple以其设计工作而闻名。 他们一定是大师！

读者？ 什么读者？ (Reader? What Reader?)

Safari has a feature probably most technical folks ignore and mistake it for an RSS reader of some sorts. But it's actually a better rendering of a chunk of text. Seems like when Safari figures out there's a big piece of text they present this Reader button because they feel they can show a more readable version than some web sites (and we've all seen our fair share of hard-to-read pages and inconsiderate color schemes).

Safari具有的功能可能是大多数技术人员都忽略并误认为它是某种RSS阅读器。 但这实际上是更好的文本呈现效果。 似乎当Safari发现一大段文字时，他们显示“阅读器”按钮，是因为他们觉得与其他网站相比，它们可以显示出更具可读性的版本(而且我们所有人都看到了很多我们难以理解的页面，并且不加考虑配色方案)。

Click it, and you get a more readable version of the text.

单击它，您将获得更具可读性的文本版本。

How about that!

那个怎么样！

检查中 (Inspecting)

The best part is that the remote debugging feature in newer Safari lets you inspect the Reader-rendered content. As in, in Web Inspector you see the CSS, line-heights and all. For a person like me who can't tell Helvetica Neue from Helvetica Olde, deconstructing typography from an image is next to impossible. But with plain text CSS on the other hand...

最好的部分是，较新的Safari中的远程调试功能使您可以检查Reader呈现的内容。 就像在Web Inspector中一样，您可以看到CSS， line-height和所有内容。 对于像我这样无法告诉Helvetica Olde的Helvetica Neue的人，从图像中解构印刷版几乎是不可能的。 但是另一方面，使用纯文本CSS ...

1. Open your page in iOS simulator (connecting a device with a cable works too if you don't have a simulator)
   在iOS模拟器中打开页面(如果没有模拟器，则使用电缆连接设备也可以)
2. Click Reader
   点击阅读器

3. Open desktop Safari, select Develop menu (if you don't have the menu, go to Safari's Preferences, then Advanced, then "Show Develop menu in menu bar". If there's no such option, upgrade Safari)

   打开桌面Safari，选择“开发”菜单(如果没有菜单，请转到Safari的“偏好设置” ，然后依次单击“ 高级 ”和“在菜单栏中显示开发菜单”。如果没有此类选项，请升级Safari)

4. In the Develop menu find your device and inspect Reader~iphone.html page

   在“开发”菜单中找到您的设备并检查Reader~iphone.html页面

繁荣！ (Boom!)

The page is yours to inspect.

该页面由您检查。

There in plain text CSS you can learn and steal all the fonts and sizes and padding you want.

在纯文本CSS中，您可以学习和窃取所需的所有字体，大小和填充。

结论 (In conclusion)

Three things.

三件事。

The Reader is done in HTML. A native feature of a native app (browser). Take that nativists! 😛

阅读器以HTML格式完成。 本地应用程序(浏览器)的本地功能。 拿那些本土主义者 ！ 😛

This feature is also available on the desktop:

此功能在桌面上也可用：

Lastly: beats me why do we use Serif fonts on the Web/Mobile. I've seen "best practices" suggesting that Serif is more readable on paper, while sans-serif is better on screen. For whatever definition of "readable" (easier? faster? retaining more?). But whoami to judge, I'm merely a humble apprentice 🙂

最后：打败我，为什么我们要在Web / Mobile上使用Serif字体。 我见过“最佳做法”，这表明衬线字体在纸上的可读性更高，而无衬线字体在屏幕上的可读性更好。 对于“可读”的任何定义(更容易？更快？保留更多？)。 但是要判断的whoami ，我只是个谦虚的徒弟

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/borrowing-typography-tricks-from-the-masters/

word排版技巧