Typography Task 2

24.10.2023-14.11.2023 (Week 5-Week 8)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Typography / Task 2

LECTURES

Week 5⇒ Understanding

1. Understanding letterforms

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical
It is easy to see the two different stroke weights of the Baskerville stroke form (left); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc
Both Baskerville (left) and Univers (right) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive

Figure 1.1 Baskerville vs Univers, week 5 (24/10/2023)

A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two

Figure 1.2 Helvetica vs Univers, week 5 (24/10/2023)

2. Maintaining x-height

the x-height describes the size of the lowercase letterforms
However, the curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) to appear to be the same size as the vertical and horizontal strokes they adjoin

Figure 1.3 Examples of x-height, week 5 (24/10/2023)

3. Form and counterform

counterform/counter⇾ the space describes and often contained by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them
The latter is a particularly important concept when working with letterforms like lowercase ‘r’ that have no counters per se

Figure 1.4 Examples of counterform, week 5 (24/10/2023)

It’s worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to lose its identity, as individual elements are examined without the context of the entire letterform

Figure 1.5 Examples of counterform, week 5 (24/10/2023)

4. Contrast

The following are some examples of contrast—the most powerful dynamic in design are applied to type, based on a format devised by Rudi Rugg.
The simple contrasts produces numerous variation ⟶small + organic ⟶large + ⟶machined small + dark/large light

Figure 1.5 Examples of contrast, week 5 (24/10/2023)

Week 6⇒ Screen & Print

Typography in different Medium

Figure 1.6 Examples typography in different medium, week 6 (31/10/2023)

Figure 1.7 Examples typography in different medium, week 6 (31/10/2023)

Print type Vs Screen type

1. Types

Figure 1.8 Print type Vs Screen type, week 6 (31/10/2023)

2. Hyperactive link/ hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document
Hyperlinks are found in nearly all web pages, allowing users to click their way from page to another
Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link

3. Front size for screen

16-pixel text on a screen is about the same size as text printed in a book or magazine, this is accounted for a reading distance
As we read books closer, they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens

3. System fonts for screen/ web sale fonts

Each device comes with its own pre-installed font selection, which is based largely on its operating system.
Windows-based devices might have one group while MacOS ones pull from another. Then Google’s own Android system uses their own as well.
If you don’t have that font already installed and it’s not pulling from a web-friendly place, the font you see would default back to some basic variation like Times New Roman.
‘Web safe’ ones however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google

4. Pixel differences between devices

The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
Even within a single device class there will be a lot of variation

Figure 1.9 Pixel differences between devices, week 6 (31/10/2023)

5. Fonts size for Screen & Print

Figure 2.0 Examples of fonts size for screen and print type, week 6 (31/10/2023)

Static Vs Motion

Figure 2.1 Static Vs Motion, week 6 (31/10/2023)

Figure 2.2 Examples of Static & Motion, week 6 (31/10/2023)

Figure 2.3 Examples of Static & Motion, week 6 (31/10/2023)

INSTRUTIONS

TASK 2

EXERCISE⇒ EDITORIAL TEXT FORMATTING

For our third assignment, Mr Vinod introduced Editorial Text Formatting to us, which may be think as a branch of graphic design specialized in publications, such as books, magazines, articles, newspapers, catalogues, leaflets, brochures, covers, and so on. It's all about the internal and external aesthetics of these texts or contents. Mr Vinod gave us a head start by showing us a basic tutorial videos on how to do editorial text formatting

RESEARCH

The idea of editorial text formatting is how you get potential readers to end up as buyers, almost as if by magic. The user connects with the word through design, the title, the author and the publisher; they turn the pages and find the back cover and a text that leaves them wanting more, they turn the pages again, love at first sight, they open the book and let themselves get immersed in the words and what they want to say.

Figure 1.1.0 Examples from Vasava, week 5 (24/10/2023)

Figure 1.1.1 Examples from Vasava, week 5 (24/10/2023)

Figure 1.1.2 Examples from Pinterest, week 5 (24/10/2023)

SKETCH

For the current assignment, Mr Vinod instructed us to choose a short abstract from 3 abstracts which is "The role of Bauhaus thought's on modern culture", "A code to build on and live by" and "Unite to visualize a better world". We were instructed to think of different layouts and heading for the layout while styling it with suitable leading, kerning, alignment and etc. After watching and getting hang off Mr Vinod's tutorial video, I started on the layout and sketching. I chose the abstract tittle "Unite to visualize a better world".

Figure 1.1.3 Sketches for heading design 1, 2 and 3 , week 5 (24/10/2023)

HEADLINE ILLUSTRATION

Figure 1.1.7 Heading design 1, week 5 (24/10/2023)

