Discover Top Posts Tagged with #designers guide

In Design, 'Shapes' are 'nouns' and 'placement' & 'grouping' are verbs.

Jim Krause

#design quotes #quotations #Art and Design #designers #designers guide #creativity #creative guide

This is a MUST READ article for anyone interested in using the Color Black correctly. It outlines the use of CMYK, RGB and Hexachromes...

#black #designers guide #color and design #color study

Designer's Guide to Black Ink

Andrew Kelsall has published a fantastic article on his website, titled “The Professional designer’s Guide to using Black”. This article is ‘required reading’ for any graphic design student, recent graduate or even a industry pro open to a quick refresher in the different ranges of Black at our disposal. This post summarises Andrew’s content in a ‘reference resource’ kind of way, for my personal use. Hope you find it useful too.

PhotoShop Black | C.86 M.85 Y.79 K.100 This is roughly the default PhotoShop Black, but can vary between versions. The total ink coverage generally exceeds TAC limit. —- Rich Black | C.40 M.30 Y.30 K.100 This is a very general, rich black that doesn’t exceed a 200% TAC (Total Area Coverage) limit. —-

Registration Black | C.100 M.100 Y.100 K.100 This is the max amount of cyan, magenta, yellow and black. Only used for registration markings. —- Standard/Flat Black | C.0 M.0 Y.0 K.100 Can look ‘washed-out’, used for small text where TAC limits are are set to very low tolerance’s. e.g. newsprint. —- Designers Black | C.70 M.50 Y.30 K.100 Commonly used mix, produces punchy black will suit almost any application. —- Pantone® Process Black | Spot-Colour: ’K.100’ Being one of the ‘four CMYK colors‘, this black is ideally suited to printing text, whereby correct registration is not an issue. Is available for different paper stock finishes, Pantone® Process Black C (coated), U, (Uncoated) and M (Matt). —- Pantone® Black | Spot-Colour Ideally used when only single or a couple of colours are required for a job. (not a process colour 4 ink CMYK job). Often chosen for Duotone images. —- Cool Black (Black Bump) | C.50 M.0 Y.0 K.100 Produces a bluish-tone, typically used when a very cold-feeling shine/glaze is required. —- Golden Black | C.0 M.0 Y.60 K.100 Normally, this type of black can be used when a very warm/earthy feeling shine/glaze is required in a design. —- Warm Black | C.0 M.60 Y.0 K.100 Produces a purple’ish-tone, typically used for luxury marketing e.g. jewelery brochure. —-

#designers guide #guide #tips #hints

Relative Measurements - Using em’s for font sizing

Background

Many web designer use pixels (px) for sizing their fonts within web projects, however this presents an accessibility issue on some browsers, namely Internet Explorer as it will not allow readers to resize text that has been sized in pixels and thus are unable to adjust their reading environment if they wish.

The solution is to use relative units for font sizing such as percent and/or em. In this post I’m going to document down a font-sizing solution that I’m most comfortable applying across most web projects.

Getting started The default text sizeacross all modern browsers when no styles are applied is 16px. My first step is to reduce this size for the entire document to a nice rounded number to work from. So if we were to set the text size to 62.5% of 16px we have a starting base of 10px for all HTML elements within the page.

BODY { font-size: 62.5% }From this point it is easy to think in pixels but still set sizes in terms of ems:

1em = 10px 0.8em = 8px 1.6em = 16px … Applying ems values Consider a simple two column layout with header and footer using divs: <BODY> <div id=”nav”> … </div> <div id=”stage”> … </div> <div id=”sidebar”> … </div> <div id=”footer”> … </div> </BODY> Now lets apply some CSS styling so that navigation and sidebar text is displayed at 10px, the stage content at 12px and the footer at a smaller 9px. #nav { font-size: 1em } #stage { font-size: 1.2em } #sidebar { font-size: 1em } #footer{ font-size: 0.9em } As you can see creating font sizes using em values is just as easy as using pixels but with the advantage that they can scale regardless of the device or web browser being used. Nested elements and inherited ems

This is where it can get confusing so lets recap. First of all we changed our default BODY text from 16px to 10px or 62.5% of its default size: 16 x 0.625 = 10

We then decided that any text rendered in the #stage DIV should display at 12px. If we had not defined the font size as 1.2em then the #stage DIV would simply inherit it’s display size of 10px from its parent container, which is the BODY element. Therefore a rule to remember when sizing text in ems, is “size text relative to its parent” Child (pix) / Parent (pix) = Child (em)

