- #RIGHTFONT AND ADOBE TYPEKIT PRO#
- #RIGHTFONT AND ADOBE TYPEKIT CODE#
- #RIGHTFONT AND ADOBE TYPEKIT SERIES#
- #RIGHTFONT AND ADOBE TYPEKIT WINDOWS#
Then I took a look at Tahoma, and using the overlay technique again, I was able to quickly identify that it had very similar letterforms and the condensed feel I was looking for. However, Verdana is quite wide, and at this size, it did not provide the contrast I was looking for. Verdana - especially at smaller sizes - is certainly an excellent fallback. Arial could have worked, especially in conjunction with it’s heavy cousin, but it lacked the character I was looking for. I ran through the default set of sans-serif fonts. I then repeated the same process for the body text. I felt confident that even if Quatro wasn’t displayed, the fallback font choice would still convey the spirit of the design. While Arial Black doesn’t have some of the personality and uniqueness of Quatro, the overall shape of the letterforms was similar and it reinforced the tone set by Quatro: sturdy, dependable, and hardworking. Using this overlay approach allowed me to directly compare the line-height and spacing, as well as the letter-forms of the two fonts, and quickly see if anything felt out of place. I was pleasantly surprised to see how well Arial Black worked as a fallback. With that knowledge in hand, I jumped over to Photoshop and copied the text set in Quatro, changed the font to Arial Black, and overlaid the two for comparison.
#RIGHTFONT AND ADOBE TYPEKIT WINDOWS#
They keep this list up-to-date - it’s a great resource for anyone designing on the web today.Ĭode Style reports that the heavy sans-serif Arial Black is installed on more than 98% of Windows systems and 95% of Macs.
#RIGHTFONT AND ADOBE TYPEKIT CODE#
Fortunately, the folks over at Code Style have surveyed fonts across different platforms and assembled a list of dependable web safe fonts. Together, FacitWeb and Quatro made a great pair but what about the fallback scenario? Finding the right fallback fontsĪs challenging as it can be to combine the right fonts, finding a the right fallback fonts can be even harder. Certain letterforms echoed the unique style of Quatro, while others provided just the right amount of contrast. FacitWeb is a strong sans-serif with a large x-height, open counters, and a slightly condensed style, especially at the lighter weights. But neither of these quite fit the style and contrast I was looking for that’s when I discovered FacitWeb.
#RIGHTFONT AND ADOBE TYPEKIT PRO#
Initially, I looked at a few of my go-to condensed fonts like Proxima Nova Condensed and Meta Web Pro Condensed. I wanted something lighter, slightly condensed, yet still legible. Choosing the right font to pair with Quatro required a bit more thought.
Pairing fontsįrom the beginning, I knew that I wanted HRDWRKCO’s main quote (by Phillip Glass) to be set in Quatro, an ultra black display face with some beautiful details (just look at that “K”). You will have already done the difficult work of determining font-size, line-height, and letter-spacing, and you will have addressed how the text will relate to other elements on the page. While there are times when designing in the browser is the right way to start a project, I have found that properly setting your type in Photoshop (or your preferred design software) will save you time in the long run. In preparation for this article I created a simple website for a fictitious company, HRDWRKCO. Even if the desired fonts are not available, the fallback experience should convey the spirit of the design and support the intended message. During the process, I was reminded that everything we do on the web should degrade as gracefully as possible. I took the opportunity to experiment with typographic choices that could shape the design and message of each post. Today’s post was written by Josh Brewer of Twitter.Īs 2010 came to a close, I had the privilege of working on Twitter’s Year in Review.
#RIGHTFONT AND ADOBE TYPEKIT SERIES#
This is part of a series of guest posts on web typography.
0 kommentar(er)