I design the heading as a puzzle as I gave my main focus on the word unite. The puzzle imitates everyone from different places and backgrounds working as one putting the pieces together to make a whole

Figure 1.1.8 Heading design 2, week 5 (24/10/2023)

I design the heading as a book as I gave my main focus on the word visualize. Since young we were always visualizing stuffs from books, fairy tales and cartoons. Therefore, I designed the heading as a book to imitate how we first started visualizing since we were young.

Figure 1.1.8 Heading design 3, week 5 (24/10/2023)

I created the current heading as shown because I wanted to try something different, something fun and creative. Therefore, I designed the layout as a "staircase form" and arranged the heading on the left as we always read from left to right.

LAYOUT

Figure 1.1.9 Layout 1 with grid & baseline, week 5 (24/10/2023)

Figure 1.2.0 Layout 1 without grid & baseline, week 5 (24/10/2023)

Figure 1.2.1 Layout 2 with grid & baseline, week 5 (24/10/2023)

Figure 1.2.2 Layout 2 without grid & baseline, week 5 (24/10/2023)

Figure 1.2.3 Layout 3 with grid & baseline, week 5 (24/10/2023)

Figure 1.2.4 Layout 3 without grid & baseline, week 5 (24/10/2023)

FINAL EDITORIAL TEXT FORMATTING LAYOUT

After getting some feedbacks from Ms Low for the layouts, I finalized with layout 2. I adjusted the design for the heading and did some changes to the fonts and the text formatting to make it more complete.

HEAD

Font/s: Futura Std Light Condensed
Type Size/s: 148.73pt

BODY

Font/s: ITC New Baskerville Std Roman
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: Below 65 characters
Alignment: Justified Left

Margins: 10 mm top + 10 mm left + 10 mm right + 10 mm bottom
Columns: 2
Gutter: 5 mm

Figure 1.2.5 Final layout with grid & baseline (JPEG), week 6 (31/10/2023)

Figure 1.2.6 Final layout with grid & baseline (PDF), week 6 (31/10/2023)

Figure 1.2.7 Final layout without grid & baseline (JPEG), week 6 (31/10/2023)

Figure 1.2.8 Final layout without grid & baseline (PDF), week 6 (31/10/2023)

FEEDBACK

WEEK 5

General Feedback

Complete blog for week 1 - 4 for those who had not completed

Specific Feedback

Caption for the image
Text formatting exercise need more adjust on the letter e
Blog on track

WEEK 6

General Feedback

Do not use italic type for fonts in text formatting layout
Don’t leave a word at the last sentence of a paragraph in text formatting layout

Specific Feedback

Heading design needed to have a little adjustment
Text formatting can be improved in layout

WEEK 7

General Feedback

Do not use Italic for whole body texts. Italic is only for highlighting something
Complete blog for week 5 - 8 for those who had not completed

WEEK 8

Self-learning Week

REFLECTION

Learning text formatting and editorial text formatting was quite interesting as we get to learn how to design the headings and how we arrange the paragraphs to make the layout best visible for the reader. I also found out that text formatting and editorial text formatting are frequently used in publications, such as books, magazines, articles, newspapers, catalogues, leaflets, brochures, covers and needed the combined skill we learnt during task 1 and task 2. Therefore, this task was an upgraded challenge for me and needed me to be more aware on the details as well as how visually I may present my layout for readers.

The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.
There are infinite kinds of grids, but just one - the most appropriate - for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate.
Conversely a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to find the proper kind of grid for the job at hand.
Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that we divide the page in a certain number of columns according to the content, three, two, four, five, six, etc. Columns provide only one kind of consistency, but we also need to have an horizontal frame of reference to assure certain levels of continuity throughout the publication.
Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need.
Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid.

Figure 3.0.1 Types of grids, margins, columns and modules

2. Grids for books

For the design of a book the grid provides again structure and continuity from cover to cover.
In a picture book, according to the content, the grid could have a number of columns and sub-column to organize the information accordingly.
A book with square pictures will be square, a book with rectangular pictures will be rectangular or oblong, in accord with the most appropriate way to exhibit the material.
The content determines the container - a basic truth also in book design. It is a good practice to relate the grid to the proportion of the majority of pictures, so that there will be the least need for cropping their images.
By structuring the grid accordingly the book will have a higher level of integrity than otherwise. The illustrations provide several examples of grids for several kinds of books. Grids for Books We have designed grids for books, magazines, newspapers, and posters - each one with its own level of specificity - but all following the same basic concept of organizing information.
One element of refinement is to plan a grid in such a way that type and illustrations follow the same exact grid. To do that a specific leading should be determined for the type area of each module with the illustration modules coinciding.
One can draw a grid based on the leading size, the picture proportions, as well as having overlapping grid for different parts of the content. Naturally, the more complex the grid is, the more complicated the layout becomes, and one has to be very careful about that.

