SlideShare a Scribd company logo
THE TYPE WE WANT
   Fonts on the Web
WHAT DOES TYPOGRAPHY DO?
The Type We Want (MIX10)
The Type We Want (MIX10)

Recommended for you

CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop

The document provides an agenda for a CSS3 workshop that explores new CSS3 selectors and properties. The agenda includes an introduction to CSS3, exploring new features like color opacity, text effects, columns, fonts, shadows, borders and border images. The presentation provides examples and lessons learned for implementing these new CSS3 features across browsers.

cascading stylesheetscsscss3
Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018

The document discusses the Advanced Custom Fields (ACF) WordPress plugin. It begins by introducing ACF and its developer. It then explains that ACF makes creating custom fields easier through an intuitive interface. It notes that ACF allows adding additional information to posts through custom fields like name, address that can be displayed on the website. While custom fields are possible without ACF, it requires more coding. ACF streamlines the process and integrates well with custom post types. Both programmers and non-programmers can benefit from its documentation and user-friendly interface.

wordpressacfwordcamp
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)

This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes exploring new CSS3 selectors, properties, and techniques like opacity, text effects, fonts, shadows, borders, and image masks. The presenter will demonstrate these features in CSS3 and discuss browser support and techniques for making the features cross-browser compatible when possible. Attendees will then have time to experiment with CSS3 examples on their own and review additional resources. The goal is to help attendees include new CSS3 features into their own designs. The workshop covers many emerging and unfinished CSS3 modules being developed by the W3C and implemented gradually by browser vendors.

csscss3webvisions
The Type We Want (MIX10)
The Type We Want (MIX10)
The Type We Want (MIX10)
The Type We Want (MIX10)

Recommended for you

