Escolher a fonte certa para programar | Configurar o macOS

Escolher a fonte certa para programar | Configurar o macOS

23 de Maio de 2019 (tempo de leitura: 19 min)

configuracao desenvolvimento fontes

A actividade de programar, requer passar muitas horas a olhar para um ecran do computador. Claro que ter uma determinada fonte não vai fazer de nós melhores programadores, mas ter uma a fonte certa ajuda muito a melhor a experiência de e torná-la cansativa.

É uma má escolha, porque essa fonte não é muito legível.

Em tamanho 9, é impossível distinguir o 0 (zero) do O (a letra O) e o 1 (um) do l (L minúsculo) (Faça o teste). Quando essa a fonte está em negrito, ela é ilegível. Pra completar, a distância entre os caracteres dificulta, inutilmente, a leitura da tela.

Choosing a font to use in your editor is a very important step in your workflow that many developers don’t think twice about. Small things like the difference between 0 vs o or l vs 1 and large things like the readability of the font is key to your productivity and strain on your eyes.

If you are still using the default that came with your editor, it might be worth checking out a few below and see how you like coding with each of them.

Since talking about text editor configuration is a huge interest of mine, This list has been compiled over the last year talking to developers at meetups and on twitter. So while the list isn’t totally complete, It’s a great reflection of what developers are using these days.

Existem fontes que foram desenhadas especificamente para programar. Algumas são pagas e outras gratuitas. As fontes pagas, ou premium, são as que necessitam que seja comprada um licença para serem usadas. editors, IDE’s, and terminals.

Explicações:

I ranked the fonts with the following metrics: Whether similar characters are distinguishable, such as 0O, 1lI Whether the font style (line width, character width / height) is easy to read

A good programming font needs:

Monospace. While you can probably live with a variable-width font in dire situations, source code relies heavily on being able to scan/read your document vertically in columns. Most notably because of indentation. So if your i's and m's are different widths, you're gonna have a bad time. All of the fonts in this article are monospace. Distinctly looking characters. So you found a nice typewriter-esque typeface? Not so fast! There are some characters that are often mistaken for another, even when using popular programming fonts: Types of parentheses {([])} which may be nested to make things more difficult String identifiers (programming quotes) "'` getting mixed up during concatenation Commas and periods .,:; being nearly the same size Characters in the shape of a vertical bar 1Il|!i¡ One time I received a password containing three such characters as a text message (shown in a regular non-programming font). Suffice to say, it did take some tries before I could login with correct credentials. Similar digits and letters 0OØθB8&5S Unusual whitespace characters such as non-breaking space (although this can usually be handled in your IDE by showing invisible characters) Legibility. You should not have to question what characters you are reading, and text strings and comments should be easy to read. If you deal with a lot of comments and text strings in your code, it's an advantage if all glyphs look somewhat familiar to you and don't require a learning curve. Some fonts feature ligatures, which to some extent may ease legibility, but on the other hand may lead to unfamiliar glyphs, such as != being replaced by ≠. Work at small sizes. In contrast to word processing which is mostly linear, programming involves a lot of non-linear reading (skipping between different sections of a document). Even though monitors keep getting higher resolutions, programmers constantly have to compromise between using a small font size to avoid too much scrolling, without causing too much eye strain from using small font sizes. All necessary characters. I work in Norway, which is a country that has a couple of non-English characters in its alphabet. But we're usually in luck, since those characters are all in the basic Latin character set. In other countries, the situation may be worse and a larger number of characters may appear in text strings that you come across in the code. Another typical example: Many of the older fonts also don't have the Euro currency symbol which perhaps didn't exist at the time the font was made. Weights and styles. Many IDEs use bold and italics as part of their syntax highlighting. If you use a font that comes with such weights and styles already built-in, the result is more optimized than the pseudo-bold or pseudo-italics done in your application. Especially if you're using a low resolution screen or bitmap fonts. Another argument for having multiple weights available is in order to reduce eye strain. Smaller font sizes are usually easier to read with heavier weights, while larger font sizes may need lighter weights so the result doesn't look so jarring. Also, when using inverse/night color schemes (light text on dark background), lighter weights must be used if you want to keep the same perceived stroke thickness of a font compared to regular dark text on light background. Visual appeal. Sure, it's nice to have a functional font that is nice to look at as well. But that is of lesser concern in the scope of this article.

Good Programming Font Criteria Crisp clear characters. Extended characterset. Good use of whitespace. 'l', '1' and 'i' are easily distinguished '0', 'o' and 'O' are easily distinguished forward quotes from back quotes are easily distinguished -prefer mirrored appearance Clear punctuation characters, especially braces, parenthesis and brackets

Most variable-width fonts are not suited for code because programming fonts have different requirements than text fonts. Here are some of the things I’m looking for in a font for coding: Monospaced assignment operators nicely line up and make aligning code easier. Coding is easiest for most developers when using a fixed-width font. Clear and highly readable: The font that I’m looking for must has clear letters, with easily distinguishable punctuation and between certain common characters like zero and O character, 1 and l and | … The font should be easily legible at any size, and in particular at small sizes. Unicode to display almost characters with any languages

All systems ship with a version of Courier (sometimes Courier New), and unfortunately, many have it set as the default font for terminal and editor windows. It does the job, but it’s a bit dull and boring, lacking style and class. I don’t recommend this font if you have any other choice — and fortunately, you do. If you use this font, please bump the size and turn on anti-aliasing.

Picking a font for your code editor is incredibly personal and no one can really do that for you. With the amazing amount of customization options you have with IDEs and editors these days, choosing the right font and color combination is something you’ll probably be experimenting with regularly. But we’re pretty certain you’ll want to give all these a test drive and see how they handle. We don’t think you can go wrong with any of them.

It's four in the morning. I'm on my fourth cup of coffee. My source code is getting blurry. Where is that syntax error? Ah… there's a parenthesis that should have been closed. No wonder, it looked like the following curly bracket was the parenthesis. Perhaps if I had a different font where those two characters didn't look so similar…

And so the quest for the ideal programming font begins. Why must font previews be all about showcasing nice syntax highlighted and enlarged text? It seems like the only way to properly test a font is to try it out for several hours. I think it's about time we run some programming fonts through a visual stress test, to shake them out of their comfort zone.

As pagas são:

Operator Mono https://www.typography.com/fonts/operator/styles

Dank Mono https://dank.sh/

PragmataPro https://www.fsd.it/shop/fonts/pragmatapro/

As gratuítas são:

As fontes gratuitas não são necessáriamente inferiores às pagas, existem fontes com muita qualidade.

Hack Essa foi feita especificamente pra código fonte e é baseada em outras fontes: Bistream Vera e DejaVu. Hack is an open source font specifically designed for source code and is based on Bitstream Vera and DejaVu projects. 0O and 1lI are clearly distinguishable and the font is easy to read overall. Specifically I like the slashed zero. Hack is a monospaced typeface that was designed by Chris Simpkins to be optically balanced and highly qualified for coding. Among its characteristic features are low contrast design to make it very readable at common coding text sizes, a large x-height, and wide aperture. It comes with four font styles: Regular, Bold, Oblique, and Bold Oblique, and, among that, the whole Hack project continue expending under the contributions of the Bitstream Vera & DejaVu projects. It’s distributed under the Hack Open Font License https://github.com/source-foundry/Hack https://fedoraproject.org/wiki/Licensing/HackOpenFontLicense

Source Code Pro Desenvolvida pela Adobe os caracteres se distinguem bem uns dos outros. Available through Google Fonts, Source Code Pro is a nice monospaced font that coders turn to pretty often. The medium variation (the fourth one down in the image above) is highly recommended because, well, it’s average in terms of thickness, which makes it incredibly easy to read. If the name wasn’t enough of an indication, this particular font family was designed with programmers in mind, so it being one of the best programming fonts around should hardly come as a surprise to anyone. Source Code Pro is a monospaced sans serif open source programming font the idea of which was to maximize usability and avoid common design flaws. The design of this typeface presents vertical proportions, an ample width which increases readability and an extensive number of weights to choose from. It’s a second font family released by Adobe under the SIL Open Font License. It was created by Paul D. Hunt with programmers in mind oriented to work well in user interface (UI) environments. The typeface work on all platforms and renders beautifully using the “Anti-Aliased with Smoothing” Font Quality setting https://fonts.google.com/specimen/Source+Code+Pro https://github.com/adobe-fonts/source-code-pro

Consolas A fonte padrão do Visual Studio, usei ela por muito tempo. Provavelmente você já tem ela aí Consolas is the default font for Microsoft Visual Studio. It is very popular because it is shipped with Windows. Personally I don’t quite like the l character since it is easily confused with 1. Microsoft got into the programming fonts game with Consolas. Included in all Windows installations, Consolas is a monospaced font that MS developed to be clean, easy on the eyes, and multi-purpose. The MS documentation for Consolas puts it better than we can: All characters have the same width, like old typewriters, making it a good choice for personal and business correspondence. The improved Windows font display allowed a design with proportions closer to normal text than traditional monospaced fonts like Courier. This allows for more comfortably reading of extended text on screen. OpenType features include hanging or lining numerals; slashed, dotted and normal zeros; and alternative shapes for a number of lowercase letters. The look of text can be tuned to personal taste by varying the number of bars and waves. Consolas is the standard console font on Windows, having been included since Vista back in 2006. It offers slightly thicker text than other coding typefaces, but does have some readability issues, e.g. similar characters for 1 and l. Reddit user /u/paszklar fixed some of these issues in an edited version of the font (https://www.reddit.com/r/programming/comments/8jjq33/11_best_programming_fonts/dz0fpsz/). https://docs.microsoft.com/en-us/typography/font-list/consolas http://www.fontpalace.com/font-details/Consolas/

Space Mono Essa eu nunca usei, mas já ouvi falar bem dela e tenho alguns amigos que usam. Space Mono is designed by Colophon Foundry and is a great monospace font. Two cons that I don’t like: (1) l might confuse with 1 (2) , is not distinguishable with . under 14pt font size. https://medium.com/google-design/introducing-space-mono-a-new-monospaced-typeface-by-colophon-foundry-for-google-fonts-84367eac6dfb

Anonymous Pro I like Anonymous Pro because it gives a typewriter feeling. Also the < character is narrower than Hack which makes it feel like a symbol. Anonymous Pro is a monospaced fixed-width font purposely designed by Mark Simonson for coding. It presents a Unicode-based international character set that has support for most Western and Central European Latin-based languages, Greek, and Cyrillic. This typeface has a slashed zero, squared dots in the semi-colon to better differ it from the comma, and other great characters with distinct shapes that cannot be confused. Anonymous Pro is based on an earlier typeface and has four variants. It is distributed with the Open Font License and contains embedded bitmaps for smaller sizes and special “box drawing” characters. https://www.marksimonson.com/fonts/view/anonymous-pro

Fira Code FiraCode supports font ligature feature. It can merge two or more charaters into one character to make code reading more clear. Note the !=, <=, and == in the screenshot below. Although I don’t like font ligature because I am familiar with original symbols and feel a little bit confused when seeing merged characters, but I believe this font would help for other people. Recommended by tons of programmers because of its inclusion of coding ligatures, Fira Code is good stuff. Fira Code is an offshoot of the Fira Mono font. It’s developed by Mozilla, so you know that it has to be well-made and worth using. Programmers use an absolute mess of symbols and characters that aren’t necessarily letters and numbers, and Fira Code autocorrects them into the equal ligatures so that you no longer have to discern ASCII strings, but instead see the standard symbol. It is a monospaced code, and it’s just beautiful in any editor, but if you want to talk about reducing eyestrain, not having to interpret characters’ meanings as often will certainly do it. https://github.com/tonsky/FiraCode

FiraFlott FiraFlott is a mashup of two fonts, Fira Code and FlottFlott. It apes the look of the rather expensive Operator Mono font, combining a readable base font with cursive-style italics. We couldn't get FiraFlott working easily in Sublime Text, so the screenshot above is from VSCode. It's also possible to select two different fonts in your editor to achieve the same result, which has been covered by Matt McFarland for Atom and Mohammed Zama Khan for VSCode. A cheaper alternative to Operator Mono, Dank Mono, is also available if you want a more portable and easier to install option. https://github.com/kosimst/FiraFlott https://medium.com/@docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e https://medium.com/@zamamohammed/multiple-fonts-alternative-to-operator-mono-in-vscode-7745b52120a0

Monoid Crisp, clear, and just about perfect, Monoid is a programmer’s dream. While most developers are screen-laden these days, the fact of the matter is that there will be times that you have to work in a low-res environment or with a smaller-than ideal window. Monoid’s got you covered. There’s even a Monoid and Font Awesome integration called Monoisome. That’s kind of neat. Additionally, if you want to know more about what it’s like to work on a font that’s designed specifically for coding, the creator writes a lot about it on Medium. https://www.elegantthemes.com/blog/tips-tricks/font-awesome-wordpress https://medium.com/larsenwork-andreas-larsen/designing-a-coding-font-b10cabd594fc https://larsenwork.com/monoid/

Hasklig https://github.com/i-tu/Hasklig

Input Mono  Input Mono is another popular option that distinguishes itself with an almost overwhelming level of customisability, from different widths, weights, line heights, alternative letterforms and much more. Even in its default state, Input Mono remains a highly readable font, although out of the box it lacks ligature support. http://input.fontbureau.com/ http://input.fontbureau.com/preview/?size=14&language=python&theme=solarized-dark&family=InputMono&width=300&weight=300&line-height=1.2&a=0&g=0&i=0&l=0&zero=0&asterisk=0&braces=0&preset=default&customize=please

Office Code Pro  https://github.com/nathco/Office-Code-Pro

Inconsolata http://www.levien.com/type/myfonts/inconsolata.html Inconsolata is designed to be used with anti-aliasing enabled, but it’s surprisingly legible even at very small sizes. A big thanks to Raph Levien for creating this font, and for making it free. Inconsolata is an monospaced font created by Raph Levien, designed to improve on Consolas. If you have been using Inconsolata for a while, it may be worth getting the most recent version (ca. 2015) which is fully hinted and comes with a bold face. Readability could still be improved though, with 1 and l appearing quite similar in the Sublime Text screenshot above.

  1. Inconsolata is a highly readable and clear monospaced font created by Raph Levien. This typeface was designed for code listings and possesses the attention to detail for high resolution rendering. Most apparent some of the details are in print, for example, the subtle curves in lowercase “t”, “v”, “w”, and “y”. Given that Inconsolata draws its inspiration from many sources, it also borrowed “micro-serifs” from some Japanese Gothic fonts, which enhanced the appearance of legibility and crispness. Inconsolata has a humanist sans design and has received favourable reviews from many programmers. It’s an open-source font released under the SIL Open Font License. https://en.wikipedia.org/wiki/SIL_Open_Font_License https://www.levien.com/

Iosevka Iosevka is a very slender and stylish typeface which produces rather compact-looking code. With the relaxation of once-stringent code width requirements, Iosevka might be a good way to ensure all of your code fits on-screen without sacrificing font size. https://typeof.net/Iosevka/

Ubuntu Mono No list of the best programming fonts would be complete without having a Linux system font on the list. Ubuntu Mono is a workhorse of a font that is both incredibly readable, clear and crisp on various resolutions, and honestly, just looks really cool. It works well for body text as well as coding, and staring and it day after day won’t result in eyestrain or headaches. At least, not in our experience. Plus, if you just love Ubuntu but have to work in MacOS or Windows, this gives you a little taste of home. https://design.ubuntu.com/font/

Sudo Sudo looks a lot like Ubuntu Mono, only a little more squashed. In fact, though, it’s a hand-made font that Jens Kutílek put together because they wanted a better programming font. In almost every way, Sudo succeeds as a programming font. Even though the spacing is more compact than some font families, the characters are still perfectly legible because it’s still a monospaced font. The numbers and letters are different heights for easier differentiation, too, which is incredibly useful for at-a-glance debugging. https://www.kutilek.de/sudo-font/

Droid Sans We’ve always been a little partial to Droid Sans. From its first inclusion in Google Fonts, the clean font just looked techy and like it belonged in a terminal. And it still does. The monospaced version of the font family is perfectly at home in any code editor you like, and because it was designed for readability on mobile screens and high-resolution browsers, using it as your daily driver in VS Code is right in its wheelhouse. Droid Sans Mono is a fixed width monospaced typeface with an excellent legibility characteristics designed by Steve Matteson of Ascender Corporation originally for Android. The creator was aiming for the optimal quality and reading comfort on a mobile handset, and further along font was optimized and became a part of many programmers’ editors. It features a non-proportional spacing for displaying text in a tabular setting and contains Old Style Figures along with the extensive character set coverage including Western Europe, Eastern/Central Europe, Baltic, Cyrillic, Greek and Turkish support. Droid Sans Mono is available via Apache License, Version 2.0. https://www.fonts.com/font/ascender/droid-sans-mono?QueryFontType=Web&src=GoogleWebFonts https://www.elegantthemes.com/blog/resources/best-code-editors https://www.elegantthemes.com/blog/wordpress/vs-code-an-in-depth-review-for-wordpress-developers https://en.wikipedia.org/wiki/Steve_Matteson http://www.apache.org/licenses/LICENSE-2.0

Operator Mono https://www.typography.com/fonts/operator/styles/

DejaVu Sans Mono Derived from Bitstream Vera, DejaVu is also a great free licensed font. Sans Mono clearly distinguishes 0O and 1lI. The dot inside 0 is a little small compared to Hack but overall this font makes people comfortable. DejaVu Sans Mono is a typeface designed to be suitable for technical work. It’s a part of an open source DejaVu font family based on Bitstream Vera fonts, purposed for greater coverage of Unicode and to provide a wider range of characters and styles at the same time maintaining the original look. Font development happened through the organized collaboration from many contributors. DejaVu Sans Mono makes it easy to makes it easy to tell apart the uppercase i from the figure 1 and lowercase L, as well as the zero figure from O. It’s available under a Free license. https://www.fontsquirrel.com/fonts/dejavu-sans-mono

Monaco Monaco is the default font used by OSX before Snow Leopard. Characters are distinct so its difficult to confuse 0O and 1lI. I like this font because of its special style that makes me feel like using OSX again (I am using Ubuntu mainly now).

Ver: https://blog.checkio.org/top-10-most-popular-coding-fonts-5f6e65282266

Mais: https://app.programmingfonts.org/#latin-modern https://github.com/ProgrammingFonts/ProgrammingFonts https://www.slant.co/topics/67/~best-programming-fonts https://dev.to/slavius/give-ligatures-a-chance-5e8o https://ajkueterman.com/design/coding/font-ligatures-are-awesome/