Figure 3.0.2 Examples of grid for books

3. Flush left, Centered and Justified

Most of the time we use flush left. This type of alignment derives from metal composition, particularly in Linotype.
Formerly it was faster to keep the alignment on the left side rather then having to kern the slug for every line. It also makes more sense since in our culture we read from left to right and it is better for the eye to go to the next line than having to cope with hyphens all the time.
However, it is important to control the shape of the rugged side by shifting sometimes the text from line to line to obtain a better profile. This may be time consuming but aesthetically rewarding.
We use centered for lapidary text, invitations, or any rhetorical composition where it may be more appropriate, or for the address at the bottom of a letterhead, and for business cards.
Justified is used more for text books, but it is not one of our favorites because it is fundamentally contrived.

Figure 3.0.3 Examples of flush left, centered and justified

4. Type size relationship

We have some basic rules for typesetting. Choose the proper size of type in relation to the width of the column: 8 on 9, 9 on 10, 10 on 11 pt for columns up to 70 mm. 12 on 13, 14 on 16 for columns up to 140 mm. 16 on 18, 18 on 20, for larger columns.
We try to achieve a typographic composition that expresses intellectual elegance as opposed to blatant vulgarity by using typographic devices: a proper amount of leading for the context, a proper use of roman or italic type, a regular spacing, a tight kerning, using rulers when appropriate (to separate different parts of the message), and a logical use of bold, regular and light type weights.
We do not like the use of type as a decorative element, and we are horrified by any type deformation. There are situations, however, as in packaging design where a more flexible attitude could provide better results. But even there, when used, should be with great moderation.

Figure 3.0.4 Type size relationship

5. Contrasting type sizes

Another element is the relationship among type sizes in the same printed page. Our first rule is to stick to one or two type sizes at the most If necessary, there are other devices such as bold, light, roman and italic to differentiate different parts of a text, but even there, stick to the minimum.
Type weights can be used to great advantage when dedicated to a specific function, rather than be used for color purposes or even worse as a phonetic analogy. Some people who talk loud and tend to scream trying to persuade you, love to increase the size and weight of type to make the message louder.

Figure 3.0.5 Examples of contrasting type sizes

6. Layouts

Once again, in designing any kind of publication the most helpful device is the grid. Once the outside margins are established (I tend to like narrow margins to increase the tension) the basic grid should be devised according to the nature of the publication: 2, 3 or 4 columns for a book or a brochure, 6 or more, for a newspaper.
Once the number of vertical divisions are decided the next step is horizontal divisions which will provide the number of modules per page. Again 2, 3, 4, 5, 6, 8 or more, according to the variety need of the publication. In defining the grid, one has to keep in mind what kind of visual material will comprise the layout.
For square pictures a square grid may be better than a rectangular one, well suited for rectangular images. Or, if the publication has a consistent variety of the two formats, one could design a double grid accommodating both situations. Or, otherwise, when appropriate, crop the picture to follow the grid.
The purpose of the grid is to provide consistency to the layouts, but not necessarily excitement - which will be provided by the sum of all the elements in the design. Outlined images, line drawings, and bold initials, can add sparks to the page as a variety of other devices. Great designs can be achieved without the use of the grid, but the grid is a very useful tool to guarantee results.
For literary books the margins follow a different set of considerations, ranging from the position of the thumbs - when holding the book - to an overall shape of the text column, or to the need of providing space for side notations (either by the author or by the reader).
Some considerations are practical others are aesthetic. We have designed all kind of books covering a variety of needs and situations.

Figure 3.0.6 Examples of layouts

7. Sequence

If sifting the images is the first task in the process of publication, the sequence of layouts is definitively the next one. A publication, whether a magazine, a book, a brochure, or even a tabloid is a cinematic object where turning of the pages is an integral part of the reading experience. A publication is simultaneously the static experience of a spread and the cinematic experience of a sequence of pages. Therefore, we attribute great importance to this detail of the layout process.
We like the layouts to be forceful. We do not like limply layouts with little pictures spreaded around the pages -some bleeding here, some bleeding there in a casual way. We tend to like a form of layout that almost disappears to the eyes of the reader. We would say that if you see the layout, it is probably a bad layout!
The book layout we tend to favor is a very simple format of a page of text beside a picture on a full bleed page, followed by a full bleed picture spread, followed by a page with a full bleed picture facing a white page with a picture - either on the center or upper right corner.

Figure 3.0.7 Examples of sequence

Figure 3.0.8 Examples of sequence

NG KAR YEE (0367743)

Search This Blog