[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover

This document provides an agenda and overview for a presentation on CSS3 features including new selectors, properties, and techniques for cross-browser compatibility. It explores CSS3 modules like color, opacity, text effects, fonts, shadows, borders, and images. The presentation examines properties such as RGBA, text-overflow, text-selection, columns, @font-face, text-shadow, box-shadow, border-image, and techniques for implementing these features across browsers. Lessons are provided on browser support and workarounds for older browsers.

csscss3heweb11
Typography online
Typography onlineTypography online
Typography online

This document discusses typography and web fonts. It provides a brief history of fonts used on the web from 1996 to 2010. It then covers the @font-face rule which allows custom fonts to be used on websites. Both free and paid solutions for using web fonts are presented. Key considerations around web fonts like download size, copyright, and font quality are also outlined. The document concludes with comparisons between different techniques for displaying non-web fonts like sIFR, Cufon, and @font-face.

manchestercss3type
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified

Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.

web designwebfontsweb typography
TYPOGRAPHY HELPS DEFINE…
•    Style
•    Feel
•    Mood
•    Readability
FONT TAG
Ooh, we can make it pretty!
FONT TAG
<font	
  face="Arial"	
  size="3">	
  
	
  	
  I	
  feel	
  pretty.	
  Oh	
  so	
  pretty.	
  
</font>	
  
IMAGES
Any font but at what price?

Recommended for you

Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!

Talk given at the SensioLabs+eZ Roadshow, first stage in Cologne, Germany. Details on the next stages of this roadshow at: http://ez.no/de/Ueber-eZ/Veranstaltungen-Neuigkeiten/Neuigkeiten/Roadshow-eZ-Publish-meets-Symfony

phpcontent management systemssymfony2
Symfony and eZ Publish
Symfony and eZ PublishSymfony and eZ Publish
Symfony and eZ Publish

Version 5 of eZ Publish is now running on Symfony 2 full stack. This talk will recount this fantastic journey, how the heart of a legacy content management engine was reworked, re-architectured, and injected into a Symfony 2 powered HMVC architecture. You will learn how two large technologies merged, what the pitfalls were, how they were overcome, and how these two large communities touched-base and look ahead together.

opensourcephpezpublish
The Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent StorageThe Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent Storage

This document summarizes options for client-side persistent storage on mobile web. Local storage using localStorage has broad support and is recommended. Other options like cookies have size limits, and SQLite requires a SQL API. IndexedDB and the File API are not fully supported. Storage needs vary by platform - iOS and Android have different limits. Frameworks can provide a common API across storage mechanisms. Performance of localStorage is fast for reading and writing. Security considerations apply depending on the storage mechanism used. Overall, client-side storage options are improving and localStorage is generally sufficient.

persistencejsconfstorage
IMAGES
•  Images allows for any font to be used
•  Performance
•  Only practical for limited items with
   short text
•  Abused by clients
•  Printing is less than ideal
•  No text selection
TEXTORIZE
•    Server-based image generation
•    Uses Mac OS X rendering engine
•    Sub-pixel Anti-aliasing
•    Ruby-based
•  http://textorize.org/
CSS FONT STACKS
Flexible design but who gets to see it?
CSS FONT STACKS
#pretty	
  {	
  
	
  	
  font-­‐family:	
  Arial,	
  Helvetica,	
  
      sans-­‐serif;	
  
}	
  
#prettier	
  {	
  
	
  	
  font-­‐family:	
  "Gotham	
  Medium",	
  
      sans-­‐serif;	
  
}	
  

Recommended for you

ExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link BuildingExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link Building

The document discusses strategies for creating high-quality content to build links and increase website visibility. It recommends defining a topic, researching competitors, using proper grammar, emphasizing key terms, adding relevant images and videos, and segmenting content with hashtags. The document also provides tips for finding opportunities to gain links through guest posts, comments, forums, question-and-answer sites, and presentations. The goal is to meet user needs with useful content and find visibility opportunities to attract important links.

expon 2011cassianolink building
Notes, domino and the single sign on soup
Notes, domino and the single sign on soupNotes, domino and the single sign on soup
Notes, domino and the single sign on soup

This document discusses various approaches to implementing single sign-on (SSO) with IBM Notes and Domino. It describes offload, synchronization, and integration approaches and provides examples of each. Specifically, it covers Notes Shared Login (NSL), synchronization using Tivoli Directory Integrator (TDI), Security Protocol for Next Generation Networks (SPNEGO), and Security Assertion Markup Language (SAML)/Notes Federated Logon (NFL). It emphasizes that a common user ID between the identity source and Domino is required and provides tips for setting up the Notes client with SSO.

samlibm dominoibm notes
Web to App:作業系統革命 Firefox OS
Web to App:作業系統革命  Firefox OSWeb to App:作業系統革命  Firefox OS
Web to App:作業系統革命 Firefox OS

This document discusses Firefox OS, a web-based operating system developed by Mozilla. It begins by introducing the speaker, Veck Hsiao, a postgraduate student at NCCU studying system programming and programming languages who contributes to Firefox OS. The document then discusses key topics like how Firefox OS uses web technologies like HTML, CSS, and JavaScript to function as an operating system. It describes components of Firefox OS like Gaia, Gecko, and Gonk. It outlines reasons for using Firefox OS like mobility, cross-platform capabilities, being open source, and using web standards. It provides information on how to test and contribute to Firefox OS through Bugzilla and GitHub. It also describes the Firefox OS Tablet Contribution Program

firefoxos
OOPS!
<p	
  class="bodytext">I	
  want	
  to	
  look	
  
  pretty</p>	
  
<p	
  class="bodytext">I	
  want	
  to	
  feel	
  
  pretty</p>	
  
<p	
  class="bodytext">I	
  want	
  to	
  be	
  
  pretty</p>	
  
COMMON FONT STACKS
•    Arial, Helvetica, sans-serif
•    Courier New, Courier, monospace
•    Times New Roman, Times, serif
•    Georgia, Times New Roman, Times, serif
•    Verdana, Arial, Helvetica, sans-serif
•    Geneva, Arial, Helvetica, sans-serif
COMPLEX FONT STACKS
"Segoe UI", Candara, "Bitstream Vera Sans",
  "DejaVu Sans", "Bitstream Vera Sans",
  "Trebuchet MS", Verdana, "Verdana Ref",
  sans-serif
COMPLEX FONT STACK
•  Better Font Stacks
 http://unitinteractive.com/blog/2008/06/26/better-
 css-font-stacks/
•  8 Definitive Web Font Stacks
 http://articles.sitepoint.com/article/eight-definitive-
 font-stacks

Recommended for you

Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development

The document discusses strategies for developing mobile web applications for smartphones like iPhone and Android, focusing on technologies like HTML5, CSS3, and JavaScript that enable responsive design and native-like experiences. It also covers tools and frameworks for building cross-platform mobile apps, such as PhoneGap and Titanium, as well as strategies for optimizing content delivery and the user experience for less capable mobile devices.

mobile
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks

From Web Directions North 2008, Jonathan Snook compares some of the leading JavaScript Frameworks out there.

Presentation on Presentations
Presentation on PresentationsPresentation on Presentations
Presentation on Presentations

This document provides tips for giving presentations. It suggests focusing a presentation on defining a problem and telling a story to engage the audience. The tips include using different types of slides like bullets and code to highlight important information, injecting humor with pictures, speaking slowly, and being prepared to answer questions. Presenters are advised to not reveal all details at once and to take breaks between slides to keep the audience interested.

presentation
SIFR, CUFÓN, TYPEFACE
  Now we’re getting somewhere
SIFR
•    requires JavaScript AND Flash
•    Slow for a lot of elements
•    Best used for headlines
•    Can be difficult to tweak
•    Support for CSS features is limited
CUFÓN
•  Generates SVG font and VML outlines
•  Draws to <canvas> in all browsers that
   support it (ie: not IE)
•  No text selection
•  Original text is made invisible
•  Supports some CSS Styling (more than
   sIFR)
TYPEFACE.JS
•  Similar to Cufón
•  Includes letter-spacing and font-stretch

Recommended for you

Building On The Shoulders
Building On The ShouldersBuilding On The Shoulders
Building On The Shoulders

The document discusses building on existing tools, frameworks, platforms and ideas rather than reinventing the wheel. It lists examples of existing tools and frameworks in various categories like JavaScript, CSS, programming languages and platforms that can be leveraged to build new applications and speed up development. The benefits mentioned are that existing solutions are well-tested, development can be faster, and new ideas can solve problems outside the original solutions.

RIAs
RIAsRIAs
RIAs

This session will take a look at two prominent desktop platforms, AIR and Titanium, and examine some of the pros and cons of developing with that environment. We'll also take a look at ways to speed up development using rich components like jQuery UI and take advantage of the features of HTML5 and CSS3 that can be used right away.

titaniumcss3adobeair
Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017

by Benedict Evans. Please see this link for full description, slides, AND version with talk track: http://a16z.com/2016/12/09/mobile-is-eating-the-world-outlook-2017/

 
by a16z
machine learningtrendsinnovation
LICENSING
•  Most licenses aren’t very clear and should
   be clarified with foundry
•  Many fonts don’t allow embedding in this
   fashion
@FONT-FACE
Have we reached utopia?
The Type We Want (MIX10)
The Type We Want (MIX10)

Recommended for you

Go-to-Market Best Practices for Startups
Go-to-Market Best Practices for StartupsGo-to-Market Best Practices for Startups
Go-to-Market Best Practices for Startups

Looking to scale something up? Depending on how you're going after your market/ acquiring users, you may need to build a sales organization that's optimized for a top-down or bottom-up sales process (or perhaps both). Watch the video overview at http://a16z.com/2015/03/06/go-to-market-bootcamp/ and then check out this slide deck, which shares some concrete tips and tools for accelerating time to market -- from the go-to-market experts at a16z, led by 'sales savant' Mark Cranney. Because selling to enterprises is a lot like getting a bill passed through Congress: it can get stuck. And getting stuck -- or going down the wrong path -- can mean death to startups in a competitive market. Here's how to avoid that.

 
by a16z
demand generationfield salestime to market
Software is Eating Bio
Software is Eating BioSoftware is Eating Bio
Software is Eating Bio

Bio in 2015 is like software in 2005. The bio fund is really about funding software companies in the bio space.

 
by a16z
healthcaresoftwarebiology
Go to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companiesGo to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companies

Get in touch: guillaume@lajavaness.com A short presentation outlining the main customer targeting strategies a B2B SaaS startup might decide to use.

saaspricingstartups
The Type We Want (MIX10)
The Type We Want (MIX10)
The Type We Want (MIX10)
The Type We Want (MIX10)

Recommended for you

Network Effects
Network EffectsNetwork Effects
Network Effects

Network effects. It’s one of the most important concepts for business in general and especially for tech businesses, as it’s the key dynamic behind many successful software-based companies. Understanding network effects not only helps build better products, but it helps build moats and protect software companies against competitors’ eating away at their margins. Yet what IS a network effect? How do we untangle the nuances of 'network effects' with 'marketplaces' and 'platforms'? What’s the difference between network effects, virality, supply-side economies of scale? And how do we know a company has network effects? Most importantly, what questions can entrepreneurs and product managers ask to counter the wishful thinking and sometimes faulty assumption behind the belief that “if we build it, they will come” … and instead go about more deterministically creating network effects in their business? Because it's not a winner-take-all market by accident.

 
by a16z
moatsplatformsvirality
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)

