Skip to main content

Home/ Web Development, Design & Programming/ Group items matching "Font" in title, tags, annotations or url

Group items matching
in title, tags, annotations or url

Sort By: Relevance | Date Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

@font-face gotchas « Paul Irish - 1 views

paulirish.com/...font-face-gotchas

@font-face css3 typography font-face fonts css webdesign web design

shared by Vernon Fowler on 10 Oct 12 - No Cached
  • There are a few reasons why smiley is a better solution: Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.  (crbug.com/33173) On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() Font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771 Although it's unlikely, you could reference a local() Font which is completely different than what you think it is. (Typophile post on different Fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the Font download. These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.
  • And.. regarding @font-face syntax I now recommend the bulletproof smiley variation over the original bulletproof syntax.
  • @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('?'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }
  • ...5 more annotations...
  • in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face'd text will not succeed. Same applies for font-style:italic.
  • text-transform doesn't play well with @font-face in current implementations.
  • @font-face doesnt play nice with css transitions.
  • If a @font-face declaration is within a media query @media screen { ..., it will fail in Firefox.
  • SVG Fonts - Currently SVG is the only way to get webFonts working on iPhone and iPad.
  • Vernon Fowler on 10 Oct 12
     
    "There are a few reasons why smiley is a better solution: Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.  (crbug.com/33173) On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() Font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771 Although it's unlikely, you could reference a local() Font which is completely different than what you think it is. (Typophile post on different Fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the Font download. These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well. "
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
Vernon Fowler

A Beginner's Guide to Pairing Fonts | Webdesigntuts+ - 2 views

webdesign.tutsplus.com/...ginners-guide-to-pairing-fonts

fonts webdesign web design typography

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • Using multiple fonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorative and striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds by selecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe in the knowledge that they’ll compliment each other just fine.
  • What’s the Nature of my Content? When selecting fonts it’s important to consider the nature of the layout you’re dealing with. Are we talking mainly body copy? Are there multiple headings, sub-headings? Perhaps it’s a magazine layout with decks, blockquotes? When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading, don’t switch to another font for a sub-heading elsewhere. Keep a font’s purpose clear.
  • How Do I Achieve Successful Pairing? You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways – being too similar being just one.
  • ...7 more annotations...
  • The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability.
  • Pairing 2: Contrast Contrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are just some qualities to look for: Style: Take a look at any font resource site and you’ll see them categorized as Blackletter, Monospace, Script, Slab Serif etc. fonts of different styles will often contrast. Size: Big font, little font. Say no more. Weight: Varying the weight of fonts is a common way to establish visual hierarchy. Hierarchy achieved by contrast. Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of the shoulders, the direction of the movement. Color: Not something we’re going to go into here, but color can easily determine whether two fonts work well together.
  • It’s a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Let’s look at a few, kicking off with two system fonts. That’s right, even they can work well together.
  • Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.
  • Slab serifs make very effective attention grabbers, but can be a bit pushy if you’re not careful.
  • Pairing 3: Conflict Let’s not focus too much on what doesn’t work well, we don’t want to sour the joyous combinations in the rest of this guide do we? That said, let’s just illustrate how two fonts, which are arguably too similar, can look awkward together.
  • Once you’ve concluded that you don’t like a font pairing, try to work out why and it will help you make decisions more quickly in the future.
Vernon Fowler

Your Body Text Is Too Small - 0 views

blog.attackthefront.io/text-is-too-small-5e02d36dc902

typography font size body text web webdesign usability readability legibility

shared by Vernon Fowler on 23 Nov 16 - No Cached
  • Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.
  • Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.
  • better to optically select a font size according to near-finalized colors, or in different color scenarios
  • ...6 more annotations...
  • a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices
  • down to the eye again to optically adjust the letter-spacing and font size together
  • the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75
  • line height should also be relative to the font size as it scales up for larger displays
  • This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users
  • sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

snook.ca/...font-size-with-rem

css3 rem font css fonts sizing webdesign web design

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
  • The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  • We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  • ...3 more annotations...
  • I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
imran subhani

Free Font Kilogram (based on Nick Curtis' Font Anagram) - 0 views

www.fabulous99.com/...ed-on-nick-curtis-font-anagram

free font kilogram free font kilogram strong typeface typeface for heading typeface for bruchres

shared by imran subhani on 15 Feb 10 - Cached
  • imran subhani on 15 Feb 10
     
    Download this fabulous font for free. This is Kilogram a free font, Karl Martin designed based on Nick Curtis' font Anagram. Have a look, give me your feedback and download KalleGraphics version of the font free. Enjoy! Download free font here: http://kallegraphics.com/ KalleGr
Luciano Ferrer

Convert OpenType Font => Woff Web Font - 1 views

orionevent.comxa.com/otf2woff.html

typography font-face generator converter

shared by Luciano Ferrer on 26 Oct 11 - No Cached
  • Luciano Ferrer on 26 Oct 11
     
    "Convert otf to woff how many times ,after you finished the sites mockup, you wanted your site to actually use the fonts in your beautiful mockup, instead of making pictures for all of them (and don't get me started on the hover effect pictures)? you can make your font (OpenType font) to a woff and via css make it show on the site! This tool will convert .ttf , .otf , .ttc file type since they are all OTF format (which stands for Open Type font). OTF is the most common font type for windows/macintosh based systems. The woff format is the mozilla foundation format for a "compressed" Open Type font (OTF) so it can be of use in web-sites. And thus giving the user much richer visual content and the developer more freedom in design of a web-site. "
Inspirationfeed

48 Free Amazing Display Fonts - 0 views

inspirationfeed.com/...8-free-fantastic-display-fonts

Commercial Fonts free Retro

shared by Inspirationfeed on 08 Jun 10 - Cached
  • Inspirationfeed on 08 Jun 10
     
    Look what we've got for you, an awesome collection of hand picked fonts! These are display styled fonts that should be added to your collection. To download the font just click on it and it will take you to the download page. These fonts are completely free for commercial and personal use, and will
Inspirationfeed

28 Free Fantastic Retro Styled Fonts - 0 views

inspirationfeed.com/...e-fantastic-retro-styled-fonts

Fonts free Retro Styled

shared by Inspirationfeed on 12 May 10 - Cached
  • Inspirationfeed on 12 May 10
     
    We have gathered an awesome collection of free fonts. These are retro styled fonts that must be added to your collection. To download the font just click on it and it will take you to the download page. These fonts are completely free for commercial and personal use, and will look great on any type
Jochen Burkhard

56 Stunning Free Fonts For Professional Designs | DesignBeep - 0 views

designbeep.com/...fonts-for-professional-designs

free fonts downloads Professional design Web Design

shared by Jochen Burkhard on 16 Nov 09 - Cached
  • Jochen Burkhard on 16 Nov 09
     
    Every designer wants to make something different and uses many methods and tools to achieve.You know that fonts are one of the most important part of web projects and we really do need them.As you see,this is my first font post and every week i want to collect amazing fonts and gonna share them with you by selecting from hundreds of fonts.
Jochen Burkhard

30 Free Web 2.0 Fonts You'll Love - 0 views

www.youthedesigner.com/...free-web-2-0-fonts

fonts design font webdesign free

shared by Jochen Burkhard on 03 Jun 10 - Cached
  • Jochen Burkhard on 03 Jun 10
     
    Finding that perfect font can be a real nightmare! Especially, if you're on a budget and can't pay for expensive premium fonts. At You The Designer, we want to enable designers to create art and not spend hours searching for resources online. That's why we put together 30 Awesome &  Free Web 2.0 fonts to help you out.
Jochen Burkhard

Google Font Directory - 0 views

code.google.com/webfonts

fonts google design API typography webfonts webdesign CSS

shared by Jochen Burkhard on 19 May 10 - Cached
  • Jochen Burkhard on 19 May 10
     
    The Google Font Directory lets you browse all the Fonts available via the Google Font API. All Fonts in the directory are available for use on your website under an open source license and served by Google servers.
Luciano Ferrer

Font2Web - Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svg - 1 views

www.font2web.com

typography font-face generator converter

shared by Luciano Ferrer on 26 Oct 11 - No Cached
  • Luciano Ferrer on 26 Oct 11
     
    "This little tool converts any .ttf (TrueType Font) or .otf (OpenType Font) file to .ttf, .otf, .eot, .woff and .svg files. It also creates a CSS file and a demo HTML file to show you how to use it on your website - using CSS @Font-face."
Jochen Burkhard

65 Free Premium Like Mini Pixel Fonts | Graphic and Web Design Blog - 0 views

www.1stwebdesigner.com/...free-premium-pixel-fonts

fonts free Classic Computer

shared by Jochen Burkhard on 05 May 10 - Cached
  • Jochen Burkhard on 05 May 10
     
    This article brings you back to classic values. If you're tired of all those grunge, sleek new fonts, go back and check out these simple pixel fonts. Pixel fonts come in handy, when you need to write really small, solid, easy readable text.
Luciano Ferrer

The @Font-Face Rule and Implementation Tricks - 2 views

www.sendesignz.com/...rule-and-implementation-tricks

html webdesign font-face

shared by Luciano Ferrer on 13 Oct 11 - No Cached
  • Luciano Ferrer on 13 Oct 11
     
    "@font-face method is frees designers from the yoke of the standard palette of "web-safe" system fonts that have been used for many years. Surprisingly, however, this capability has been available in Internet Explorer since 1997. IE4 was the first browser to allow web fonts, but it did so with a proprietary format that prevented other browsers from following suit. Microsoft has since submitted its format to the W3C for consideration as a standard, but now that Firefox, Safari, Chrome, and Opera are all implemented now. So you can consider it pretty safe to use."
ronoet

Top 10 font icons for web designer and developers - Electronthemes - 0 views

www.electronthemes.com/or-web-designer-and-developers

Font Icons

shared by ronoet on 13 Mar 20 - No Cached
  • ronoet on 13 Mar 20
     
    I will tell about some "font icons" and also I will share with you some best and latest font icon with you. font Icons are one of the most main parts of any graphical UI (User interface) and also for web designers, developers.
Jochen Burkhard

30 Top Best Free Fonts From 2010 | Creative Nerds - 0 views

creativenerds.co.uk/...-top-best-free-fonts-from-2010

fonts Free Fonts Free web design webfonts

shared by Jochen Burkhard on 06 Dec 10 - No Cached
  • Jochen Burkhard on 06 Dec 10
     
    "Their was a huge amount of great free fonts released this year, therefore i thought it would on be only wright to do a roundup of the top 30 best fonts released into the design community within 2010. This a great resource and something every designer should check out."
  • Jochen Burkhard on 06 Dec 10
     
    Yum, they are pretty...
Soul Book

A List Apart: Articles: How to Size Text in CSS - 0 views

www.alistapart.com/...howtosizetextincss

reference fonts text font typography layout tutorial blog css webdesign design web tools html webdev

shared by Soul Book on 31 Mar 10 - Cached
  • Soul Book on 31 Mar 10
     
    "When pixels failed before, we turned to ems. Repeating the logic gives us the following styles: body { font-size:100%; line-height:1.125em; /* 16×1.125=18 */ } .bodytext p { font-size:0.875em; } .sidenote { font-size:0.75em; }"
Soul Book

CSS techniques I use all the time - 0 views

www.christianmontoya.com/...-techniques-i-use-all-the-time

blog css tools webdesign typography design fonts text layout web layouts webdev reference code coding

shared by Soul Book on 01 Apr 10 - Cached
  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  • Soul Book on 01 Apr 10
     
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Lyn n

Getting Started with Chrome extension - Diigo help - 0 views

help.diigo.com/...tting-started-chrome-extension

shared by Lyn n on 04 Mar 14 - No Cached
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • ...11 more annotations...
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Getting Started with Chrome extension
  • First Steps: Install Chrome extension
  • signed in, you will be prese
  • a Diigo account, you can
  • option
1 - 20 of 159 Next › Last »
Showing 20▼ items per page