Week 3 (Catching up)

Art books displaying the use of serif
After finally completing my enrolment on Tuesday afternoon, I was very excited to start my first lectures on Wednesday Morning. The morning that, without warning, my internet went down. Apparently, the local council association have decided now’s the time to upgrading the area to fibre optic. Whilst they do this, I have only my mobile data to keep me going. My phones’ already issued me a warning (“You’ve used up 80% of your data for this month”), so I knew at some point I’d have to buy more data, what I wasn’t counting on though is just how much! Nearly £40 later, I’m onto my fourth data package, one that I’m using sparingly, meaning no more Netflix! Luckily in this modern-day, you can connect to the world wide web for the price of a cup of coffee. So whilst I sit here, in what must be the most popular coffee shop in all of Bethnal Green, peoples laughter ringing in my ears, freshly ground coffee filling my nostrils and a questionable music taste filling the rest of the air that’s left, I begin to write my very first blog entry… Coffee and a sandwich As I only briefly managed to scan through my lecture notes from previous weeks, I only had a vague idea of what to expect from Joel’s lecture. I sent a short email before our online session started to introduce myself and explain my circumstances to him; he was more than understanding and welcomed me when the class had all logged in. Glasses on and pen in hand, I felt ready, slightly nervous but very excited. The learning objectives of this lecture were to be: Understand the two different types of colour and where we use them; Understand what resolution is;  to understand the rules of typography. Something I have some familiarity with, but I knew there were significant gaps in my knowledge. Eager to learn, I dove in…

Typography

Typography rules are consistent throughout all media. Whether writing on a blog, designing the front page of a tabloid or putting together a brochure outlying what loan option is best, you’ll always follow the same set of principles. Obviously, the way you play the game will change depending on your audience, a contemporary art magazine will use different fonts to The Times newspaper, but the general rules will remain the same. Headers should be the biggest, most eye-catching thing on the page as it’s the thing that pulls people in; the text should be clear and easy to read whilst using language the reader will feel comfortable with. Leading and weight should be used correctly and with discretion, whilst pictures should be used to complement a story and engage a reader further. The mission of good typography is to make the page seem consistent in style and structure whilst being pleasing to the eye of the reader. Bad typography will look like a mess, seem disjointed and will be hard to engage with.

Serif vs Sans Serif

Fonts can be split up into two distinct families; Sans and Sans Serif. There are many sub-divisions that can be made between the two, but for the point of simplicity, these are the two we’re going to focus on. Which font family you choose will very much depend on your target audience. Let’s dive into them. Serif Times new roman, Georgia, Garamond. Great examples of the sans family. They look professional, smart and you’d find them in financial magazines, titles of major broadsheets and some major banks will use these. It speaks to a more professional base and can give off an impression of seriousness and grandeur. Whilst this family may be great in some situations, they aren’t great when used for smaller text. This is because they have small flourishes, called Serifs, attached to the base or end of the letter. Almost throughout the whole of history, Serif has been the default. From Roman inscriptions to victorian graffiti engraved onto churches, you’ll find it everywhere. Sans Serif If you understand French, you’ll already know that Sans means without, and so Sans Serif simply means “without serif”. Sans Serif is a much more modern invention that came along with the printing press and has seen its popularity explode in recent years due to the advent of the smartphone. This is because, a well as exuding an air of modernity and simplicity, they also suit smaller screens much better. This is clearly due to their lack of serifs taking up much sought after pixel space. When condensed into paragraphs or other bodies of text, they’re much easier to read and understand. How google updated their logo In 2015, google developed a new typeface called “Product Sans”. The image on the left displays cleary how they left the old Serif family behind in favour of this new, sleeker and more modern look. Seeing them side by side, the old logo already is starting to look very dated.

Weight, Leading & Lines

Weight

We all know bold when we see it, but maybe what you didn’t know is that there are different levels of “boldness”. Defined as “weight”, this can play a crucial part in what the user pays attention to, the readability of something and the overall impact a product has as a whole. Weight is measured in numbers, from 100 – 900 with 100 being the lightest font and 900 being the heaviest. Weight can be useful if you want to emphasise a certain word or phrase, but it also must be used with caution. If the weight of something is too heavy, and the text too small, it can seem very cramped and can quickly become hard to read. Conversely, if you have something that is too light, coupled with a light coloured font, that too, can be tricky for the reader.