In this update of his past presentations on Mobile Eating the World -- delivered most recently at The Guardian's Changing Media Summit -- a16z’s Benedict Evans takes us through how technology is universal through mobile. How mobile is not a subset of the internet anymore. And how mobile (and accompanying trends of cloud and AI) is also driving new productivity tools. In fact, mobile -- which encompasses everything from drones to cars -- is everything.

 
by a16z
dronesmobile is eating the worldautonomous cars
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts

We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use. (This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)

parenttoolboxcsstypography
ADVANTAGES
•    Dynamic
•    Style with the full extent of CSS
•    Can work on mobile platforms
•    Print Quality
TRUETYPE (TTF) & OPENTYPE (OTF)
•  Firefox 3.5+, Safari 3+, Opera 10+
•  Including Opera Mobile
•  In Chrome 4
EMBEDDABLE OPENTYPE (EOT)
•  Support in IE4+
•  TTF2EOT
  –  Command line
  –  Web services exist to make this conversion
•  WEFT
  –  Complete and utter garbage
OTF       TTF      EOT
•  EOT apps require TTF but most fonts
   today are OTF.
•  FontForge will convert OTF to TTF
•  Font names aren’t transferred and must be
   set manually to allow TTF to EOT process
   to work reliably.
 http://snook.ca/archives/html_and_css/screencast-
 converting-ttf2eot

Recommended for you

Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedWeb Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated

Thomas Phinney introduces web fonts, covers font selection and combination, and also includes: • How and why mobile devices and iOS have killed off web safe fonts • Best practices for picking and combining individual typefaces • On-screen text rendering differences • Creative inspiration for designing with web fonts in Adobe® Photoshop®

web designweb fontsweb typography
Web fonts
Web fontsWeb fonts
Web fonts

This document discusses web fonts, including the business drivers for using them, the supporting technologies, distribution mechanisms and licensing options, performance impacts, useful tools, and best practices. It notes that web fonts allow approved typefaces from companies and are brought in as an opt-in feature. While the <font-face> CSS feature has existed since IE4, different formats like TTF, OTF, EOT, WOFF and SVG require support. Distribution includes hosting on websites, CDNs, or third-party services, while licensing models include commercial and free options. Performance impacts include additional HTTP requests, blocking rendering, and perceived slowness. Tools aid optimization, subsetting, and conversion between formats. Caching, compression,

fontweb font
SilverlightDevIntro
SilverlightDevIntroSilverlightDevIntro
SilverlightDevIntro

Microsoft Silverlight is a cross-browser plugin that allows developers to build rich interactive applications and media experiences for the web. Key features include vector graphics, media playback, animation, and integration with existing web pages. Silverlight uses XAML for markup and a .NET subset for programming. It provides a sandboxed runtime environment and supports common development scenarios like media, rich content, and rich internet applications. Developers can use XAML to build user interfaces with shapes, brushes, text and images, and add interactivity through transforms and animation.

SVG FONTS
•  Chrome 0.3+ support with no need for a
   command line flag
•  Works on iPhone OS3.1+
•  Opera bug doesn’t show embedded font
   on second tab
•  Text selection works but not consistently
CREATING SVG FONTS
•  FontForge
•  Batik
  –  SVG may need to be cleaned up to remove
     extraneous data (empty nodes and
     attributes)
WEB OPEN FONT FORMAT (WOFF)
•  in Firefox 3.6
•  Supported by major font foundries
•  IE9?
CREATING WOFF FILES
•  Command line tool: sfnt2woff
•  Mac or Windows
 http://people.mozilla.com/~jkew/woff/

Recommended for you

Geek basics
Geek basicsGeek basics
Geek basics

An alphabetical tour of digital media landscape terminology, covering concepts from Ajax to Usability. Designed for training of journalists entering the digital media landscape.

dictionarygeekweb
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop

Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites. In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns. In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.

htmlweb sitesweb design
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich

When designers and developers collaborate, it creates a strong foundation for projects. Choosing fonts requires understanding web safe fonts, image replacement techniques, trends from services like Google Fonts, and keeping designs flexible for variable content. Thorough testing across browsers and devices is important, and teams should share knowledge to overcome common roadblocks like over-reliance on JavaScript fixes or lack of accessibility.

BULLETPROOF @FONT-FACE
@font-­‐face	
  {	
  
	
  	
  font-­‐family:	
  'MuseoCustom';	
  
	
  	
  src:	
  url('MuseoSans-­‐500.eot');	
  
	
  	
  src:	
  local('Museo	
  Sans	
  500'),	
  	
  
	
  	
  	
  	
  	
  	
  	
  local('MuseoSans-­‐500'),	
  	
  
	
  	
  	
  	
  	
  	
  	
  url('museo.woff')	
  format('woff'),	
  
	
  	
  	
  	
  	
  	
  	
  url('MuseoSans-­‐500.ttf')	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  format('opentype'),	
  
	
  	
  	
  	
  	
  	
  	
  url('museo.svg#museo')	
  format
       ('svg');	
  
}	
  
FONT SQUIRREL
•    one step conversion process
•    Upload TTF or OTF
•    Provides EOT, SVG and WOFF format
•    Creates example HTML and CSS
•    Supports Cufón fallback
•    Does subsetting
PERFORMANCE
SUBSETTING
•  Font files can be megabytes in size
•  Arial Unicode MS is 23MB
•  Many fonts are still 100K+

Recommended for you

Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts

Web fonts offer great flexibility for brands and designers to use a wider range of fonts online. Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.

web designdigital brandingweb fonts
The state of web typography
The state of web typographyThe state of web typography
The state of web typography

In the beginning, web designers only had a handful of typefaces at their disposal to use in their designs. Then Flash and Javascript allowed unlimited fonts but lacked accessibility features. In the past year, it seems we finally have a winning solution: the @font-face method which has support from all major browsers and does so using only HTML and CSS. Meanwhile, a second conversation is happening amongst those who actually own the fonts – the foundries. Would these emerging technologies ensure that their typefaces could not be easily copied from the web? Unfortunately @font-face is still not widely accepted by most foundries. Some allow you to use a hosted service like TypeKit, or you can venture into the burgeoning movement of open source and commercial-free fonts and enjoy free rein over your web typography.

webfontstypographytype
What the @font-face
What the @font-faceWhat the @font-face
What the @font-face

The document discusses the @font-face CSS rule, which allows embedding fonts through CSS rather than relying on users' installed fonts. It provides examples of how to implement @font-face and addresses issues like the "flash of unstyled text" that can occur as embedded fonts load. Tips are given for fighting this, such as placing CSS at the top, using font formats like WOFF, and subset fonts to reduce file size. Browser differences and fixes for issues like font rendering in IE are also covered.

web designweb developmentfont-face
SUBSETTING
•  Subsetting reduces the number of glyphs
   in the file
•  great for latin languages
•  not so great for asian languages
The Type We Want (MIX10)
SUBSETTING PROBLEMS
•  Be careful removing lower case glyphs if
   using upper case
•  IE and Opera have a bug with text-
   transform: uppercase that will use
   fallback font instead of subsetted font
COMPRESSION
•  EOT and WOFF support compression
•  WEFT compresses by default, TTF2EOT
   doesn’t
•  Use GZIP compression where font isn’t
   already compressed
  –  uncompressed EOT
  –  TTF, OTF, and SVG

Recommended for you

Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014

This document discusses typography on the web. It provides an overview of the history of embedding fonts online through technologies like @font-face, and formats like EOT, TTF, OTF and WOFF. It also discusses OpenType features that allow for rich typography effects through CSS, though browser support is still limited. The document advocates optimizing typography to improve readability and the user experience of reading on the web.

 
by Me
designtypographyfont-face
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You

Presented at MinneWebCon 2011 Web typography is making the internet look better than ever before. You're particular about the fonts you choose in other mediums, don't settle for anything less for your online projects. This session will address the basics of effective typography and techniques that everyone can apply right away to harness the power of web typography on their website or blog.

myklroventineminnewebconwebfonts
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)

This talk discusses standards evolution, HTML5 and CSS3 in detail. Starting with the history of HTML and CSS, it goes on to show how HTML5 and CSS3 were developed, why they were necessary, the problems they aim to solve, what the main new features are and why they are so useful, and how we can start using these features in the real world, right now. It also provides advice for the discerning web standards gentleman.

whatwgdoctypetransitions
FLASH OF UNSTYLED TEXT
•  Firefox, Opera shows unstyled text until
   font downloaded (FOUT!)
•  Blocking in IE if <script> before @font-
   face declaration; otherwise, unstyled
   until font downloaded
FLASH OF UNSTYLED TEXT
•  Safari, Chrome show no text until font
   downloaded
•  Opera 10.10 doesn’t show the
   embedded font after the first page
BIGGEST HURDLE IS STILL LICENSING
LICENSING
•  Most fonts, even some free fonts, DON’T
   allow @font-face embedding
•  Foundries that support WOFF haven’t
   provided updated licenses yet
•  Contact them directly for more info

Recommended for you

Week3 office hours
Week3 office hoursWeek3 office hours
Week3 office hours

- There are 4 weeks left in the course, with milestones on September 24th, October 1st, and October 8th, and all badges awarded by October 15th. Students are encouraged to finish HTML5 Core this weekend and knock out CSS by September 24th. - When creating a single webpage, the main parts include the HTML file, CSS stylesheet, images, and other media files. All parts need to be uploaded to the website when posting the page. - Browser developer tools like the Web Developer toolbar for Firefox and Chrome, and Firebug for Firefox, can help with webpage development and troubleshooting.

Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3

HTML is the main markup language used to create web pages and other information displayed in web browsers. It has evolved over time from HTML in 1990 to newer specifications like HTML5, with HTML5 expected to be finalized by 2016. CSS is used to describe the presentation and formatting of HTML documents, and has also evolved from CSS1 to the current CSS3 specification, which is divided into modules that add new capabilities without breaking compatibility. Together, HTML and CSS provide a common application platform for building websites and web apps that can be viewed across devices like desktops, tablets, and mobile phones.

html5 - css3
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich

Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page! How to utilize web fonts and icon fonts within your projects How icon fonts can help your site performance Tools for crafting an efficient type system on the web

web design and developmentweb fontsweb design
SOLVING THESE PROBLEMS
FONT EMBEDDING SERVICES
•    TypeKit
•    Typotheque
•    Kernest
•    FontDeck
•    FontSpring
DISADVANTAGES TO SERVICES
•  If the server goes down, does your
   design have a suitable fallback?
•  Some services require JavaScript
•  None of the services serve SVG
•  Services obfuscate to prevent ability to
   install font permanently
•  Not cached
RESOURCES
•  FontForge
  http://fontforge.sourceforge.net/
•  Batik
  http://xmlgraphics.apache.org/batik/tools/font-
  converter.html
•  FontSquirrel Generator
  http://www.fontsquirrel.com/fontface/generator

Recommended for you

CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design

Talk given at DevCon 5 in Santa Clara: The power of the web has arrived for mobile phones and tablets. CSS3 gives web sites a dynamic, interactive capability and greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.

css3animationjavascript
Extensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions PortlandExtensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions Portland

