In January we commissioned Ilya Birman1, a Russian designer with passion for typography, to adapt his typography keyboard layout (which has become a common typographer’s tool in Russia) to create a version for English-speaking designers, artists and, of course, typographers across the globe.
The main idea was to provide the web design community with a handy tool that would let designers enter characters that are usually unavailable on a keyboard easier and quicker. If you already tried to enter such words like naïve or résumé or used special symbols (trademark symbol ™) or pay attention to punctuation (en-dash, em-dash, hyphen etc.) and diacritics (accents, cedillas, etc.), you probably know what we mean.
In this post we release the Typography Keyboard Layout – a simple, yet useful tool that lets you enter characters that are usually unavailable on a keyboard with ease. Hopefully it will help you to achieve better typography in your designs.
Typography Keyboard Layout (Win / Mac) Link
Good designers, undoubtedly, know that quotation marks look like “this” and not like “this.” The latter are typewriter legacy and today are to be used solely in programming. Good designers also know, that dash is not the same as hyphen.
The most common use for hyphens in English is (surprisingly enough) hyphenation; dashes are used in ranges (2006–2009) or — and this is an example — as an alternative to parentheses. Good designers never use letter ‘x’ instead of multiplication sign in 1920×1440, and they never put (c) instead of © under their work. Oh, and they also do good designs.
So, now life is going to be a little bit easier. No more will you need to open Character Palette or try to recover that Alt+0163 combination from your memory.
Meet Typography Layout for Mac and Windows Link
This thing is a regular keyboard layout, except that with
Alt key on Mac or
Alt Gr key on Windows it lets you type all these nice characters seamlessly.
Just type Alt+T, and you get a ™. Everyday things are apostrophe (
Alt + '), quotes (
Alt + < >), em-dash (
Alt + -) and en-dash (
Alt + Shift + -). Other stuff is intended to be not so hard to remember if you use it. For example,
Alt+v is for ↓ , since the letter ‘v’ looks somewhat like arrow pointing down.
Alt+A is ≈ for approximately,
Alt+S is § for section. Guess why
Alt+8 is ∞ and
Alt+R is ®. So, you get the idea.
The layout also supports many kinds of diacritics, so you can type words like naïve or café and have fun. On the picture above (see full image for Mac7 or full image for Windows8) the diacritical keys are printed on a beige background, e.g. acute is on / and diaeresis is on : .
To type character é, you first press
Alt + Shift + / (this kind of means “enter acute mode”), then press
e. To type ï, press
Alt + Shift + : , then press
i. Not every character has a version with every possible accent. For example, there is no letter v with circumflex. In case you want to use such a character, you need to use combining diacritics. Press
v and then
Alt + Shift + ^ twice. You can hold
Alt + Shift and double press
The best way to understand how it works is to play with it. But please note that many applications do not support combining diacritics, so whether you can use them or not is more or less question of your luck :-)
Get it for free! Link
Download and see install instructions.
- Download the Mac-layout
- Download the Windows-layout
- Install instructions9
(to switch from installation guide for Win to installation guide for Mac and vice versa, click on the Apple- or Windows-logo under the keyboard image – see below)
- Image source files of the layout11
Adobe Illustrator and PNG-pictures with transparent background, so you can put it onto your favourite wallpaper (both with Win and Mac layouts).
- .pdf-poster for the Mac-layout12 and .pdf-poster for the Win-layout13
- full layout image for Mac14 and full layout image for Windows15
Further Reading on SmashingMag: Link
- Developer’s Alarm: 200+ Hotkeys To Boost Your Productivity16
- A Guide To Designing Touch Keyboards (With Cheat Sheet)17
- Photoshop Keyboard Shortcuts Cheat Sheet (PDF)18
- Form Inputs: The Browser Support Issue You Didn’t Know You Had19
- 1 http://ilyabirman.ru/english/
- 2 http://twitter.com/smashingmag/status/1220322244
- 3 http://forum.smashingmagazine.com/post6881.html
- 4 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
- 5 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
- 6 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
- 7 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
- 8 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-win.gif
- 9 http://ilyabirman.ru/english/typography-layout/
- 10 http://ilyabirman.ru/english/typography-layout/
- 11 https://www.smashingmagazine.com/images/typography-keyboard-layout/layout-image-source.zip
- 12 https://www.smashingmagazine.com/images/typography-keyboard-layout/pdf-mac.pdf
- 13 https://www.smashingmagazine.com/images/typography-keyboard-layout/pdf-win.pdf
- 14 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
- 15 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-win.gif
- 16 https://www.smashingmagazine.com/2007/07/developers-alarm-200-hotkeys-to-boost-your-productivity/
- 17 https://www.smashingmagazine.com/2013/08/guide-to-designing-touch-keyboards-with-cheat-sheet/
- 18 https://www.smashingmagazine.com/2010/02/photoshop-keyboard-shortcuts-cheat-sheet-pdf/
- 19 https://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/