![]() This will work in all browsers which fully support the syntax. This approach allows the Open Sans font family to be used just like any non-embedded font in CSS, with the browser downloading and swapping in the appropriate font files when text has different font-weight or font-style attributes. (You can download the complete kit, including the stylesheet and font files, here) Plus, juggling 5-10 font-families makes it hard to keep your CSS simple and manageable. This means that you would have to re-declare the font-family every time you wanted italic or bold text, and just isn’t a very robust solution. While there are many kits available to use Open Sans with the industry-standard CSS webfont embedding, most webfont vendors and sites like fontsquirrel use different font-family names to differentiate between regular, italic, and bold versions of the fonts. Lately, I’ve found myself using it for all kinds of projects on the web, including this site. Open Sans is a really great sans-serif font commissioned by Google and available under the Apache license. Unless you have a specific need for a downloadable webfont kit, I recommend giving Web Fonts a try. For most web designers, Google Web Fonts uses the same technique and lets you take advantage of browser caching and Google’s CDN to speed up font loading. The CSS provided in every kit uses a unique font-family name for each weight and style, and sets the weight and style in the declaration to normal.This post is intended for people who have a specific reason to want to host the font themselves. If you’ve used one of FontSquirrel’s amazing kits, then you’re familiar with this approach to setting weights and styles. Unique Font-Family Names, Normal Weights And Styles I’ll show you why they are not the best solutions, and show you a third more effective approach to follow. Let’s look at two popular approaches to setting weights and styles with the declaration. Because weights and styles help our visitors to read our content, we should make sure they work! And getting weights and styles to work correctly using the declaration can be a bit crazy-making. In this article, we’ll start where we left off. ![]() How To Choose A Typeface - A Step-By-Step Guide!.How To Choose The Right Face For A Beautiful Body.80 Beautiful Typefaces For Professional Design.The same text without bold or italic (right) feels more like a narrative. Bold and italic help readers to see structure and to skim the text more efficiently (left). Weights and styles are an important UX element. They add emphasis - both strong and subtle - that can help visitors understand the organization of content before even starting to read it. Bold and italic forms of a font help people to skim your website. Bold and Italic Help to Organize ContentĪ few months ago, I wrote an article on “ Avoiding Faux Weights and Styles with Google Web Fonts.” I ended the article by showing that weights and styles are an important UX element when setting text. Either way, keeping text readable will help them achieve their goal. If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. ![]()
0 Comments
Leave a Reply. |