This document summarizes a workshop on web typography presented by Jim Kidwell and Thomas Phinney. It begins with biographies of the presenters and an agenda for the workshop. The first section provides a history of web fonts, starting with the limited "web safe" fonts of the early internet and the introduction of technologies like @font-face, EOT, and WOFF that enabled the use of true type fonts on the web. Subsequent sections discuss best practices for choosing, setting, and using web fonts, including topics like font licensing, legibility, pairing different fonts, and CSS features. The document provides an overview of the workshop's content and discussions.

web designweb fontswebvisions
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA

The document discusses the characteristics of a successful single page application (SPA). It recommends choosing frameworks and libraries that have good documentation, large communities, and support needed functionality. It also emphasizes building robust, stable APIs and keeping performance in mind from the start. The document suggests optimizing JavaScript and backend code, knowing the runtime environment, and using developer tools to minimize resource-intensive reflows and repaints. Overall, it presents SPAs as a good option for mobile apps if frameworks, libraries, APIs, and performance are chosen and developed carefully.

spajavascriptsingle page applications
WHERE TO GET FONTS
•  FontSquirrel
 http://www.fontsquirrel.com/
•  TypeKit
 http://typekit.com/
•  Typotheque
 http://www.typotheque.com/
•  FontSpring
 http://www.fontspring.com/
•  Kernest
 http://www.kernest.com/
QUESTIONS?

More Related Content

What's hot

Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
brinsknaps
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
Four Kitchens
 
Responsive Web Fonts
Responsive Web FontsResponsive Web Fonts
Responsive Web Fonts
Richard Rutter
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
Christopher Schmitt
 
Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Jesse Velez
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
Christopher Schmitt
 
Typography online
Typography onlineTypography online
Typography online
Jake Smith
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified
Mel Choyce
 
Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!
Nicolas Pastorino
 
Symfony and eZ Publish
Symfony and eZ PublishSymfony and eZ Publish
Symfony and eZ Publish
Jérôme Vieilledent
 
The Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent StorageThe Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent Storage
Jens Arps
 
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link BuildingExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
DOGSCAMP Summit
 
Notes, domino and the single sign on soup
Notes, domino and the single sign on soupNotes, domino and the single sign on soup
Notes, domino and the single sign on soup
Darren Duke
 
Web to App:作業系統革命 Firefox OS
Web to App:作業系統革命  Firefox OSWeb to App:作業系統革命  Firefox OS
Web to App:作業系統革命 Firefox OS
Veck Hsiao
 

What's hot (15)

Web Font Replacement
Web Font ReplacementWeb Font Replacement
Web Font Replacement
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
Responsive Web Fonts
Responsive Web FontsResponsive Web Fonts
Responsive Web Fonts
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018Advanced Custom Fields Lightning Talk WordCamp Miami 2018
Advanced Custom Fields Lightning Talk WordCamp Miami 2018
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
Typography online
Typography onlineTypography online
Typography online
 
Webfonts: Demystified
Webfonts: DemystifiedWebfonts: Demystified
Webfonts: Demystified
 
Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!Symfony and eZ Publish: boarding now!
Symfony and eZ Publish: boarding now!
 
Symfony and eZ Publish
Symfony and eZ PublishSymfony and eZ Publish
Symfony and eZ Publish
 
The Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent StorageThe Hitchhikers Guide to client Side Persistent Storage
The Hitchhikers Guide to client Side Persistent Storage
 
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link BuildingExpOn 2011 - Cassiano Travareli - A Base para Link Building
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
 
Notes, domino and the single sign on soup
Notes, domino and the single sign on soupNotes, domino and the single sign on soup
Notes, domino and the single sign on soup
 
Web to App:作業系統革命 Firefox OS
Web to App:作業系統革命  Firefox OSWeb to App:作業系統革命  Firefox OS
Web to App:作業系統革命 Firefox OS
 

Viewers also liked

Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
Jonathan Snook
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
 
Presentation on Presentations
Presentation on PresentationsPresentation on Presentations
Presentation on Presentations
Jonathan Snook
 
Building On The Shoulders
Building On The ShouldersBuilding On The Shoulders
Building On The Shoulders
Jonathan Snook
 
RIAs
RIAsRIAs
Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017
a16z
 
Go-to-Market Best Practices for Startups
Go-to-Market Best Practices for StartupsGo-to-Market Best Practices for Startups
Go-to-Market Best Practices for Startups
a16z
 
Software is Eating Bio
Software is Eating BioSoftware is Eating Bio
Software is Eating Bio
a16z
 
Go to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companiesGo to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companies
Guillaume Lerouge
 
Network Effects
Network EffectsNetwork Effects
Network Effects
a16z
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
a16z
 

Viewers also liked (11)

Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
 
Presentation on Presentations
Presentation on PresentationsPresentation on Presentations
Presentation on Presentations
 
Building On The Shoulders
Building On The ShouldersBuilding On The Shoulders
Building On The Shoulders
 
RIAs
RIAsRIAs
RIAs
 
Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017Mobile Is Eating the World, 2016-2017
Mobile Is Eating the World, 2016-2017
 
