Display Text Typography Projects

Continuing with my ongoing education in design, I focused recently on typography and layout. And I went through two Lynda.com courses to do it.

Those courses are called Learning to Set Display Type and Learning Graphic Design: Set Perfect Text. They are both taught by John McWade.

The classes John McWade teaches are exceptional because he is such an excellent instructor and quite good at explaining the concepts he is trying to get across. I recommend both of the classes I mentioned above, as well as other classes in the Lynda library by this instructor. Here are previews of these two courses.


Neither of these classes include exercise files. But after watching both of these courses I was inspired and motivated to try my own type projects, to put his advice into use.

Type Rules I Learned

It sounds basic, but I wasn’t aware that some fonts have additional glyphs that can be used instead of the regular font. Bookmania is an example of a font with tons of extra options for letters.
I also learned about justifying text, using hyphenation and spacing to help words fit. I also learned about using hair-spaces and thin-spaces, and using drop-caps.
Actually, the class doesn’t go into how exactly one would create a dropcap. So, I turned to YouTube – or as I like to call it, the second internet – to find another tutorial.
And I found one. This one is actually by another Lynda instructor, Anne-Marie Concepcion. She makes it look so easy.

 As soon as I learned how to do this, I wanted to try it right away. Voila!

Type Stuff I Made

dropcaps

Now we’re getting to the fun part. First is the dropcap I made after watching the YouTube video.
Drop cap and Display type
Used Bookmania and a Lynda tutorial to create a dropcap.

In this one, I was able to move the text corners so that the text flowed around the dropcap R. Looks cool.

I was inspired to use the extra glyphs in Bookmania to create my own name. I used the smallcap version of the letter ‘A’ in the word, “alliwalk”.

Projects with Images

I like to collect stock photos – I know, it’s a bad habit – because I think that someday I’ll use one for a project. So, I end up with many stock photos that I don’t use. (Sometimes I use them here on my blog.) Well, I was finally able to put a few to good use.

All Dressed Up

The first is this nice “Man in a suit putting on a tie”. I wasn’t sure what I was going for. Maybe a book cover or magazine spread. But, I think what I have is some sort of flyer concept.

This image uses Bickham Script Pro and Didot.

This image uses Bickham Script Pro, which has tons of fancy glyphs, and Didot. Didot has a certain fashionable sense to it, and I think it works. I wanted this to have a bespoke aura about it, yet still masculine. The italicized Dido, and the extra swirls from Bickham Script Pro help to get that across.

New rules of computer technology

BarryW90-Black, BarryW90-Thin, Futura Medium, and Minion Pro

In this case I wanted to use justified type, as John McWade had shown in his course. I stuck with Minion Pro, because it was easier to work with. And I added in a few random elements – a few numbers, some quotes, some pronouns – just to incorporate some of the lessons from the course. One thing I wasn’t able to replicate was keeping the subsequent letters from the word in the dropcap closer than the other words on lines 2 and 3. InDesign just wasn’t cooperating for me.

But I did enjoy this project. BarryW90-Black and Thin are highly stylized, very technical-looking fonts. I was inspired to find a new stock photo for them. Something computer-oriented.

 

Next time…

In my next post, I’ll talk about a few more projects in InDesign, and another type/logo(!) project I made for a fake company I invented called Apex Travel.

7 Web Design Articles

At some point, I came up with the idea that reading 10 articles on one topic was a good idea. Well, I only made it to 7. But these 7 articles, on LESS and 404 pages, were very helpful for me so I’m still glad I read them.


Learn LESS in 10 Minutes

15 Interesting JavaScript and CSS Libraries for April 2017

Related:

  • http://lesscss.org/features/#features-overview-feature
  • http://less2css.org/

I really enjoyed learning LESS, although I think it would be easier to use with a task runner.


15 Interesting JavaScript and CSS Libraries for April 2017

http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/ 

 


34 brilliantly designed 404 error pages

http://www.creativebloq.com/web-design/best-404-pages-812505

Getting inspiration and a sense of best practices while creating my own 404 page. I have to say, Bloomberg’s is hilarious. (Creative Bloq, October 10, 2016)

 


How Do I Create a Custom 404 Error Page?

http://www.htmlgoodies.com/beyond/reference/article.php/3472591/How-Do-I-Create-a-Custom-404-Error-Page.htm

Yes, I did create a 404 page, which is located at alliwalk.com/404/. But given that my current website is only one page, it’s hard to get lost.


Should I use a video as a background?

https://css-tricks.com/should-i-use-a-video-as-a-background/

(CSS Tricks, Dec 2015)


Create Fullscreen HTML5 Page Background Video

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video


CSS Filters

https://css-tricks.com/almanac/properties/f/filter/

This is one of the coolest things I’ve seen in a while, but it’s still experimental so don’t use it for anything important.