While their body font sizes may be quite similar, there’s much great variation in heading sizes in the newspaper. The Times employs a steeper type scale than The Wizard of Oz. If you compare the typography of a typical newspaper to that of a classic paperback novel (below), you’ll notice some interesting differences beyond the obvious paper sizes. We can learn from traditional print formats here. generates an consistently scaled set of font sizes Does a single type scale ratio work for all device sizes? This is a great foundation for your typography CSS. There’s even a dummy layout on the right panel to eye-test your work and a CodePen export option. My favorite is Jeremy Church’s (below), a tool that lets you quickly test different type scales and generate working CSS. There are some great tools that let you tweak and test type scales in generated CSS in real time. Okay, so I need a pocket calculator to size my text? Happily, no. That makes our default paragraph size 1em (or 18px): body /* 21.60px */ Let’s start with a body font size of 18px. It’s like a musical scale for type sizing. It allows us to set a single scaling ratio to generate all our font sizes while keeping them in harmony. Type scaling -sometimes called modular scaling – lets you use simple math to give you simple typographic answers. Frankly, it was exhausting, because there were so many finicky little decisions and very few totally wrong answers. How do you decide on the sizing of your titles, section headings, subheaders, lists and blockquotes?įor me, the answer used to be, “ Umm … tweak it till it looks … kinda right?” I’d scale up a heading, bump the weight a little, jog it a pixel up, … push it back down, … and back up again. When you’ve settled on your base text sizes, eye-test them on real screens, tablets, and phones until you’re happy with them as a starting point. Remember that these big internet properties do a lot of user testing, so put some thought into where your application fits in relation to this list. Typical body font sizes for well-known sites Body font-size samples for The New York Times,, and Obviously, these are broad trends, and not hard and fast rules, but you can see these general trends in the list below. Social media and ecommerce apps that use busier, more modular UI units have tended towards 14px to 16-pixel body fonts. However, with today’s larger screens, text-heavy sites such as blogs and news services are generally choosing 18-pixel to 21-pixel body font sizes. For many years, 16 pixels was considered the default body size of the Web. The best way to save your sanity is to have a design system that can generate quick answers to most of the little questions-which lets you concentrate on the “big picture” decisions.Īs readers will consume more body text than any other text size, often our first critical typography decision is to set the body font size for our default layout (let’s put responsive design to the side for now). There are literally hundreds of tweakable variables, and it’s very easy to spend endless hours adjusting sizing, line heights, margins, and weights. Setting up the typography for any new project is always a complex task.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |