Page 19

I recently received an email asking how the animals and letters match up in the OrigamiBats font and it occurred to me that maybe that would be useful information for other users. So here’s the list:

A - Crane
B - Hummingbird
C - Swan
D - Dove
E - Rooster
F - Butterfly
G - Peacock
H - Owl
I - Turtle
J - Fish
K - Fish
L - Fish
M - Whale
N - Frog
O - Cat
P - Dog
Q - Mouse
R - Fox
S - Rabbit
T - Squirrel
U - Pig
V - Bear
W- Elephant
X - Giraffe
Y - Monkey
Z - Dragon

As you can see, I don’t know a lot about fish.

Using transform: rotate() for a sideways text effect is pretty simple CSS but if you’re anything like me, you forget the details for positioning that text and have to play around with translates and transform-origins in the Inspector every time.

So I made myself a cheatsheet for positioning rotated text and thought I’d share it. You can align text to the top, center, or bottom of its parent container and change the direction of the text up or down.

Check it out here.

I just finished a major redesign of this site and one of the most agonizing aspects for me was trying to pick an appropriate color scheme. It was a lot tougher than I expected to get the right tone, complement my fonts, and generally avoid clashing. Here’s a list of sites and articles that were particularly helpful:

A Simple Web Developer’s Guide To Color (Smashing Magazine) - This article pointed out simple things I hadn’t even thought of like how to match your grays to your base colors.

Coolors - A really handy color scheme generator. I really like the simplicity of it’s design.

Trendy Web Color Palettes and Material Design Color Schemes & Tools (Awwwards) - An article that analyzes Awwwards Site of the Day winner color palettes and includes a number of color resources itself.

Adobe Color CC - There are a few options to help you pick colors with a color wheel but I found Adobe’s easiest to use.

Pinterest - For me, Pinterest might have actually been the most useful site. Click through to see everything I saved to my color palettes board.