Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Typography Keyboard Layout: Download Now!

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.

We asked our Twitter followers2 to participate in our beta-testing. And after we received a lot of positive feedback3, we implemented some of your suggestions in the final version.

4

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

5

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.

6

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.

Bugs, ideas or suggestions? Link

Please report bugs and fixes directly to Ilya Birman and please leave your comments, ideas and suggestions for further improvements in the comments to this post.

Footnotes Link

  1. 1 http://ilyabirman.ru/english/
  2. 2 http://twitter.com/smashingmag/status/1220322244
  3. 3 http://forum.smashingmagazine.com/post6881.html
  4. 4 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
  5. 5 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
  6. 6 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
  7. 7 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
  8. 8 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-win.gif
  9. 9 http://ilyabirman.ru/english/typography-layout/
  10. 10 http://ilyabirman.ru/english/typography-layout/
  11. 11 https://www.smashingmagazine.com/images/typography-keyboard-layout/layout-image-source.zip
  12. 12 https://www.smashingmagazine.com/images/typography-keyboard-layout/pdf-mac.pdf
  13. 13 https://www.smashingmagazine.com/images/typography-keyboard-layout/pdf-win.pdf
  14. 14 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-mac.gif
  15. 15 https://www.smashingmagazine.com/images/typography-keyboard-layout/full-win.gif
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Nice article and nice tool!

    0
  2. 2

    Marc Pettifer

    April 2, 2009 2:59 am

    Hmm, not working for me on w7 :'(

    0
    • 3

      Works great for me (W7 Enterprise).

      Wishing there was a bullet in this layout, none the less anything that keeps me out of charmap.exe is a _godsend_

      0
  3. 4

    awesome tool thanks! :]

    0
  4. 5

    Wow, neat Idea indeed. But it’s not working for me on a MacBook. After dropping the files in Libary/Keyboard Layouts, “Typography Layout” is possible to activate.
    But then I am not able to write anything. Even the special characters like (c) is not possible to type. It’s like I am not hitting the keyboard… nothing happens for me.

    But despite, it is definetly a useful and handy tool! Would be even more useful in different Language-Layouts. For example “” is next to “y” in Germany, and “y” is where the american “z” is. You may considerate it for the next Version ;)

    0
  5. 6

    Yes! Great idea! But I do agree with Henne. For me it would be too much of a change from my Danish keyboard.. Some of the letters are placed elsewhere – and må æ, ø and å is missing….

    0
  6. 7

    I’m loving it!

    0
  7. 8

    fun but no thanks ill stick to normal keyboard layout. Its what im used to. So no point of changing.

    0
  8. 9

    Smashing Editorial

    April 2, 2009 3:21 am

    @Ilya Birman: maybe we could release the source file of the layout, so other developers can modify it for their needs (German/Danish/… developers)?

    0
  9. 10

    Uhh, spanish version would be great, is it easy to remap to another language? that’s really worth a try

    0
  10. 11

    The image links for Mac & Win result error messages. Please fix it

    The images are fixed now. Thanks and sorry for inconvenience!

    0
  11. 12

    Copy for the text: “n the picture above (see full image for Mac or full image for Windows) the diacritical keys are printed on a beige background, e.g. acute is on / and diaeresis is on”

    0
  12. 13

    Ilya Birman

    April 2, 2009 3:24 am

    Henne, have you tried restarting the app in which you cannot type? Because on a Mac, the Layout starts working in each app after it’s restarted. Let us know if it still doesn’t work, and in this case please provide more info about your OS version and stuff.

    0
  13. 14

    What a cool resource!

    0
  14. 15

    Ilya Birman

    April 2, 2009 3:26 am

    Mac Users can modify the Layout for their needs with a free tool Ukelele (Google it).

    0
  15. 16

    I think this works best for an english keyboard. I´ll stick to the glyphs pallette as long as I use a Norwegian keybard.

    0
  16. 17

    Ilya Birman

    April 2, 2009 3:32 am

    Mari, can you please tell what the differencies between Norwegian and English keyboards are? You are not the only one, so may be later we will consider making special versions for other European languages, and your help may be valuable. Thanks!

    0
  17. 18

    How can you access the menu commands using the keyboard if you’ve overridden the ALT+character commands? Presumably if I type in ALT+F i’ll now get a £ sign rather than the file menu – surely this is a big loss in functionality?

    0
  18. 19

    Should implement this on Linux as well. Wasn’t aware of the fact but I missed something like this — exactly!

    0
  19. 20

    Too bad this will only work for people using the a qwerty keyboard :(

    0
  20. 21

    Ilya Birman

    April 2, 2009 3:42 am

    James, on Windows, we use only the right Alt key (the Alt Gr) for the special characters, so you can still use the left one to access menu items. On a Mac, there are no menu accelerators, so both Alt keys are used for special characters.

    0

↑ Back to top