Renowned Italian designer Massimo Vignelli, creator of the classic American Airlines logo, once said that designers use far too many typefaces. But with so many great around, it's no surprise that creatives' collections are ever-growing. Vignelli's all-purpose toolkit features household names like Garamond, Bodoni, Helvetica, Univers, Futura, Caslon and Baskerville – between them spanning three centuries of type design history. And few designers would disagree that all of the above are timeless, albeit well-worn classics. But sometimes something a little different is required of a display face, to give it that extra punch. Sometimes the ubiquitous serifs of Times New Roman just don't quite cut it. Whatever your needs, the following list of top fonts that often get overlooked should really come in handy. We've split our list into display fonts, serif fonts, sans serif fonts and slab serif fonts to help you find the font you need. We'll start with display fonts. • Display fonts 01. This Bodoni display version from the 1920s is something extra special Okay, so Vignelli already ticked Bodoni off the list – and a beautifully classy Didone-style serif it is too, thanks to the craft skills of Giambattista Bodoni in the late 18th century. But this display version from the 1920s is something extra special for setting large, high-impact type where the extreme contrast between the stem thickness really comes into its own. A top font that's perfect for setting large, high-impact type where the extreme contrast between the stem thickness really comes into its own. This surreal display font combines simple, ultra-thin lines with bulbous, cloud-like forms Designed by Stefan Kjartansson for YouWorkForThem, this utterly unique, quite surreal display font combines simple, ultra-thin lines with bulbous, cloud-like forms to give Cumulus & Foam its tagline, 'the most beautifully grotesque font of our time.' Although Kjartansson proudly asserts that it doesn't work as a typeface, this top font's 'ugly beauty' and 'disciplined chaos' can certainly add character to a project. Phantasy star zero patch italy flag. Next page: serif fonts. Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, we will run through the basics of including custom fonts in your pages. Upload the font First, make sure that the font you want to use is licensed for web use. Almost all free fonts can be used on a website and many premium fonts are available with a license that covers web usage. Next upload your chosen font to your server. You may wish to store it in a dedicated “fonts” directory but this is optional. Remember to include the files for any variants of the font you plan on using, such as bold or italic. You can use EOT (Embedded OpenType) files for Internet Explorer and either OTF (OpenType) or TTF (TrueType) for the rest. (Additional options include WOFF (Web Open Font Format) and SVG (Scalable Vector Graphics) but we will stick to more common types here.) Make a note of where the font files are stored on your server. Add a font-face section to your CSS code Open the HTML or CSS file for the page you are working with. Add a font-face declaration to the style code. Src: local('Lovely Font'), local('Lovely-Font'), url('fonts/lovely_font.otf') format('opentype'); src: local('Lovely Font'), local('Lovely-Font'), url('fonts/lovely_font.ttf') format('truetype'); The addition is the same for both OTF and TTF. We specify the font name after the local keyword. In this case we have two lines specifying the local font because the font name has more than one word in it.
0 Comments
Leave a Reply. |