However, when used correctly, they should make things easy to read and, at times, eye-catching.

Leading

Simply put, leading is the space between baselines and are measured in the same way as font size, in points, or pt. One point is the equivalent of 1/72 of an inch, which makes 10pt roughly 1/7 of an inch. Baselines are what we call the line where the letters sit. It’s not very often that letter reach upwards and crosses over the baseline that sits above it (exceptions might be if you’re trying for an unusual or contemporary look), but some letters naturally reach below their baseline. These elements of a letter are called Descenders. It’s important in media that there’s enough space between the Ascenders don’t reach the descenders from the line above it (Ascenders being parts of a letter that extend upwards). Leading is important for readability reasons if your lines are too close together, the text can feel cramped and become hard to read, whilst if they’re too far apart, the text can feel disjointed and irregular. Changing the leading on InDesign is simple and can be done with just a couple of clicks. Leading gets its name from the lead strips people used to use before we had tools like InDesign. Thank god for the computers!

Tracking & Kerning, the Subtle Difference

Tracking and kerning are to also be considered when designing something for print. Together, they help readability, and the words flow properly across the page. Both are similar in what they do but have some important differences. Both reduce, or increase, the space between characters. The difference is, is that tracking focuses on the letter spaces of a whole word, whilst kerning nails down the spaces between the individual letters or characters. Both of these serve a similar purpose, I’ve already mentioned readability, but they also help to prevent “widows” and “orphans”. These are words which get lost on their own, either on a new page or column (widow) or a word that ends the paragraph on a new line (orphan). This has happened to us all and can be very frustrating if you don’t know how to solve it.

Types of Colour: RGB vs CMYK

Red Green Blue

RGB, an abbreviation of Red, Green and Blue is the type of colour that anything with a screen uses, whether this is a phone, a television or an electronic billboard, you can bet that this is exactly the type of colour they’ll use. This is because it’s made up of light. Every colour you see on a screen is made up of fundamental parts, these parts are Red, Green and Blue, but in different quantities, more on this later. A great metaphor for RGB is stained glass, without any light shining through the glass and hitting your eyes, the stained glass will remain black, no light coming through the glass and it just looks like a black window. This principle can also be applied to screens; if there’s no light shining through, the pixels will remain black (their natural colour). Each inch on a screen is made up of 72 pixels, also known as 72dpi (dots per inch). The higher the dpi, the higher the resolution of the screen. Depending on what colour the screen is recreating, depends on the mixture of how those three colours shine if they’re shining at all. For example, if a screen is recreating the colour blue, only the blue light will shine through those pixels whilst green and red will be at bay. This model of colour is called Additive due to the fact that the more of the colours you add, the brighter the colour on the screen until you eventually get to white. Alternatively, to get black, no light will shine through those pixels.

CMYK

Whilst RGB is great if you have a screen to shine light into your eyes, what about print media? This is where CMYK comes in handy. CMYK, standing for Cyan, Magenta, Yellow, and Blacis the standard colour model for print media everywhere. Rather than shining a light into our eyes, this model relies on reflection, whether this is sunlight or a source of artificial light, this is the method that our eyes rely on to see pretty much everything that isn’t a screen. Conversely to RGB, this model of colour is called Subtractive meaning that the more of the inks added to a page, the darker the colour will appear, until you eventually come to black. In a similar fashion to RGB, CMYK uses DPI too, although it’s much greater, coming in at a whopping 300DPI. Each inch gets covered in dots and the ratio of different colours in that inch, make our eyes believe that we see a solid colour, zoom in though and it’s a different story altogether.

The main difference between CMYK and RGB is where you find them. RGB is found on any media that shines a light into your eye whilst CMYK you’ll find on all print media. It’s important to note that whilst RGB is the standard model for media on a computer, if you’re sending anything digital off to be printed, you must make sure the colour format is CMYK. The printers will have a hard time understanding RGB, and you could end up with some nasty colour errors. Also, due to the high-quality nature of CMYK, 300DPI, the file will be much larger than its RGB equivalent, something to think about when saving.

Next A Total Rethink of Design
a rethink of design

Leave a comment