Webdesigntuts+

---

Improving Layout With Vertical Rhythm Posted: 13 Aug 2013 02:07 AM PDT Learning all about the ins and outs of the technical side of typography is good. It will give you a solid grounding when looking for typefaces or fonts and will help you understand a little more about the art of typography itself. You’ll soon realise how much hard work it takes to get type right at any time, not just on the web. One of the most important aspects of typography on the web is vertical rhythm – and this can also be one of the more difficult to get right, as it often takes a lot of time and experimentation. There are many ways to achieve a good vertical rhythm on a page, though some may boil down to simply what feels and looks right to you on the screen. What is Vertical Rhythm? Rhythm is… a strong, regular, repeated pattern of movement or sound and the more consistent and familiar a rhythm is, the better and stronger it becomes. We can apply this to the web with the term "vertical rhythm" – in the Western culture, as we read from left to right and top to bottom, we want to try to keep a consistent visual rhythm to the content on our page. Keeping our vertical rhythm consistent means that we can create a visually more-relaxing experience, evoking a feeling of familiarity to our users, removing visual barriers and making content far more readable. Creating a good vertical rhythm on a website design can be tough. The aim is to create a harmonious relationship between all the content (including images and text) on your website. For example, how does the spacing between paragraphs look (is it too big or too small?), how easy do you, yourself, find it to read? There are many questions to ask and most of it will boil down to how easy it is to read (even quickly scanning across) your website’s content. Even just the slightest changes that make for a better reading experience on your website will make for a huge difference to your users. What Defines Good Vertical Rhythm? So now we know what vertical rhythm is, we need to learn a little more about what makes a good vertical rhythm. The key here is readability. When you're working with typography on the web, the two major things you want to pay attention to are the font sizes and line heights. Although there's so much else that goes along with those two things, these are your two key components to creating a better vertical rhythm on your page design. If your font sizes don't fit together well – by having massive heading sizes and ridiculously tiny body paragraph text sizes, for example – then this is going to make the content that much harder to read or scan through quickly. Similarly, if your content has a line height that makes text awkward to read – either through being spaced too closely together or being too far apart – that will turn your users off, when you want to be engaging with them. Creating Good Vertical Rhythm Creating good vertical rhythm in your designs comes with a lot of practice, but also a lot of theory, and sometimes maths as well. First up, you need to start looking at a baseline (also known as a baseline grid). A baseline is the standard line-height that you'll base your vertical rhythm on – and from there, you can start to use this baseline to aid you in line-heights for all the other fonts and content in your design. Trent Walton’s website is a brilliant example of good vertical rhythm in design. When working with a baseline, it's a good idea to go with the line-height of the most commonly used or primary font-size in your design. The easiest example I can think of is to think of your main base font-size of 100% (which equates to 16px in most browsers). If you have a line-height of 1 then your line-height will also be 16px. However, line-heights are usually best sitting between 1.4-1.6 times the size of your font (visually, this just seems to work with most fonts – though don't take that as a rule, just play around with it). If we then look at having a line-height right in the middle of that, of 1.5, our line-height will be 24px – and that is our baseline number. From here on out, we want to make sure that all the content and typographical elements on our design match or add up to this 24px figure. Another important thing to measure is our margins. A really easy way to keep our rhythm in check is to use this magic number (24px) for our margins. I've been a big fan of single-direction margins ever since Harry Roberts suggested this in an article in mid-2012 , where the margins we apply to all block-level elements are placed in one direction (ie: on the bottom of elements). The same can be said when we're designing too, so as 24px is our "magic number" – and the number that everything should be multiples of, or at least relate to – we can add a bottom margin to all our block-level elements of 24px (or 1.5rem, if you so prefer – however you want to add this code in your CSS is fine!). This helps us keep our vertical rhythm flowing nicely, and makes all of our elements keep in line with the baseline that we've created. Images in Your Design One little tip I find when working with images in my design – and ensuring that they don't throw our baseline and vertical rhythm completely out of whack – is to make sure that image heights match up to a multiple of our magic number. So, for example, an image might have a height of 240px (10 x 24px, our magic number) with a bottom margin of 24px. Or we could even have a height of 252px with a bottom margin of 12px – as long as it all adds up to that multiple of 24px, we should be okay. Improvise! While it's important to remember your magic number, you can still always break from it slightly – if something doesn't quite feel right at the 1.5 line height that you've set, then try something else – as long as you can realign the other values so that it falls back into the baseline and thus keeps your vertical rhythm in check. For example, if you choose to instead go with a slightly higher line-height of 26 pixels (which works out at around 1.625 times the original font size we had of 16px), then as long as your margins then reflect this, your vertical rhythm will be okay. As we've added an extra two pixels to the line height, we need to take those two pixels from the bottom margin of that element. Obviously, if you can, try and look for patterns in your design where this might happen and architect your CSS in a way that reflects this pattern – so creating a modular CSS class for elements that have that design pattern, as you would with any project you're developing. Tools for Building Vertical Rhythm Working to create a good vertical rhythm can be tough – but luckily, as with most design and development techniques, there are a few good tools to help us out. I find these tools in particular great for practicing and visually understanding more about typography on a page. Typecast App Typecast is an amazing tool for designers – not only does it allow you to play around with thousands of different fonts or font combinations, but it also helps us in typesetting and forming a proper baseline. I find that I always dive into this before anything else when I'm starting to look at typography in my design. Modular Scale The modular scale is another little technique that can be harnessed or used in designing with typography – as described on A List Apart a modular scale is a sequence of numbers that relate to one another in a meaningful way. Tim Brown Those numbers can be used (through a lot of experimentation and swapping-and-changing) in your designs, if you so wish. It's at least worth a look and a play – and may help you to make more informed decisions about things such as the widths of containers, and how these other numbers can also play a part in your vertical rhythm. Basehold.it and Baseline.js If you're a fan of designing in the browser, or just want to ensure that the baselines you've designed elsewhere are following through when you start coding – then using one of these two JavaScript plugins will help you to check how your baseline is performing in your code. The first (Basehold.it), by Dan Eden and Michael Wright, provides you with a JavaScript overlay on your webpage, whereas Baseline.js by Dan Eden provides you with a way of managing images on your page, if they're needed. Assignments For this assignment, I want you to simply play around with a baseline grid – whether this is through a trial in Typecast, using one of the aforementioned JavaScript plugins or simply through creating a baseline grid outline in Photoshop or other graphics app is totally up to you. Once you have a baseline grid ready, start to put the principles of this article into it; put some of your content in place, and start to figure out the scales and font-sizes that you want to use. Once you have those in place, start looking at how these all tie together with your baseline grid. If you've never done this before, it can be quite a bit of work to get your head around – but it's well worth taking the time to understand exactly how they work. After that, you'll be able to start integrating a good vertical rhythm into your website designs much more easily – and your users will thank you! Further Reading More Meaningful Typography: A List Apart Single Direction Margin Declarations: CSS Wizardry Technical Web Typography Guidelines and Techniques (The Magic Number): Smashing Magazine Modular Scale: Jack Osborne