Go-to-Market Best Practices for Startups
Go-to-Market Best Practices for StartupsGo-to-Market Best Practices for Startups
Go-to-Market Best Practices for Startups
 
Software is Eating Bio
Software is Eating BioSoftware is Eating Bio
Software is Eating Bio
 
Go to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companiesGo to-market strategy for B2B SaaS companies
Go to-market strategy for B2B SaaS companies
 
Network Effects
Network EffectsNetwork Effects
Network Effects
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
 

Similar to The Type We Want (MIX10)

CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
Yves Van Goethem
 
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedWeb Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Extensis
 
Web fonts
Web fontsWeb fonts
Web fonts
Varun Grover
 
SilverlightDevIntro
SilverlightDevIntroSilverlightDevIntro
SilverlightDevIntro
Pratik Aggarwal
 
Geek basics
Geek basicsGeek basics
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
Jenn Lukas
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
Prototype Interactive
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
Four Kitchens
 
What the @font-face
What the @font-faceWhat the @font-face
What the @font-face
Gene Crawford
 
Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014
Me
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
Mykl Roventine
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills
 
Week3 office hours
Week3 office hoursWeek3 office hours
Week3 office hours
Randall Rode
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
g4gauravagarwal
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
Jenn Lukas
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
paultrani
 
Extensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions PortlandExtensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions Portland
Extensis
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA
Gil Fink
 
Architecting a Futuristic MODX Manager with HTML5
Architecting a Futuristic MODX Manager with HTML5Architecting a Futuristic MODX Manager with HTML5
Architecting a Futuristic MODX Manager with HTML5
Jp DeVries
 

Similar to The Type We Want (MIX10) (20)

CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedWeb Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
 
Web fonts
Web fontsWeb fonts
Web fonts
 
SilverlightDevIntro
SilverlightDevIntroSilverlightDevIntro
SilverlightDevIntro
 
Geek basics
Geek basicsGeek basics
Geek basics
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
 
SmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers AmpersandwichSmashingConf Whister: Developers Ampersandwich
SmashingConf Whister: Developers Ampersandwich
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
What the @font-face
What the @font-faceWhat the @font-face
What the @font-face
 
Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014Typography and user experience - UX Craft 2014
Typography and user experience - UX Craft 2014
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Week3 office hours
Week3 office hoursWeek3 office hours
Week3 office hours
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Successful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's AmpersandwichSuccessful Web Typography - The Developer's Ampersandwich
Successful Web Typography - The Developer's Ampersandwich
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
Extensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions PortlandExtensis Web Typography Workshop | WebVisions Portland
Extensis Web Typography Workshop | WebVisions Portland
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA
 
Architecting a Futuristic MODX Manager with HTML5
Architecting a Futuristic MODX Manager with HTML5Architecting a Futuristic MODX Manager with HTML5
Architecting a Futuristic MODX Manager with HTML5
 

Recently uploaded

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 

Recently uploaded (20)

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 

