Moving to a System #Font Stack in 2017
▻https://woorkup.com/system-font
With the font-family property with web fonts, you typically have your primary font and one or two fallback fonts. With system fonts, you have to include all of the different operating systems, and therefore you have to stack quite a few more fonts. This is why it is called a “system font stack.”
Davantage d’exemples intéressants (Medium, Github…) dans cet article cité ici : ▻https://seenthis.net/messages/528287
Celui de WP donc :
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
pas stupide, mais en gros ça revient à annuler la fonte par défaut des navigateurs… #idée_pour_firefox :)
The 100 best free #fonts | Creative Bloq
▻http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380
We’ve scoured the web to present you with a fine and varied selection of free fonts. Including scripts, serifs, and a range of ligatures, these fonts will give you greater flexibility in your designs, and add to your arsenal of design tools.
This list represents the 100 best free fonts we’ve found in a variety of styles. We have many other articles covering specialist font types including handwriting fonts, graffiti fonts, web fonts and more, but we have sectioned our main list under these styles:
Google Web Fonts Typographic Project
▻https://femmebot.github.io/google-type
There are over 800 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
ttfautohint
▻http://www.freetype.org/ttfautohint
ttfautohint’s goal is a 99% automated hinting process for web fonts, acting as a platform for finely hand-tuned hinting.
via ▻https://pixelsvsbytes.com/2013/11/how-to-create-perfect-web-fonts-in-3-steps
Disponible dans les options du générateur de #fontsquirrel, ce qui permet d’avoir un bien meilleur rendu sur windows avec certaines typos.
Self-Hosting Google Web #Fonts | Mario Ranftl
▻http://ranf.tl/2014/12/23/self-hosting-google-web-fonts
The effort to host Google web fonts on your own server is immense! (...) I decided to publish a little service called google-webfonts-helper.
The service uses Google’s font API to retrieve a list of all available web fonts and fetches links to the .eot, .woff, .ttf and .svg files by parsing their hosted CSS files (and faking the User-Agent to get them) … creates an archive which can be downloaded
►https://google-webfonts-helper.herokuapp.com/fonts
via @sonntag
Une alternative maintenue par ici ▻https://webfontloader.altmann.de
ref ▻https://github.com/majodev/google-webfonts-helper/issues/98#issuecomment-996543758
A More Modern Scale for Web Typography | Design in the browser with web fonts and real content — Typecast
▻http://typecast.com/blog/a-more-modern-scale-for-web-typography
it’s not just the absolute sizes of your type and spacings that must change as screen sizes shrink; the proportions between them must change as well. So I’ve come up with a responsive relative scale to help you achieve a more readable page regardless of device or resolution.
Home | Design in the browser with web fonts and real content — Typecast
►http://typecast.com
Design in the browser with web fonts and real content. Tags: #webdesign #tool #webfonts
TypeWonder - Beta
▻http://typewonder.com
Helps you to test web fonts on any web site on the fly ! Enter the site url and preview instantly the fonts with-out any hassle !
#typo
Beautiful web type
▻http://hellohappy.org/beautiful-web-type
A showcase of the best typefaces from the Google web #fonts directory.
There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.
Ditching the Shoehorn: Designing #Type That Works on #ePubs, Mobi and the Web | #Design in the browser with web fonts and real content — Typecast
▻http://typecast.com/blog/ditching-the-shoehorn-designing-type-that-works-on-epubs-mobi-and-the-web
Designing typography that works across multiple platforms is no small task. Today, Stewart Curry of Woopie shares what he’s learned in the publishing trenches.
Designing For The Reading Experience | Smashing Magazine
▻http://www.smashingmagazine.com/2013/02/18/designing-reading-experience
With the rise of Web fonts as well as affordable hosted Web font services and ready-made kits, typography is reclaiming its title as design queen, ruler of all graphic and Web design.
Freebie: Extended Entypo Glyph Set (EPS, PDF, PSD, Typeface, Web Font)
►http://www.smashingmagazine.com/2012/11/03/free-glyph-set-entypo-eps-pdf-psd-web-font
After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts.
FTPM - Font Package Manager
►http://heldr.github.com/ftpm
FTPM is a Font helper built on top of Google Web Fonts and Node.js. Allows you to manage system fonts, generate web font files, CSS from Google Web Fonts and CSS using data-uri embeds.
Nouvelle spécification typo CSS3
►http://www.w3.org/TR/css3-fonts
This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules.
font-face Solutions & Suggestions
►http://webdesignerwall.com/general/font-face-solutions-suggestions
So what are the options for implementing web fonts? I’m going to review the three main methods of incorporating #@font-face and explain the pros and cons of each method.
#css3
Google Webfonts V2
Nouvelle interface graphique en test de Google Webfonts
►http://www.google.com/webfonts/v2
Elle est présentée sur leur blog :
“The Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you’ve requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.”
►http://googlewebfonts.blogspot.com/2011/06/new-face-of-google-web-fonts.html
#font-face #typographie #webfonts
Je découvre (avec horreur) que 95% de ces polices ne contiennent pas le œ, ni le Œ, et pas le Ÿ non plus. 25 ans après, on continue donc à subir les conséquences d’ISO 8859-1.
De plus, aucune ne semble contenir le symbole €.
Oui, aucune ne contient le signe euro, pour les autres caractères seules les polices qui ont le jeu Latin Extended les ont (ce qui ne fait pas lourd, et c’est loin d’être les plus chouettes). Typekit’s not dead.
The #Font-Face Rule and Useful Web Font Tricks - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks
Most browsers won’t show any text before all Web fonts are imported. Firefox, however, displays the text using a system font and renders the text again, when the embedded Web fonts are completely loaded. This technique results in a “flash of unstyled text” that sometimes leads to side-effects. Web designers can control this behaviour by using #Google’s Webfont Loader.
Case Study: Getting Hardboiled with #CSS3 2D Transforms « The Typekit Blog
►http://blog.typekit.com/2011/01/25/case-study-getting-hardboiled-with-css3-2d-transforms
This is part of a series of guest posts covering tips and tricks for working with CSS. These techniques, along with web fonts, make rich interactive sites achievable with simple and accessible standards-based markup and CSS. Today’s guest post was written by Andy Clarke, author of Hardboiled Web Design.
In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.
Bringing Web Fonts Closer | Kernest
►http://kernest.com