12px / 10px = 1.2em For the sake of example, imagine that within #stage DIV we want to display paragraph text at a small 9px. Now you might expect the following CSS to do the trick:

#stage { font-size: 1.2em } #stage p { font-size: 0.9em } WRONG! The mistake I’ve done here is that I’ve calculated the 0.9em (9 / 10 = 0.9) value using the BODY value of 10px as the parent. Where in actual fact I must remember that the paragraph elements will be nested within the #stage DIV, and as the parent the ems value of 12px is inherited. The correct value would be: 9px / 12px = 0.75em

#stage p { font-size: 0.75em } Dealing with anomalies As with pixels there are a few browser anomalies that are good to sort out early. Lets start with Heading elements which we may need to use within the aforementioned #stage DIV. Mozilla-based browsers will pickup our 12px / 1.2em #stage styling and display everything from H1 to H6 at 12px, however other browsers will automatically show headings at different sizes. Applying text-sizes to all headings will give consistency across browsers, for example: 24px / 12px = 2em 18px / 12px = 1.5em 15px / 12px = 1.25em 12px / 12px = 1em

H1 { font-size: 2em } /* displayed at 24px */ H2 { font-size: 1.5em } /* displayed at 18px */ H3 { font-size: 1.25em } /* displayed at 15px */ H4 { font-size: 1em } /* displayed at 12px */ Similar work can be done on forms and tables to force form controls and table cells to inherit the same size as its parent element. input, select, TH, TD { font-size: 1em } Tricky stuff Consider that we want to apply a rule to style all list LI elements on the stage to display at 10px.

10 / 12 = 0.8333 #stage LI { font-size: 0.8333em } It works, BUT if we create a list that then contains another list, the nested list will display even smaller! Because the initial list will be parent to the child an thus display 0.8333 times smaller than the parent list. So we need another rule to prevent this ‘inherited shrinkage’:

LI LI { font-size:1em } This says that any list item inside another list item should be the same size as its parent (the other list item). This logic can be applied to a set of child selectors to prevent confusion: LI LI, LI P, TD P { font-size:1em } Summary Remember that em values cascade. Every em value is relative to its parents value! This can take a little time to get use to but once you get use to it you can offer more accessible sites. The em unit of measure is not restricted to font sizing. The height, width, padding, margin etc of any element can have an em value and this is how truly flexible websites with elastic layouts are built. Em’s have a direct relationship to each other in this way. If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. That exact proportional relationship makes em values a powerful web design technique. Finally if you’re finding the maths all a bit complex, try using the EmChart. Reference articles: http://css-tricks.com/css-font-size/ http://www.dave-woods.co.uk/index.php/using-ems-for-font-sizing/ http://www.alistapart.com/articles/howtosizetextincss/

★★★ UPDATE ★★★Over a period of a few months I’ve been digesting the 24ways article by Richard Rutter, Compose to a Vertical Rhythm.

The article highlights the need and method to set up a horizontal or baseline grid, which all web content can stick to in order to maintain a vertical rhythem as a reader descends the web page.

Most designers are familiar with ‘Grid Systems’ and using column grids that offer consistent multi-column grid website layouts.

BUT as the article highlights, it is also possible to apply the same principles of proportion and balance to the content within those columns by applying a ‘Baseline Grid’.

Rather than post a full article about the process I just wanted to include some key rules that helped me calculate the relative measurements needed to maintain my web content rhythem.

To express desired font-size in relative value… the desired (Target) font-size (px) must be divided by the font-size (px) of its parent container (Context):

—————————

TARGET (px) / CONTEXT (px) = RESULT (em)

—————————

The same rule applies to calculating Line-height as a realtive value. The TARGET line-hieght (px) must be divided by its CONTEXT which will be its font-size (px), OR if undefined, that its parent. With the RESULT being the target line-height expressed as a relative value (em).

IMPORTANT NOTE:

Any font-size larger than a single line on the baseline grid will require the takeup of multiple lines in order that to reatin vertical rhythm. (e.g: placing a 26px font on a line of 18px height, two lines are required that total (18x2) 36px of height for the font to sit on.)

Therefore the rule above must first take into account that the TARGET value needed for the calculation be the total sum (px) of the multiple lines required. (e.g. Target = 36px)

—————————

#designers guide #guide #web guide #tips #hints