what is Typography?
typography is the art and technique of arranging type and the aim of the game is to make you written language look aesthetically appealing and easily readable so audience's can absorb your message. Here's a guide to fundamental typography terms and some great tips and tricks of using them in design.
but before that let me show you some showcase of a very unique approach to portrait illustrations. These images below are mixtures of both images and typography, where the latter is used to shape the portraits while the words within have messages to deliver. It is just amazing how manipulation of font types, sizes and keywords can form a great portrait artwork with inner meaning.
1. Burdened Barrack Obama | Dylanroscover
2. Self Portrait | Saluum
3. Self Portrait | Stacy Benson
4. Self Portrait | Stacey Grove
5. Mos Def a.k.a Dante Terrell Smith-Bey | DilsJ
6. Erik Spiekermann | Steve Butabi
TYPOGRAPHY TERMS
01. Font vs typeface
A font is a set of printable or displayable text characters in a specific style, known as a typeface. Today, the terms ‘font’ and ‘typeface’ are used interchangeably, but they are historically different. In brief, a typeface is the design – it’s what you see; a font is how that design is delivered – it’s what you use.
Tip: The typeface should reflect content. Stick to one typeface or font family to create harmony in a design, and use italic, bold, and other styles to add hierarchy.
02. Size
A font can be applied in all different sizes and can be used to differentiate create visual hierarchy.
Tip: Vary the size and weight of the fonts used for the heading, sub-heading and body copy. For example, a larger font size for the heading will amplify the focal message.
Trick: Use the golden ratio to determine the proportions of the font size used for the heading, sub-heading and body copy.
03. Weight
A font’s weight determines how thick or thin characters are displayed.
Tip: Narrow, thin fonts are a good way to create contrast between a heading and body text, but be aware that they can be difficult to read on small body text because of how faint they can look.
04. Ascender
The ascender is the vertical stem that extends above the mean line of a font. In other words, the taller part of a lowercase letter or the upper portion of an uppercase letter.
Trick: Place smaller, introduction or supportive text in this landing space.
05. Descender
The descender is the portion of the letter that extends below the baseline of a font.
Trick: Place subheadings or less important text in this space. Or add a tagline or embellishment.
06. Serif
A serif is a typeface with small decorative edges at the ends of the letters. They have a more traditional and sophisticated look.
Tip: Use serif typefaces for long copy, as they are easy to read.
07. Sans Serif
A sans serif is a geometric typeface with no decorative details, additional strokes or spurs at the end of the letters. They have a more modern, minimalist look.
Tips: Sans serif typefaces are great for titles.
08. Script
A script font mimics the stroke of a paintbrush, often linking letters together. Applying a script can add a certain edge to your design.
Tip: Script typefaces create a dynamic and interesting pairing when combined with a sans serif.
09. Baseline
The baseline is the line on which most letters sit and below which descenders extend.
Trick: Add a line of text along the baseline corresponding to the line above.
10. Tracking (or letter spacing)
Tracking is adjusting the space between letters throughout an entire word.
Trick: Elongate shorter words and fill empty space by increasing letter spacing, creating flush lines between headings and subheadings.
11. Kerning
Kerning is similar to tracking in that it determines the space between two letters or characters. However, tracking adjusts space equally through a whole word, kerning only adjusts the distance between two letters.
Tip: Adjust space to improve the visual flow of words. Words can be indecipherable when letters are set too close together and awkward when too far apart.
12. Leading
Leading refers to how text is spaced vertically in lines and affects the readability of text.
Tip: The space between the bottom of the upper line and top of the lower line should be in proportion to the size of the font. Too much or too little space can make it difficult to read and descenders can overlap ascenders.
13. Line Height
Line height is the distance between two rows of text from baseline of the upper row to baseline of the lower row.
14. Glyphs
Glyphs are the characters and symbols in a typeface, such as ampersand or asterisk.
Tip: Take advantage of glyphs as design elements and choose a typeface that shows off its design.
10 MORE TIPS AND TRICKS
01. Space letters to suit the mood and message
Reducing the space between letters, via tracking or kerning, makes text appear denser. Likewise, increasing the space between letters can make text appear more airy and transparent. Either way, experimenting with the letter spacing of a word can make that word look more impressive. But always ensure words are legible and readable.
Here, a heavy typeface (Hunter) and condensed tracking amplifies the focal message and creates a sense of unity between the letters. Above and below the heading, a finer font style and expanded tracking spaces out the words in the supporting copy so they sit flush with the heading. In addition, a subtle transparency softens the hard edges of the letters.
02. Use a typeface that suits the content
Create a harmonious design by choosing typefaces aesthetically aligned to the content and other elements of the design. Is the message loud or subdued? Is the style modern or traditional? Is it appealing to children or adults? Select a typeface that embodies the essence of the brand and the message to reach the target audience.
Here, a fine and fluid typeface – Julius Sans One – is combined with the ‘Nordic’ filter to desaturate the background image for a light and subtle look. The expanded spacing suits the watery, floaty aesthetic; the character or icon between Muted Magic unites the words; and the lines above and below anchor the text to the page.
03. Combine narrow typefaces
Narrow typefaces have thin and elongated letters that can have a light, modern and elegant appearance. Narrow fonts work better for headings than they do for blocks of text as words can be difficult to read when small or print too faint.
Here, two similar narrow typefaces have been combined for a modern and interesting contrast. The weight of each typeface is proportional to the font size and the tracking has been set so the sub-heading is flush with the word above. Like the previous example, two lines anchor the text on the design while containing and adding emphasis to the text.
04. Lay text over an image
When laying text over an image, be sure to use a contrasting or complementary color and position the text, preferably over white or negative space, in order for it to be readable.
Here, grey or black text has been used over the lighter areas of the background image, and white text over darker areas. The font and image all fall within the same color palette for a cohesive design that clearly expresses the mood of the book. Adjust the brightness and contrast of the image or add filters to the background image to improve the legibility of the text. In this example, the ‘rule of thirds’ has also been applied to space out text and define visual hierarchy.
05. Play with outstanding characters
Take advantage of glyphs, symbols, characters, numbers and even capital letters when used on their own, and choose a typeface that transforms them into outstanding design elements.
Here, the very elegant ampersand in the typeface PlayFair Display has been enlarged and aligned to unite all three lines of text. It is a typographic feature that adds interest and elegance and is suggestive of the seasonal mood of the background image. In addition, the size of the C in both Crisp and Cool has been increased but the deliberate placement and adjusted leading ensures they don’t overlap.
06. Apply all-caps for short headings
As a matter of habit, the human eye is more accustomed to reading lowercase text. Therefore, all-caps should be used sparingly and are best suited for short headings or sub-headings. Choosing a bold or light font will alter the meaning of the message. Grabbing for the audience’s attention? Go bold. Wanting to look modern but understated? Choose light.
Here, all-caps have been used for both heading and sub-heading in a light font with extended tracking. The words have been strategically placed over the background image, cleverly using positive and negative space.
07. Use a typeface that mimics the meaning of the word
Select a typeface that mimics or expresses the meaning of the word or words. Writing the word ‘playful’? Then use a playful font. How about the word ‘narrow’? Then use a narrow font
Here, a tall, elongated and condensed typeface has been aptly used for the word Towers, imitating the skyscrapers it refers to. Condensed fonts and tracking have also been applied to create a block of text that sees the heading and sub-heading flush and justified. Condensed fonts are tall but still weighted (unlike narrow fonts, which are finer and lighter) and work well in limited spaces. Notice that kerning between the rows of text is equal and proportional throughout the design for harmony and easy reading.
08. Renaissance revival
Use Roman style typefaces to inject a sense of history into a design. It is a clever way to reference the past or emphasize a traditional or scholarly aspect of a brand. Plus, they are some of the most legible on paper, making them a good choice for body copy.
Here, a Roman typeface has been used for the sub-heading along the bottom of the design and contrasts with the jagged cut typeface IM Fell English Small Caps.
09. Combine light and bold font styles
Using different styles, such as italic, bold or condensed, of one font can differentiate words without adjusting spacing.
Here, the heading has been laid out with equal spacing between all letters despite that it is in fact two words. So rather than putting a space between the words, a bold font has been used to differentiate ‘Acrylic’ from ‘Bar.’ This design also uses a line to anchor the text but instead of a plain line, it is a brushstroke suggestive of the products being sold.
10. Overlap transparent type
By adding a transparency to letters, the spacing can be overlapped without diminishing the legibility of the text.
Here, a transparency has been applied to the red, blue and yellow so that when they are condensed the overlapped area is purple of green. If they were all in blue, the letters would still be readable as the overlapped areas would be darker than the rest of the letters. However, being of different colors makes these letters increasingly so. When overlapping letters, be sure there is still some logic and alignment to the placement. As you can see here, the lower left corner of the B lines up with lower inner-right corner of the A, and so on.
what software to use?
you can create your own self portrait typography using adobe photoshop or adobe illustrator software that most of peoples use but i am prefer using adobe photoshop, but it is depending on peoples as well.
I am sure you guys must have seen the amazing typographic portraits artist have made all over the world featuring eminent personalities and famous stars. If you have ever wondered how to go on about creating one for yourself right?
so now you can create a typographic portrait for your loved ones and families or your members with ease and surprise them.so here the link from youtube that you can refer to create your own self portrait typography.
My Self Portrait
ini adalah contoh self portrait yang saya sudag hasilkan menggunakan perisian adobe photoshop. practice make perfect 😎..semakin rajin anda practice buat semakin pro la anda..
black and white version
maaf saya budak baru belajar. klau salah tolong ajarkan..bukan kecam..haha
References:
No comments:
Post a Comment