The Type We Want (MIX10)

  • 1. THE TYPE WE WANT Fonts on the Web
  • 9. TYPOGRAPHY HELPS DEFINE… •  Style •  Feel •  Mood •  Readability
  • 10. FONT TAG Ooh, we can make it pretty!
  • 11. FONT TAG <font  face="Arial"  size="3">      I  feel  pretty.  Oh  so  pretty.   </font>  
  • 12. IMAGES Any font but at what price?
  • 13. IMAGES •  Images allows for any font to be used •  Performance •  Only practical for limited items with short text •  Abused by clients •  Printing is less than ideal •  No text selection
  • 14. TEXTORIZE •  Server-based image generation •  Uses Mac OS X rendering engine •  Sub-pixel Anti-aliasing •  Ruby-based •  http://textorize.org/
  • 15. CSS FONT STACKS Flexible design but who gets to see it?
  • 16. CSS FONT STACKS #pretty  {      font-­‐family:  Arial,  Helvetica,   sans-­‐serif;   }   #prettier  {      font-­‐family:  "Gotham  Medium",   sans-­‐serif;   }  
  • 17. OOPS! <p  class="bodytext">I  want  to  look   pretty</p>   <p  class="bodytext">I  want  to  feel   pretty</p>   <p  class="bodytext">I  want  to  be   pretty</p>  
  • 18. COMMON FONT STACKS •  Arial, Helvetica, sans-serif •  Courier New, Courier, monospace •  Times New Roman, Times, serif •  Georgia, Times New Roman, Times, serif •  Verdana, Arial, Helvetica, sans-serif •  Geneva, Arial, Helvetica, sans-serif
  • 19. COMPLEX FONT STACKS "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif
  • 20. COMPLEX FONT STACK •  Better Font Stacks http://unitinteractive.com/blog/2008/06/26/better- css-font-stacks/ •  8 Definitive Web Font Stacks http://articles.sitepoint.com/article/eight-definitive- font-stacks
  • 21. SIFR, CUFÓN, TYPEFACE Now we’re getting somewhere
  • 22. SIFR •  requires JavaScript AND Flash •  Slow for a lot of elements •  Best used for headlines •  Can be difficult to tweak •  Support for CSS features is limited
  • 23. CUFÓN •  Generates SVG font and VML outlines •  Draws to <canvas> in all browsers that support it (ie: not IE) •  No text selection •  Original text is made invisible •  Supports some CSS Styling (more than sIFR)
  • 24. TYPEFACE.JS •  Similar to Cufón •  Includes letter-spacing and font-stretch
  • 25. LICENSING •  Most licenses aren’t very clear and should be clarified with foundry •  Many fonts don’t allow embedding in this fashion
  • 33. ADVANTAGES •  Dynamic •  Style with the full extent of CSS •  Can work on mobile platforms •  Print Quality
  • 34. TRUETYPE (TTF) & OPENTYPE (OTF) •  Firefox 3.5+, Safari 3+, Opera 10+ •  Including Opera Mobile •  In Chrome 4
  • 35. EMBEDDABLE OPENTYPE (EOT) •  Support in IE4+ •  TTF2EOT –  Command line –  Web services exist to make this conversion •  WEFT –  Complete and utter garbage
  • 36. OTF TTF EOT •  EOT apps require TTF but most fonts today are OTF. •  FontForge will convert OTF to TTF •  Font names aren’t transferred and must be set manually to allow TTF to EOT process to work reliably. http://snook.ca/archives/html_and_css/screencast- converting-ttf2eot
  • 37. SVG FONTS •  Chrome 0.3+ support with no need for a command line flag •  Works on iPhone OS3.1+ •  Opera bug doesn’t show embedded font on second tab •  Text selection works but not consistently
  • 38. CREATING SVG FONTS •  FontForge •  Batik –  SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)
  • 39. WEB OPEN FONT FORMAT (WOFF) •  in Firefox 3.6 •  Supported by major font foundries •  IE9?
  • 40. CREATING WOFF FILES •  Command line tool: sfnt2woff •  Mac or Windows http://people.mozilla.com/~jkew/woff/
  • 41. BULLETPROOF @FONT-FACE @font-­‐face  {      font-­‐family:  'MuseoCustom';      src:  url('MuseoSans-­‐500.eot');      src:  local('Museo  Sans  500'),                  local('MuseoSans-­‐500'),                  url('museo.woff')  format('woff'),                url('MuseoSans-­‐500.ttf')                        format('opentype'),                url('museo.svg#museo')  format ('svg');   }  
  • 42. FONT SQUIRREL •  one step conversion process •  Upload TTF or OTF •  Provides EOT, SVG and WOFF format •  Creates example HTML and CSS •  Supports Cufón fallback •  Does subsetting
  • 44. SUBSETTING •  Font files can be megabytes in size •  Arial Unicode MS is 23MB •  Many fonts are still 100K+
  • 45. SUBSETTING •  Subsetting reduces the number of glyphs in the file •  great for latin languages •  not so great for asian languages
  • 47. SUBSETTING PROBLEMS •  Be careful removing lower case glyphs if using upper case •  IE and Opera have a bug with text- transform: uppercase that will use fallback font instead of subsetted font
  • 48. COMPRESSION •  EOT and WOFF support compression •  WEFT compresses by default, TTF2EOT doesn’t •  Use GZIP compression where font isn’t already compressed –  uncompressed EOT –  TTF, OTF, and SVG
  • 49. FLASH OF UNSTYLED TEXT •  Firefox, Opera shows unstyled text until font downloaded (FOUT!) •  Blocking in IE if <script> before @font- face declaration; otherwise, unstyled until font downloaded
  • 50. FLASH OF UNSTYLED TEXT •  Safari, Chrome show no text until font downloaded •  Opera 10.10 doesn’t show the embedded font after the first page
  • 51. BIGGEST HURDLE IS STILL LICENSING
  • 52. LICENSING •  Most fonts, even some free fonts, DON’T allow @font-face embedding •  Foundries that support WOFF haven’t provided updated licenses yet •  Contact them directly for more info
  • 54. FONT EMBEDDING SERVICES •  TypeKit •  Typotheque •  Kernest •  FontDeck •  FontSpring
  • 55. DISADVANTAGES TO SERVICES •  If the server goes down, does your design have a suitable fallback? •  Some services require JavaScript •  None of the services serve SVG •  Services obfuscate to prevent ability to install font permanently •  Not cached
  • 56. RESOURCES •  FontForge http://fontforge.sourceforge.net/ •  Batik http://xmlgraphics.apache.org/batik/tools/font- converter.html •  FontSquirrel Generator http://www.fontsquirrel.com/fontface/generator
  • 57. WHERE TO GET FONTS •  FontSquirrel http://www.fontsquirrel.com/ •  TypeKit http://typekit.com/ •  Typotheque http://www.typotheque.com/ •  FontSpring http://www.fontspring.com/ •  Kernest http://www.kernest.com/