Sunday, 28 February 2010
Thursday, 25 February 2010
Stranger Than Fiction graphics
I watched Stranger Than Fiction again earlier today and realized I haven’t mentioned it on here yet. If you haven’t seen it, it’s well worth a watch. It’s definitely something that creative people would find interesting if only for the visuals. Will Ferrell gives a great performance as the low-key main character and Dustin Hoffman and Emma Thompson are also brill.
The film is about a man whose job requires him to be very good with numbers and, as a result, he counts/measures everything he sees in passing. The story itself, however, is about how he is the main character in a book that’s being written – he begins to hear the author narrating his actions as he goes about daily life and we eventually learn whether he is controlling himself or not.
Throughout the film there’s a layer of really clean, crisp, white animated graphics that playfully illustrate Harold’s (the main character’s) thoughts – his counting of steps or measurements of soap in its dispenser. What’s so good about it is that it very quietly persists with the scrupulously systematic nature of the main character without distracting the audience or becoming exhaustive. MK12 are the designers behind it: I’ve added images below of: their early ideas – which, thankfully, were dropped; the MK12 banner; and some screenshots of the final outcome, as seen in the film.
The film is about a man whose job requires him to be very good with numbers and, as a result, he counts/measures everything he sees in passing. The story itself, however, is about how he is the main character in a book that’s being written – he begins to hear the author narrating his actions as he goes about daily life and we eventually learn whether he is controlling himself or not.
Throughout the film there’s a layer of really clean, crisp, white animated graphics that playfully illustrate Harold’s (the main character’s) thoughts – his counting of steps or measurements of soap in its dispenser. What’s so good about it is that it very quietly persists with the scrupulously systematic nature of the main character without distracting the audience or becoming exhaustive. MK12 are the designers behind it: I’ve added images below of: their early ideas – which, thankfully, were dropped; the MK12 banner; and some screenshots of the final outcome, as seen in the film.
Wednesday, 24 February 2010
Monday, 22 February 2010
Diary images for Anna
Here’s the Russian Diary I have. On every other page is an image taken from 20s/30s Soviet children’s books – many of them look more like sophisticated constructivist works though so don’t let ‘children’s books’ throw you off. Really nice collection anyway. The right hand pages could be better, I think.
Sunday, 21 February 2010
Müller-Brockmann’s Grids in InDesign
This post is partly a note-to-self but could also be handy for anyone wanting to set up grids in InDesign or understand more about how type and leading works.
Having read his book on grid systems, I wanted to try M-B’s grid set-ups and, in doing so, noticed something that’s maybe worth pointing out. The text in M-B’s grids always seems to sit very comfortably into the grid line corners, whether it’s a capital in a larger size or small body copy. In his day, typographers would always sketch out words/titles/paragraphs so there’s a difference between drawing text by hand to sit on the baseline and extend to the edge of the grid line and getting a type size on InDesign that will do the same thing (without going into decimal points).
Also, many designers will either choose to align images with the x-height of the type (the top of the letter ‘x’ from the baseline, in other words) or to align images with the ascender line/cap height (whichever is highest). The latter is M–B’s method and ensures that the top of any images will line up with the top of any lettering that may be alongside it on the page. This is my preference also – more simple and better looking.
I got into confusion at first when setting up some grids because of the point size system. The point size is not actually the size of the lettering itself but of the metal shapes that were used in letterpress originally. This explains why there’s a mysterious little bit of leading still in on the screen when you type with 10/10 type (size 10/10 leading). If the leading value is equal to the size it means there should really be no leading – no space between the lines of text. However, because there is a tiny bit, it means you have to make lots of calculations to get the grid working if you don’t deal with it first.
So, as it’s the modern world and letterpress is but a fragment of the old, it’s time to tech-up and get rid of unwanted leading.
Say we want a column of text. There are to be 59 lines. We want 5 fields with a one-line break between each. So we take away 4 from 59 because we need them as spaces, and are left with 55 lines (11 lines per field).
We want to use Univers size 10 with 2pt of leading (12 in the InDesign tab). Remembering that point size is not type size, we need to measure the text. So write a line in Univers size 10 making sure to use caps/ascenders and descenders in the sentence (something like HPSklpgj). Then use type>create outlines. This makes the sentence an object. You can check out the height of the object (which should (?) be equal to 10 points, but it’s not) in the bar at the top. It’ll be about 3.305mm. If you then search google for ‘3.305mm in points’ you’ll get 9.368…which isn’t 10. Thus, the confusion is thwarted!
We can then make a rectangle whose length is irrelevant and whose height is 3.305mm (or convert the outlined text to a rectangle) and what we have is the corner of the grid – whose height means it will touch the top of the ascenders and the base of the descenders. The baseline will have to pass somewhere through this area for the line to sit on – this is worked out later. For now, we can duplicate the shape underneath to get a second line without leading. To add 2pt leading, go to the ‘y’ measurement for the shape below and type in ‘+2pt’ after what is already there. This should push the object down by 2 pt – leaving a 2pt gap. If you do this 59 times, you’ll get the grid height. After every 11, there’ll be a shape that signifies the space between fields – text/images can still fill it but nothing should align on it – that’s what the fields are for.
So, as it’s the more simple number, we’ll use 3.305mm as our guide. If our baselines re-occur every 3.305 our text will sit tightly with no leading (because it is the full measurement from descender to ascender). We need to add leading (2pt leading) so we type in ‘3.305mm+2pt’ in the baseline menu (under preferences) and it gives you a deeper baseline.
Now that your baseline is at the right measurement (with 2pt leading added) you can type away in Univers size ‘10’ (9.368). The leading will be 2pt but InDesign will want to make it a tiny bit more which is why you need to select 11 (rather than 12 – even though that is what we’re after) on the leading bar when ‘align to baseline’ is ticked. Making sure everything is aligned to the baseline is key though.
So now our baseline is the right measurement but will not be aligned to our grid properly. Aligning it to the grid will make sure the text sits comfortably right up to the edges of the fields. Let’s say the big list of 59 rectangles we made – with 2pt leading between – is all one object. Have it sitting 20mm from the top of the page (y measurement). Type in 20mm in the baseline menu to make it begin there. Now we need a measurement to add to that so that the baseline sits inside our rectangles and the text touches the top and bottom of them all as a result. Going back to our outline object of the text, take a measurement of the highest ascender/cap height (so the height of an ‘h’ perhaps, or capital T). I got 2.6mm. Add this to the baseline start-measurement so it’s 22.6mm and you’ll see all the text shift so that everything sits inside each rectangle. Done.
The edges of the rectangles are where images should align and so on but these can be removed once you draw a grid around them. It’s a slightly tricky process to get your head around but if you rely on making your own measurements and not on InDesign, you’ll find it’s not so technical. Remember, though, that all of your text/images and design decisions should be made before drawing up the grid so you don’t have to re-do the whole thing in order to make amendments.
Wednesday, 17 February 2010
Tuesday, 16 February 2010
Proportion in typography
When I was writing the Seurat post I mentioned that, in that incidence, the difference between one number, 1.618 (the golden section) and another, 1.414 (DIN paper system), didn’t make much difference. In other examples, though, it will, and below shows how.
I’ve used the Fibonacci sequence for a long while as a guide to my type sizes because, when I was just starting out in using type in my designs at uni, I read it would give me the most pleasing proportions. It has stuck with me since but I now know much more about it. The sequence, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 etc, is made by adding the previous number onto the current number (starting with 1 and adding 0 to get a second 1). If you take a number in the sequence and divide it by the preceding one you’ll get something close to 1.618 (golden section). Notably, 8 and 13 are in the sequence (13:8=golden section ratio). The further you go in the sequence, the closer you get to 1.618 in dividing each number by the one before. In other words, the Fibonacci sequence is pretty much the golden section (it’s a rounded up/down version).
Not only that, you can start with any number, like 10, and add, say, 5 and repeat the process, (so 5, 10, 15, 25, 40, 65, 105, 170, 275, 445, 720, 1165) and, if we divide 1165 by 720 we get 1.61805555…. Golden section. Spooky! What’s strange is that you’re not using a fixed number to enlarge the previous – 10 is 2x5 but 445 is 1.618181818x275.
The two sets of lines below do use a fixed number to increase the type sizes. One is the golden section (right side) and the other uses 1.414 (the ratio of DIN paper measurements). Although the golden section sequence looks better hands down I wonder if it would still be most suitable to use the 1.414 sequence if you were working on A4/A3 (DIN) paper. Even lettering would be a consideration – lots of lettering is based on the square, but would it not be more logical to design type whose character shapes were similar to the shape of A4 paper?
I’ve used the Fibonacci sequence for a long while as a guide to my type sizes because, when I was just starting out in using type in my designs at uni, I read it would give me the most pleasing proportions. It has stuck with me since but I now know much more about it. The sequence, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 etc, is made by adding the previous number onto the current number (starting with 1 and adding 0 to get a second 1). If you take a number in the sequence and divide it by the preceding one you’ll get something close to 1.618 (golden section). Notably, 8 and 13 are in the sequence (13:8=golden section ratio). The further you go in the sequence, the closer you get to 1.618 in dividing each number by the one before. In other words, the Fibonacci sequence is pretty much the golden section (it’s a rounded up/down version).
Not only that, you can start with any number, like 10, and add, say, 5 and repeat the process, (so 5, 10, 15, 25, 40, 65, 105, 170, 275, 445, 720, 1165) and, if we divide 1165 by 720 we get 1.61805555…. Golden section. Spooky! What’s strange is that you’re not using a fixed number to enlarge the previous – 10 is 2x5 but 445 is 1.618181818x275.
The two sets of lines below do use a fixed number to increase the type sizes. One is the golden section (right side) and the other uses 1.414 (the ratio of DIN paper measurements). Although the golden section sequence looks better hands down I wonder if it would still be most suitable to use the 1.414 sequence if you were working on A4/A3 (DIN) paper. Even lettering would be a consideration – lots of lettering is based on the square, but would it not be more logical to design type whose character shapes were similar to the shape of A4 paper?
Five-point star: second method
In the post called Golden Pentagon Construction I make a five-point star with the method most often demonstrated by writers on the subject. The method below is another I have drawn up myself and is a little more direct than the aforementioned – though the shape will be the same size, either way it is drawn.
The first image shows the start of the construction. I begin with a golden rectangle and divide it on one side into smaller golden rectangles. One length in the five-point star is the right hand vertical edge of the largest rectangle. We know, then, how long each line in the shape will be.
The difficult part of making a pentagram is figuring out the angle of the points. The angle, from the top right corner, happens to be one which will lead the line to the corner of the smallest rectangle in the image – it is reduced by 1.618 four times from the largest one. How long you draw the line toward that corner is already clear – the length of the largest rectangle. However, it happens to be a the horizontal halfway point of the second largest rectangular section.
The process is repeated, as in the second image, for the upper half of the shape to get the black lines in the third image. Then, taking ignoring most of our divisions of the largest rectangle, we divide the right vertical edge by the golden section (the square inside the golden rectangle does this immediately). This 8:13 (golden ratio) point on the right edge is our intersection point for the other lines in the pentagram – shown in light grey. The lines can simply be extended until they meet or drawn until they match the length of the vertical edge of the rectangle.
The points are joined very easily, as in the last image, and the outer lines of the pentagon can be formed as a result. This is perhaps even easier a construction than the that of the other post but lacks the advantage of creating an object which is in parallel with the original rectangle.
The first image shows the start of the construction. I begin with a golden rectangle and divide it on one side into smaller golden rectangles. One length in the five-point star is the right hand vertical edge of the largest rectangle. We know, then, how long each line in the shape will be.
The difficult part of making a pentagram is figuring out the angle of the points. The angle, from the top right corner, happens to be one which will lead the line to the corner of the smallest rectangle in the image – it is reduced by 1.618 four times from the largest one. How long you draw the line toward that corner is already clear – the length of the largest rectangle. However, it happens to be a the horizontal halfway point of the second largest rectangular section.
The process is repeated, as in the second image, for the upper half of the shape to get the black lines in the third image. Then, taking ignoring most of our divisions of the largest rectangle, we divide the right vertical edge by the golden section (the square inside the golden rectangle does this immediately). This 8:13 (golden ratio) point on the right edge is our intersection point for the other lines in the pentagram – shown in light grey. The lines can simply be extended until they meet or drawn until they match the length of the vertical edge of the rectangle.
The points are joined very easily, as in the last image, and the outer lines of the pentagon can be formed as a result. This is perhaps even easier a construction than the that of the other post but lacks the advantage of creating an object which is in parallel with the original rectangle.
Nothing accidental: Georges Seurat
You’ll often find this painting in use as an example of the golden section in art, although it’s by far the most ideal picture for the job. It isn’t ideal because the frame itself is not in golden section proportions. The key number for the shape of this painting is 1.487 as this is the outcome when you divide the length by the width. (A4/DIN paper is 1.414, and the golden section is 1.618). Still, it’s a beautiful painting so I can understand why makers of beautiful books would use it.
There’s little difference between .618 and .487 and the first two images demonstrate this respectively. They both have their similarities to the image and it’s difficult to tell which Seurat would have used, if either. I have wondered, though, if it is better, where possible, to use a ratio for proportions which is the same as the proportions of the shape you are working on. For instance, if you’re using an A4 page, could three typefaces which get larger by 1.414 be more pleasing to the eye than if it were by 1.618? In other words, is stringent consistency in proportion more worthwhile?
What’s clear from the images is the definite placement of the water level in the distance, and the heads/figures are usually set against some guiding line. The fifth image is the most interesting to me; the circles are in proportion with the frame and have shocking similarities to the content. The outermost circle follows the arch of the left figure’s back, trims off the top of the tree and passes across the front of the right figure’s face. The next circle in carves a portion out of the reclining man, chops off the left figure’s legs and leans on a distant figure’s head. On the other side, it also bends around the paddler’s knee and past the edge of the clothes on the bank.
How/why?? There are always two answers and it could be either every time. 1) The artist knows all about proportion and has done his/her ‘homework’. There is no such thing as coincidence in their work and the creativity lies in ‘what’ rather than ‘how’. Perhaps Seurat’s creativity was his scene and his skillful pointillism. 2) We risk giving the artist a little too much credit in their mathematical understanding and find that the whole thing was an accident. The composition was done by eye and, because s/he has a good eye for proportion, the artist has been able to conjure something so pleasing without maths. As my title will suggest, I usually hope these artists have actually devised some big plan for their work – an invisible secret behind it all. Who knows. Of course, there are always those times when paintings simply suck and no compositional flair is anywhere to be seen.
There’s little difference between .618 and .487 and the first two images demonstrate this respectively. They both have their similarities to the image and it’s difficult to tell which Seurat would have used, if either. I have wondered, though, if it is better, where possible, to use a ratio for proportions which is the same as the proportions of the shape you are working on. For instance, if you’re using an A4 page, could three typefaces which get larger by 1.414 be more pleasing to the eye than if it were by 1.618? In other words, is stringent consistency in proportion more worthwhile?
What’s clear from the images is the definite placement of the water level in the distance, and the heads/figures are usually set against some guiding line. The fifth image is the most interesting to me; the circles are in proportion with the frame and have shocking similarities to the content. The outermost circle follows the arch of the left figure’s back, trims off the top of the tree and passes across the front of the right figure’s face. The next circle in carves a portion out of the reclining man, chops off the left figure’s legs and leans on a distant figure’s head. On the other side, it also bends around the paddler’s knee and past the edge of the clothes on the bank.
How/why?? There are always two answers and it could be either every time. 1) The artist knows all about proportion and has done his/her ‘homework’. There is no such thing as coincidence in their work and the creativity lies in ‘what’ rather than ‘how’. Perhaps Seurat’s creativity was his scene and his skillful pointillism. 2) We risk giving the artist a little too much credit in their mathematical understanding and find that the whole thing was an accident. The composition was done by eye and, because s/he has a good eye for proportion, the artist has been able to conjure something so pleasing without maths. As my title will suggest, I usually hope these artists have actually devised some big plan for their work – an invisible secret behind it all. Who knows. Of course, there are always those times when paintings simply suck and no compositional flair is anywhere to be seen.
Five-point star alternative of first method
After a little review of my method I decided to use the finished star and see how it might relate to the rectangle in other ways. The images below show the most simple explanation I got.
I started by mapping out the simple golden rectangle with itself reduced three times in golden proportion. You have to do this all four ways (as in the second image) because the original shape has four edges. This is was is slightly misleading when you read about the golden section – the first image here is usually what you’ll find but the second image is the proper division of the rectangle.
The third image shows our key points. Those darkest rectangles indicate the edges of the pentagram (its width). So, we know already how long one line in the pentagram is: the distance from the edge of one dark rectangle to the edge of the other. With that, we know the length of every line in the pentagram because they must all be the same.
All we need, then, is a direction for the line to go from our red mark on the left in the third image. The answer is through the cross-over point of the two diagonals of the darkest rectangles. From there on in it’s just a case of using the same line length to get the remaining edges. If you want to be really geeky you can divide your first lines of the star by the golden ratio and you’ll have an intersection point for the other lines.
Incidentally, I did say in the other post that the size (size, not proportion) of the star did not seem to relate to the rectangle but, in fact, it does. If we say the length of the rectangle is x and the golden section is φ then the length of one line in the pentagram is (x/φ² + x/φ⁴). In other words, it’s the length of two of the smaller rectangles added together: so it does relate!…just really subtly…..
I started by mapping out the simple golden rectangle with itself reduced three times in golden proportion. You have to do this all four ways (as in the second image) because the original shape has four edges. This is was is slightly misleading when you read about the golden section – the first image here is usually what you’ll find but the second image is the proper division of the rectangle.
The third image shows our key points. Those darkest rectangles indicate the edges of the pentagram (its width). So, we know already how long one line in the pentagram is: the distance from the edge of one dark rectangle to the edge of the other. With that, we know the length of every line in the pentagram because they must all be the same.
All we need, then, is a direction for the line to go from our red mark on the left in the third image. The answer is through the cross-over point of the two diagonals of the darkest rectangles. From there on in it’s just a case of using the same line length to get the remaining edges. If you want to be really geeky you can divide your first lines of the star by the golden ratio and you’ll have an intersection point for the other lines.
Incidentally, I did say in the other post that the size (size, not proportion) of the star did not seem to relate to the rectangle but, in fact, it does. If we say the length of the rectangle is x and the golden section is φ then the length of one line in the pentagram is (x/φ² + x/φ⁴). In other words, it’s the length of two of the smaller rectangles added together: so it does relate!…just really subtly…..
Five-point golden star: my method
This construction came from when I recorded how to get a golden rectangle from a horizontal line without extending the line (as shown in the post called Two Constructions). If you search for a golden rectangle construction method you’ll likely be told to create a square and extend it to a rectangle so I wanted to know how to do it in reverse as it were.
Anyway, the five-point star (pentagram) is the absolute necessity behind the use of the golden section throughout most of its history in the art world. Gothic architects devised a master diagram based largely on the five-point star, pentagon and decagon (the latter two are made by joining the five points/five points and points between).
My earlier pentagon construction is most often found in books on the subject but this one below is of my own making – I haven’t seen it elsewhere so far.
CONSTRUCTION: The first image shows the drawing I made to begin with. I’d learned my lesson from before with the circles so I checked this digitally straight away (and it works). So, as in the second image, you draw a golden rectangle any way you like and divide it in two. Then use the length of a half to extend lines from all edges. The end points, as in the third image, make the centre points of circles whose radii (weirdest plural form ever) will each touch two corners of the rectangle. Do this for every point and you get a pretty picture, as in the fourth image. I’ve marked in red the key points here which will inform the drawing of the pentagon (where lines overlap). The last image includes our pentagon. It’s relatively simple to draw when you know the following: each line in the star must be the same length; the first two lines should start at the top red mark and one should hit the the mark on the far left and the other, the mark on the far right; the cross-bar sits directly over the middle line of the guiding rectangle.
Et voila. This construction is a little different in that the rectangle you use to draw the star is not actually related by size. In more common constructions of the star, the length of the lines is equal to the length of the rectangle (they’re just pointed towards the centre so they look shorter). The star here is made of lines that, even when multiplied by 1.618 do not become equal to any measurement of the rectangle.
Anyway, the five-point star (pentagram) is the absolute necessity behind the use of the golden section throughout most of its history in the art world. Gothic architects devised a master diagram based largely on the five-point star, pentagon and decagon (the latter two are made by joining the five points/five points and points between).
My earlier pentagon construction is most often found in books on the subject but this one below is of my own making – I haven’t seen it elsewhere so far.
CONSTRUCTION: The first image shows the drawing I made to begin with. I’d learned my lesson from before with the circles so I checked this digitally straight away (and it works). So, as in the second image, you draw a golden rectangle any way you like and divide it in two. Then use the length of a half to extend lines from all edges. The end points, as in the third image, make the centre points of circles whose radii (weirdest plural form ever) will each touch two corners of the rectangle. Do this for every point and you get a pretty picture, as in the fourth image. I’ve marked in red the key points here which will inform the drawing of the pentagon (where lines overlap). The last image includes our pentagon. It’s relatively simple to draw when you know the following: each line in the star must be the same length; the first two lines should start at the top red mark and one should hit the the mark on the far left and the other, the mark on the far right; the cross-bar sits directly over the middle line of the guiding rectangle.
Et voila. This construction is a little different in that the rectangle you use to draw the star is not actually related by size. In more common constructions of the star, the length of the lines is equal to the length of the rectangle (they’re just pointed towards the centre so they look shorter). The star here is made of lines that, even when multiplied by 1.618 do not become equal to any measurement of the rectangle.
Golden circles construction
There are, of course, constructions already established for many shapes using the golden ratio (or the number 1.618) but it’s important, I think, for designers to draw these for themselves. I’ve actually been able to design my own constructions of various shapes and definitely understand a lot more about proportion in doing so.
This construction is of proportionally equal circles (reducing them in size by 1.618). The challenge is to do it all without measuring tools or calculators. Only a ruler’s edge and compass should be used; this way, you focus on the shapes and lines themselves rather than numbers.
I actually thought I‘d found a successful method in the drawing below but when I tried it digitally it was actually incorrect. BUT, in taking screenshots just now, I’ve figured it out!
The problem with drawing things out by hand is that your scale will be too small to check if a tiny miss-match of points is due to your compass or if it’s actually an error. Only on a digital version will you be able to be pin-point accurate and if your construction works it would be pin-point accurate on every point.
CONSTRUCTION: I started with a circle and protruding square. Then I extended lines from the centre of the circle to the corner and first quarter of the square. I then thought the two red dots (where the lines hit the circumference of the circle) would be the radius of a smaller circle (proportional to the larger). I was wrong though and, as the fourth image shows, the green circle (which would have been the correct outcome) is slightly smaller. The difference is miniscule but this is only because it’s a small scale. So, larger scale=big difference. As I said though, I’ve just figured out the correct radius to use, as shown in the last image. So one point is on the circumference and quarter into the square, and the other is defined solely by the square.
Often these constructions have relatively simple outcomes but only in drawing your way through them can you really understand it all.
This construction is of proportionally equal circles (reducing them in size by 1.618). The challenge is to do it all without measuring tools or calculators. Only a ruler’s edge and compass should be used; this way, you focus on the shapes and lines themselves rather than numbers.
I actually thought I‘d found a successful method in the drawing below but when I tried it digitally it was actually incorrect. BUT, in taking screenshots just now, I’ve figured it out!
The problem with drawing things out by hand is that your scale will be too small to check if a tiny miss-match of points is due to your compass or if it’s actually an error. Only on a digital version will you be able to be pin-point accurate and if your construction works it would be pin-point accurate on every point.
CONSTRUCTION: I started with a circle and protruding square. Then I extended lines from the centre of the circle to the corner and first quarter of the square. I then thought the two red dots (where the lines hit the circumference of the circle) would be the radius of a smaller circle (proportional to the larger). I was wrong though and, as the fourth image shows, the green circle (which would have been the correct outcome) is slightly smaller. The difference is miniscule but this is only because it’s a small scale. So, larger scale=big difference. As I said though, I’ve just figured out the correct radius to use, as shown in the last image. So one point is on the circumference and quarter into the square, and the other is defined solely by the square.
Often these constructions have relatively simple outcomes but only in drawing your way through them can you really understand it all.
Subscribe to:
Posts (Atom)