Typography Basics for Developers Posted: 12 Aug 2013 07:45 PM PDT Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that. Getting started with typography is possibly one of the more accessible parts of learning design, simply because of how easy it is to change and play around with the text to get immediate results. However, refining your typography skills so that you can design something that works well and is effective, is readable and useful for your users, is more of a challenge. Technical Terms First off, we’ll get some of the basic technical terms out of the way. This is only a little rundown of some of the most common terms you’ll come across when working with typography, and there are far more comprehensive guides on the web or in books if you want to read up more. Font vs. Typeface This first term is one that trips most people up. Typeface describes the designed letterforms. A font is the vehicle which contains the typeface. You download and install a font package in order to use a typeface within your design. Serif vs. Sans Serif You can safely think of there being two main type classifications – serif and sans serif. Serif typefaces generally look a little more classic in style, often with little flicks or embellishments (serifs) where letterforms terminate. Examples of serif fonts include Times New Roman, Baskerville and Georgia. Sans serif typefaces lack the serif embellishments, instead looking a little more modern. Examples of sans serif fonts include Helvetica, Arial and Futura. What Makes up a Character? Let’s briefly examine the anatomy of a letterform. Ascender The ascender is any part of a lowercase letter that extends above the x-height of the letter. You’ll be familiar with letters which have ascenders such as b, d, f, h, k, l. Descender A descender is any part of a lowercase letter that extends below the x-height of the letter. For example g, j, p, q, y. Counter In a letter, a counter is the curved enclosed (or partially closed) negative space inside a letter. Common letters with counters include b, d, e, o, s. Serif As we’ve mentioned, serifs are the extra flicks and embellishments you can see when distinguishing between serif and sans serif font styles. Baseline The baseline is an invisible line on which all of the characters sit. This baseline can vary massively between different typefaces, but is usually always consistent within an individual typeface. Cap Height The cap height is the distance from the baseline to the very top of the uppercase letters. x-height The x-height is the height of the main part of the lowercase letters (or at least the height of the lowercase x, hence the name). This height does not include the height of additional ascenders or descenders. Font Glyphs A glyph is an individual character within a font. These include any symbol or letter, through to extra glyphs that may be available to you which don’t match any of the more commonly known or used symbols or letters. When Working With Typography… …you should think about: Size When working with typography (and this might sound obvious) you should consider the size of the text that you will be working with. With every design trend that passes there will also be trends on how small or large the text should be. Think, for example, about the intended audience; is your audience a younger or older audience, will they need a larger text size? Think as well about how the text size will impact your site design. Do you want it to be focused on typography, or do you have other embellishments and design elements you want to include that can influence the way the typography sits in the design? Contrast Contrast influences the readability of a block of text enormously. When we talk about contrast there are two key things to keep in mind. Firstly, you want to ensure the contrast between the text and the background is strong enough to be noticeable. Think about accessibility here – going back to talking about colour accessibility in design, the same applies for your text. If you’re unsure of whether or not your text will have enough contrast then use a tool such as Lea Verou’s Contrast Ratio tool to help you. You also need to be mindful of the font choices that you make. Many fonts that have very thin weights might not display well at certain sizes and may be more useful for larger fonts or display headlines. Also try to ensure that the fonts or typefaces that you choose have good browser and operating system support. Some fonts and typefaces may work well on one platform, but look and perform terribly on another. Space When working with typography, as with any other part of your design, you want to ensure that you give it enough space to breathe and for the content to speak for itself. The content on your website is the core experience that your users need to be offered. Aside from any other design elements, all your users really need to see is the content. Because of that, don’t be afraid of giving more space to the content and letting your content do more of the talking. Negative space is the space or gaps that are left around elements of a design; don’t be afraid of leaving this negative space around your content. Don’t also forget about the space around every part of your text. Allow for a generous line-height which doesn’t make your text feel cramped and more difficult to read. As a general rule (though feel free to play with this) a line-height that is at least 140% to 160% of the text size should work well and offer a good balance for your text. Hierarchy A typographic hierarchy relates to how the content is laid out in your design. Establishing good content hierarchy starts at the beginning, when you work to create a good structure within your content. Typographic hierarchy then works with your content – through from headings to normal paragraphs and any parts of your content that you want to emphasise – to help form a structure that users can navigate easily. The impact a hierarchy has on your design can be massive. You should make your users’ journey to find the content they’re after as easy as possible, and establishing a solid hierarchy will only yield positive effects. You can establish a good, visual, typographic hierarchy in a number of ways, including using colour or varying text sizes to create emphasis and structure in your content. All of the previous tips will help you to establish a better typographic hierarchy, though it’s something that will always come with practice. Web Fonts We’ll be discussing web fonts in further detail later on in this series, but the following should be a solid intro into the possibilities of web fonts. Nowadays we’re really lucky that we have many options for implementing web fonts on our websites – and with the more commonplace use of web fonts on the web (brought on by better across-the-board browser support), we can be more inventive in the typographicstyles and designs we can include in our designs. As well as being able to host your own fonts using @font-face, there are many online services available to help you use more web fonts online, including: H&FJ Web Fonts Typekit Fontdeck Fonts.com Google Web Fonts FontSquirrel (@font-face downloadable kits) and many, many more. Even sites such as FontShop or MyFonts (which used to be limited to just selling desktop fonts) are now entering the market of web fonts, offering you downloadable fonts that you can use with the @font-face technique. Up Next.. Having covered the basics of typography, in the next article we’ll take a look at vertical rhythm. Don’t forget that you can also dive into our ongoing Session The A-Z of Web Typography for more detail on any of these points.

You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610