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.
A very brief look at where certain aspects of typography on the web are today — specifically, methods for replacing OS defaults with other typefaces.
The slides are guides used for a quick (15-20 minute) talk at Refresh Lauderdale, rather than informational, with the exception of the references section at the end, which includes many great resources for typography in general, as well as for setting type on the web in all forms.
Web Typography Fundamentals: From Gutenberg to Google v1billcenglish
The document discusses web typography fundamentals, including a history of typography, definitions of typographical terms, techniques for using contrast and hierarchy to improve readability, and guidelines for legible and accessible web typography. It covers topics like font selection, font stacks, methods for embedding non-web fonts like @font-face, and techniques for optimizing text on the web.
2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.
SEO Crash Course - Go from White Belt to Ninja in Search OptimizationPercussion Software
The document outlines an SEO webinar agenda covering on-page optimization techniques ranging from basic white belt topics like optimizing title tags, meta descriptions and image alt text, to more advanced brown belt topics like schema markup implementation and site speed optimization. The on-page optimization section begins with introductory white belt material and progresses to intermediate brown belt level content before concluding with an advanced black belt discussion of site speed.
Taskey is a startup company that provides expertise in HTML, CSS, JavaScript, Ruby, and Node. They specialize in front-end technologies like HTML, CSS preprocessors like Sass, modern JavaScript features in ES2015, and frameworks like React. The document provides an overview of these front-end skills and tools, including brief descriptions and examples to demonstrate how they work.
The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard.
Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.
Dont you just love the latest design trends and techniques? Want to apply them to WordPress using great technique? Or do you just need some inspiration? Come to “Design Swoon” where we will not only look at some of the best design on the web but also parse down technique of implementation with CSS3, HTML5, & WordPress. A designers must-see.
A very brief look at where certain aspects of typography on the web are today — specifically, methods for replacing OS defaults with other typefaces.
The slides are guides used for a quick (15-20 minute) talk at Refresh Lauderdale, rather than informational, with the exception of the references section at the end, which includes many great resources for typography in general, as well as for setting type on the web in all forms.
Web Typography Fundamentals: From Gutenberg to Google v1billcenglish
The document discusses web typography fundamentals, including a history of typography, definitions of typographical terms, techniques for using contrast and hierarchy to improve readability, and guidelines for legible and accessible web typography. It covers topics like font selection, font stacks, methods for embedding non-web fonts like @font-face, and techniques for optimizing text on the web.
2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.
SEO Crash Course - Go from White Belt to Ninja in Search OptimizationPercussion Software
The document outlines an SEO webinar agenda covering on-page optimization techniques ranging from basic white belt topics like optimizing title tags, meta descriptions and image alt text, to more advanced brown belt topics like schema markup implementation and site speed optimization. The on-page optimization section begins with introductory white belt material and progresses to intermediate brown belt level content before concluding with an advanced black belt discussion of site speed.
Taskey is a startup company that provides expertise in HTML, CSS, JavaScript, Ruby, and Node. They specialize in front-end technologies like HTML, CSS preprocessors like Sass, modern JavaScript features in ES2015, and frameworks like React. The document provides an overview of these front-end skills and tools, including brief descriptions and examples to demonstrate how they work.
The fifth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. A new section has been added focusing on webfonts (font linking and embedding) with the recent developments in that regard.
Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.
Dont you just love the latest design trends and techniques? Want to apply them to WordPress using great technique? Or do you just need some inspiration? Come to “Design Swoon” where we will not only look at some of the best design on the web but also parse down technique of implementation with CSS3, HTML5, & WordPress. A designers must-see.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
1) The document discusses typography and improving readability on the web. It provides tips for font size, line height, whitespace, and contrast to make text easier to read.
2) Examples are given of classic web fonts like Times New Roman, Arial, and Verdana as well as newer Vista fonts like Segoe UI, Corbel, and Calibri.
3) The emergence of the @font-face technique in 1998 and its current implementation with Webkit browsers is covered, noting it enables easy font embedding but also piracy possibilities. The presentation concludes with thanks to the audience.
This document discusses typefaces in Android and introduces a library called TypefaceHelper. It provides information on setting typefaces through the Android API and issues like leaking asset streams. It then demonstrates how to initialize and use TypefaceHelper to easily set typefaces across an application for TextViews, Activities, Fragments and more. The library aims to simplify and standardize typeface management in Android apps.
"Wordpress And Your Brand" 2010 - By Sara CannonSara Cannon
WordPress and Your Brand
Adapt WordPress to your brand, not your brand to WordPress. We will be covering different aspects of WordPress and how it applies to company branding. We are going to look at good branding practices, examples using WordPress, and look into how we can give ourselves and our clients the best possible online presence. We are also going to talk about brand consistency online and offline, WordPress customization tips, and helpful plugins.
Presented by: Sara Cannon
This document provides an introduction to using CSS to customize Omeka websites. It explains that CSS allows customization of visual elements like colors, fonts, text formatting, and positioning of items without modifying HTML. The document outlines common CSS selectors that can target elements, and provides examples of CSS properties that can be used to modify text, fonts, links, margins, padding and more. It also describes tools for identifying element IDs and classes to target elements with CSS. The overall purpose is to demonstrate how CSS can be leveraged to make Omeka sites visually appealing.
Markdown is a plain text formatting syntax that can be converted to HTML. It is popular because it is easy to write and read, like HTML was originally intended. Markdown files can be written by those familiar and unfamiliar with coding. It has broad support across documentation platforms and editors, making it a universal standard for writing both documentation and blogs. However, it lacks some features found in other markup languages and there is no single standardized version of Markdown syntax.
The document describes the author's early experiences with web development in the 1990s. It discusses how in 1994-1995, when the author was a student, they created one of the first Perl CGI programs - a Daleks robot puzzle game. They learned HTML, Perl and CGI programming through this project. It also covers how in 1995, as one of their first projects as a webmaster, they developed a website for a Muslim organization that showcased innovative techniques for displaying Arabic text as images due to browser limitations at the time.
This document discusses various tools and techniques for designing and building websites with WordPress, including plugins for advanced text editing, drag-and-drop themes, column-based page templates, and techniques for flexible design templates, custom page styles, and preventing orphan and widow words. It also provides information on contributing to WordPress and weekly design meetings.
This document provides an overview of HTML and CSS for beginners. It discusses tools for coding, understanding HTML structure and tags, CSS syntax and positioning, sprites, grids, and resources for further learning. The presentation is meant to teach attendees how to become an HTML and CSS ninja through understanding basic concepts and best practices.
This document lists various web design features that can make a website look unprofessional or "dorky", organized into categories such as backgrounds, text, links, graphics, tables, animations, navigation, and general design. It notes that the opinions presented are based on the author's experience speaking to groups about web design best practices. Examples of problematic design elements are provided, as well as recommendations for avoiding them.
This document provides a user guide for a web hosting service that has transitioned to new Windows 2003 and UNIX Signature/FreeBSD platforms. It describes the hosting packages available, how to access and navigate the control panel interface, and how to manage websites, domains, and account settings. Key features covered include adding and configuring websites, setting default documents and custom errors, directory permissions, log generation, and troubleshooting. The guide is intended to help users administer and maintain their web hosting accounts on the new platforms.
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018Mike Arnesen
Check out my slides from SMX Advanced 2018 for a deep dive into the various methods of implementation for structured data, taking SEO into the future with Machine-Readable Entity IDs (MREIDs), and more!
This document provides tips for optimizing a WordPress blog by avoiding common mistakes and utilizing scheduling tools. It discusses mistakes related to design, formatting, SEO, plugins, security, and accessibility. Easy optimization tips include using quick editing, formatting shortcuts, and scheduling plugins like EditFlow and CoSchedule to plan blog content in advance. Scheduling tools help increase productivity and allow for collaboration.
The document discusses online reputation management strategies, including using crowdsourcing platforms like MicroWorkers to generate clicks on web pages to influence their ranking in search engine results. Specific tactics mentioned include using crowdsourcing to generate clicks on positive pages to push negative results lower in search rankings. Secondary solutions discussed are optimizing pages on the same domain or authoritative domains to replace problematic pages in search results. The document provides tips for setting up online reputation management campaigns on MicroWorkers.
Until fairly recently, a sixth-grader doing a book report had more typographic choice than CNN had for their (very expensive) website. With the advent of the CSS @font-face, web designers have more choice than ever before. This presentation covers the basics of typographic theory for the web, as well as how to embed web fonts in your WordPress site.
This document provides an overview of typography concepts including:
1. The importance of typography and how typefaces can affect readability and aesthetics.
2. Common type classifications like serif, sans-serif, display, and script and examples of popular typefaces within each classification.
3. Guidelines for combining typefaces effectively including considering factors like contrast, weight, structure, style, hierarchy, classification, color, texture, and mood.
This document provides an overview of typography, including its history and evolution from ancient cave paintings to digital typesetting. It discusses key typographic concepts like typeface versus font, classifications of typefaces, the anatomy of letters, and principles of layout and design like balance, hierarchy, and grid systems. Examples are given of techniques like kerning and ligatures as well as tried and tested font combinations that look good on mobile screens. Further reading resources are listed for learning more about typography.
Beautiful Layouts Through Beautiful Typejeff_croft
The document is a presentation by Jeff Croft on typography for web design. It discusses that many common rules for web typography are myths. Croft advocates resetting all browser styles and using a typographer's scale for font sizes. The presentation explains that font sizes in CSS should use ems for sizing rather than pixels to allow for relative sizing based on context.
Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.
Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.
Beautiful Web Typography: 7 tips on de-sucking the webPascal Klein
Beautiful Web Typography is possible. This presentation looked at 7 tips at how to make the Internet a lovelier and more beautiful place using simple typographic conventions through CSS and general practice.
1) The document discusses typography and improving readability on the web. It provides tips for font size, line height, whitespace, and contrast to make text easier to read.
2) Examples are given of classic web fonts like Times New Roman, Arial, and Verdana as well as newer Vista fonts like Segoe UI, Corbel, and Calibri.
3) The emergence of the @font-face technique in 1998 and its current implementation with Webkit browsers is covered, noting it enables easy font embedding but also piracy possibilities. The presentation concludes with thanks to the audience.
This document discusses typefaces in Android and introduces a library called TypefaceHelper. It provides information on setting typefaces through the Android API and issues like leaking asset streams. It then demonstrates how to initialize and use TypefaceHelper to easily set typefaces across an application for TextViews, Activities, Fragments and more. The library aims to simplify and standardize typeface management in Android apps.
"Wordpress And Your Brand" 2010 - By Sara CannonSara Cannon
WordPress and Your Brand
Adapt WordPress to your brand, not your brand to WordPress. We will be covering different aspects of WordPress and how it applies to company branding. We are going to look at good branding practices, examples using WordPress, and look into how we can give ourselves and our clients the best possible online presence. We are also going to talk about brand consistency online and offline, WordPress customization tips, and helpful plugins.
Presented by: Sara Cannon
This document provides an introduction to using CSS to customize Omeka websites. It explains that CSS allows customization of visual elements like colors, fonts, text formatting, and positioning of items without modifying HTML. The document outlines common CSS selectors that can target elements, and provides examples of CSS properties that can be used to modify text, fonts, links, margins, padding and more. It also describes tools for identifying element IDs and classes to target elements with CSS. The overall purpose is to demonstrate how CSS can be leveraged to make Omeka sites visually appealing.
Markdown is a plain text formatting syntax that can be converted to HTML. It is popular because it is easy to write and read, like HTML was originally intended. Markdown files can be written by those familiar and unfamiliar with coding. It has broad support across documentation platforms and editors, making it a universal standard for writing both documentation and blogs. However, it lacks some features found in other markup languages and there is no single standardized version of Markdown syntax.
The document describes the author's early experiences with web development in the 1990s. It discusses how in 1994-1995, when the author was a student, they created one of the first Perl CGI programs - a Daleks robot puzzle game. They learned HTML, Perl and CGI programming through this project. It also covers how in 1995, as one of their first projects as a webmaster, they developed a website for a Muslim organization that showcased innovative techniques for displaying Arabic text as images due to browser limitations at the time.
This document discusses various tools and techniques for designing and building websites with WordPress, including plugins for advanced text editing, drag-and-drop themes, column-based page templates, and techniques for flexible design templates, custom page styles, and preventing orphan and widow words. It also provides information on contributing to WordPress and weekly design meetings.
This document provides an overview of HTML and CSS for beginners. It discusses tools for coding, understanding HTML structure and tags, CSS syntax and positioning, sprites, grids, and resources for further learning. The presentation is meant to teach attendees how to become an HTML and CSS ninja through understanding basic concepts and best practices.
This document lists various web design features that can make a website look unprofessional or "dorky", organized into categories such as backgrounds, text, links, graphics, tables, animations, navigation, and general design. It notes that the opinions presented are based on the author's experience speaking to groups about web design best practices. Examples of problematic design elements are provided, as well as recommendations for avoiding them.
This document provides a user guide for a web hosting service that has transitioned to new Windows 2003 and UNIX Signature/FreeBSD platforms. It describes the hosting packages available, how to access and navigate the control panel interface, and how to manage websites, domains, and account settings. Key features covered include adding and configuring websites, setting default documents and custom errors, directory permissions, log generation, and troubleshooting. The guide is intended to help users administer and maintain their web hosting accounts on the new platforms.
If you are aware of accessibility practices, you may know some of the basics for supporting users (labels, contrast, alt text). I'll touch on some newer or more obscure techniques that can help prime you to look at the new hotness features with a more critical eye. Instead of pushing stricly code techniques, I’ll review the logic behind these approaches (which you can refute, checking off that elusive audience participation selling point!). We'll discuss the search role, language attribute, <main> element, infinite scroll, page zoom, source order, and as much as I can squeeze in before I am chased from the room.
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018Mike Arnesen
Check out my slides from SMX Advanced 2018 for a deep dive into the various methods of implementation for structured data, taking SEO into the future with Machine-Readable Entity IDs (MREIDs), and more!
This document provides tips for optimizing a WordPress blog by avoiding common mistakes and utilizing scheduling tools. It discusses mistakes related to design, formatting, SEO, plugins, security, and accessibility. Easy optimization tips include using quick editing, formatting shortcuts, and scheduling plugins like EditFlow and CoSchedule to plan blog content in advance. Scheduling tools help increase productivity and allow for collaboration.
The document discusses online reputation management strategies, including using crowdsourcing platforms like MicroWorkers to generate clicks on web pages to influence their ranking in search engine results. Specific tactics mentioned include using crowdsourcing to generate clicks on positive pages to push negative results lower in search rankings. Secondary solutions discussed are optimizing pages on the same domain or authoritative domains to replace problematic pages in search results. The document provides tips for setting up online reputation management campaigns on MicroWorkers.
Until fairly recently, a sixth-grader doing a book report had more typographic choice than CNN had for their (very expensive) website. With the advent of the CSS @font-face, web designers have more choice than ever before. This presentation covers the basics of typographic theory for the web, as well as how to embed web fonts in your WordPress site.
This document provides an overview of typography concepts including:
1. The importance of typography and how typefaces can affect readability and aesthetics.
2. Common type classifications like serif, sans-serif, display, and script and examples of popular typefaces within each classification.
3. Guidelines for combining typefaces effectively including considering factors like contrast, weight, structure, style, hierarchy, classification, color, texture, and mood.
This document provides an overview of typography, including its history and evolution from ancient cave paintings to digital typesetting. It discusses key typographic concepts like typeface versus font, classifications of typefaces, the anatomy of letters, and principles of layout and design like balance, hierarchy, and grid systems. Examples are given of techniques like kerning and ligatures as well as tried and tested font combinations that look good on mobile screens. Further reading resources are listed for learning more about typography.
Beautiful Layouts Through Beautiful Typejeff_croft
The document is a presentation by Jeff Croft on typography for web design. It discusses that many common rules for web typography are myths. Croft advocates resetting all browser styles and using a typographer's scale for font sizes. The presentation explains that font sizes in CSS should use ems for sizing rather than pixels to allow for relative sizing based on context.
Your content is the most important feature of your website, so it's important to make sure that the text looks good and is easy to read no matter what device type or screen size it's being viewed on. One size does not fit all when it comes to typography, but you can use media queries to adjust type qualities such as size, line height, column width, margins, hyphenation, and even typeface depending on the viewport size. Learn how you can use CSS to apply design rules that will make your typography look better and perform better across devices. You'll also find out how typography affects the loading time of your website, and what you can do to improve performance.
Presented in 2015 at ConFoo and Albany UX. Presented in 2014 at WebVisions Chicago, Blend Conference, Frontend Conference Zurich, Refresh Ottawa, Mobile+Web Dev Conference, STC Summit, Bmoresponsive, ConvergeSE, and Girl Geeks Montreal.
Modernist Typography and the Swiss grid - Carlo GiannascaFrostSydney
Carlo Giannasca Partner and Head of Environments at Frost* Design shares some of his insights into the basics of modernist typography and the effective use of the Swiss grid system.
The document provides a history of writing systems from early pictographs to the development of alphabets and discusses the invention of the printing press. It then explains the role of typography in graphic design in communicating messages and includes definitions of key typographic terms such as typefaces, serifs, and measurements like points and picas.
Given at the Boston WordPress meetup, 2/18/13. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
No coding experience? No problem! With WordPress.com, you can have a great looking site up and running in just a couple minutes. We’ll go through the basics of using WordPress itself, and what WordPress.com specifically can offer you as a beginning blogger or site builder.
Presented at WordCamp Chicago 2014
If you’re a creative or technical professional, odds are you need a great portfolio website. What makes a good portfolio? What if you’re a writer, or a developer, and don’t have a lot of visual work to show? We’ll go over how to navigate the intimidating world of personal portfolio websites, using WordPress as our guide.
The document summarizes a presentation on basic design principles for non-designers. It discusses what design is, the importance of good design, and key design concepts like grids, alignment, white space, typography, color, and visual hierarchy. Good design forms an emotional connection with users, establishes trust, and makes websites easy to use. Following basic design principles can help even non-designers create effective and user-friendly designs.
The document outlines the C.R.A.P. design principles:
Contrast - Elements that are different should be very different to avoid confusion. Slight differences do not provide enough contrast.
Repetition - Visual elements like color, shape, and size should be repeated throughout a design to develop organization and unity. This includes headings, subheadings, colors, images, and other graphical elements.
Alignment - Every element should have a visual connection to another on the page. Elements can be left, right, or center aligned.
Proximity - Related elements should be grouped together while separate elements should have enough space between them.
Alas, No Mind Meld: Designer-Developer Communication for a Harmonious FutureMel Choyce
Designers and developers are so different that sometimes it's almost like we're speaking different languages. What can we as designers to to help bridge these communication gaps to allow for smoother web projects?
Presented at WordCamp NYC 2012.
Have you always wanted to get away from boring, default fonts on your websites? Web fonts can allow you to use your favorite typefaces on the web, without saving them out as an image, or using other hacks.
Join typography expert Jim Kidwell for this informative session where you will learn how to:
- Craft solid CSS to integrate web fonts in your site
- Use the Web Font Plug-in to mock-up your sites using WebINK and Google Web Fonts
- Find suitable font pairings for your site
- Test web fonts on existing sites without writing any code
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedExtensis
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®
Extensis Web Typography Workshop | WebVisions PortlandExtensis
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.
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.
This document summarizes the history and current state of using web fonts on websites. It discusses how browser support for @font-face has evolved over time, popular web font formats, best practices for defining font families with multiple weights, options for hosting fonts, and the benefits of using hosted web font services versus self-hosting. It also provides an overview of the Drupal @font-your-face module for selecting and applying web fonts in Drupal sites.
The document is a presentation on beautiful web typography. It discusses various topics related to typography at the letter, text, and page levels. It addresses assumptions about web typography and options for setting fonts, including installed fonts, sIFR, Cufon, webfonts using EOT/EOT Lite, and services like Typekit. Concerns raised include non-standard solutions, proprietary requirements, and browser support issues. The goal is to educate about best practices for web typography.
Greg Veen gave a presentation on web fonts at the 2011 Web 2.0 Expo in San Francisco. He discussed the history of web typography from limited font support in early browsers to today's wide range of font formats and browser compatibility. Veen explained how web fonts can enhance user experience by allowing designers more control over typography. However, rendering quality depends on factors like font files, hinting, operating systems and browsers. Techniques like Flash of Unstyled Text and loading fonts with JavaScript aim to prevent delays as fonts load.
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.
My web typography presentation at Web Directions South 2010, Sydney: Setting standards-friendly web type. The talk focused on the options currently available for setting type on the web with a strong focus on webfonts (part one) and a supplementary section on then styling the selected type (lots of micro-typography; part two). Enjoy. (:
Content Management & Web Analytics Theatre; Davin kluttz classy clowny or c...TFM&A
This document discusses branding and typography on the web. It begins with an introduction to the speaker and an overview of the agenda. It then discusses how typography serves branding. It provides examples of poor typography choices and how they can undermine a brand. The document outlines how web fonts have expanded typography options beyond the basic fonts previously available on the web. It discusses challenges and benefits of using web fonts, as well as how to properly integrate them either through self-hosting or a web font service. Lastly, it provides tips on how to use web fonts in a classy rather than clowny or crude manner and lists additional resources.
A presentation about webfont services and how to stop using the same old 15 web-safe fonts we've been using for two decades. Examples from four webfont providers: FontSquirrel, Google Font API, Typekit, and Extensis WebINK. Includes implementation details.
The document discusses typography and its importance for web design. It defines typography as the art and technique of arranging type to make language visible. It then provides examples of typography concepts like leading, kerning, and tracking. The document gives tips for better typography usage, such as choosing legible fonts and maintaining consistency. It also provides two methods for applying web fonts in WordPress themes: using @font-face in CSS or Cufón text replacement using jQuery. Overall, the document offers an overview of typography fundamentals and techniques for implementing web fonts.
This document discusses different methods for embedding fonts on web pages, including their advantages and disadvantages. The font tag allowed using images of text for any font but had performance issues. CSS font stacks provide flexibility but not all fonts will be visible to users. JavaScript methods like SIFR and Cufón let any font be used but have limitations. The @font-face rule allows dynamic font usage through TrueType, OpenType, Embedded OpenType and SVG formats, but font licensing and performance need to be considered. Services exist to help with font hosting and subsetting can reduce file sizes but may cause issues. Overall font embedding remains challenging due to technical and licensing restrictions.
This document discusses different methods for embedding fonts on web pages, including their advantages and disadvantages. The font tag allowed using images of text for any font but had performance issues. CSS font stacks provide flexibility but not all fonts will be visible to users. JavaScript methods like SIFR and Cufón let any font be used but have limitations. The @font-face rule allows dynamic font usage with full CSS styling across browsers but requires font files in multiple formats and licensing can restrict embedding. Services exist to handle font hosting and formatting but have disadvantages around reliance on their servers. Subsetting and compression can improve performance but must be done carefully.
The document provides guidance on planning and preparing a website by defining goals, learning industry standards, architecting the site structure, optimizing for search engines, and creating content. Key recommendations include defining specific and measurable goals, analyzing competitors' sites to understand best practices, creating an organized sitemap to structure content, focusing on relevant keywords for search engine optimization, and using the sitemap as a roadmap to develop text, images, and other materials.
Managing fonts in a digital design workflowExtensis
Fonts are critical to the creative process. With multiple outputs, including web, print, epub and more, managing fonts throughout the digital workflows can be challenging at best. In this webcast, Extensis font expert Jim Kidwell will show you practical management techniques and helpful tips.
Video recording:
http://www.extensis.com/media/webcasts/managing-fonts-in-a-digital-workflow/
The document discusses the use of @font-face to embed fonts on webpages. It provides information on browser support, best practices for CSS implementation, tools for converting fonts, licensing considerations, and resources for using web fonts. While web fonts allow more typographic control and flexibility, issues like performance, hinting, and file sizes must be addressed. Typography also requires skill to implement properly.
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
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
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Designforuminternational
India’s architectural landscape is a vibrant tapestry that weaves together the country's rich cultural heritage and its modern aspirations. From majestic historical structures to cutting-edge contemporary designs, the work of Indian architects is celebrated worldwide. Among the many firms shaping this dynamic field, Design Forum International stands out as a leader in innovative and sustainable architecture. This blog explores some of the best Indian architects, highlighting their contributions and showcasing the most famous architects in India.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
3. We’re in a Webfont
Rennaissance.
Take a look...
4.
5.
6.
7. Webfonts in the Past
1. Web-safe fonts
• Arial, Verdana, Georgia, etc.
2. Font Replacement
• SIFR
• Cufon
• FLIR
8. Webfonts in the Present
@font-face
• CSS rule made popular in CSS3
• Embed fonts directly onto your site
• Don’t need to worry about browser-safe
fonts anymore!
10. Webfonts in the Present
@font-face formats
1. EOT (IE)
2. WOFF (Modern Browsers)
3. TTF (Safari, Android, iOS)
4. SVG (Legacy iOS)
Note: There’s some overlap -- some browsers support
multiple format options. However, it’s safest to use
them all.
16. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
• Self-hosted or cloud-hosted?
• Do you need control over your files?
• Can’t add new files to your server?
• Self-hosted: Font Squirrel, Font Spring, etc.
• Cloud-hosted: Google Web Fonts, Typekit, etc.
17. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
• Free service or pay service?
• Do you have a budget for fonts?
• Hundreds of free fonts, but pay fonts are generally
better quality
• Free services: Google Web Fonts, Font Squirrel, etc.
• Pay services: Typekit, Font Spring, etc.
18. Finding the Right Webfont
Picking the Right Font
Figure out your needs.
• Header font?
• Needs to look good big
• More stylistic freedom -- can use almost any style of font
• Body font?
• Needs to look good at medium to smaller sizes
• Less stylistic freedom -- limited to serif and sans-serif
• Must be very readable and legible
19. Finding the Right Webfont
Picking the Right Font
Figure out your tone.
• What is your site about?
• Who is your audience?
• What are you trying to say?
• Your fonts should match your site’s tone
• Corporate site shouldn’t use Comic Sans. Travel blog
shouldn’t be stiff and formal.
20. Finding the Right Webfont
Do What Feels Right
Picking fonts is highly intuitive.
• What works for some might not work for others
• Some might like structure, while others freedom
• Finding the right can be as organic or structured
as you want it to be.
25. Webfonts and WordPress 3
Adding From WP Plugins
There are many webfont plugins available for WP:
1. Google Web Fonts: typecase, WP Google Fonts
2. Typekit: Typekit plugin for WordPress, Typekit Fonts
for WordPress
3. Fonts.com: Web Fonts, Webfonts
4. Fontsforweb.com: Font - web fonts plugin
6. Multiple: Fontmeister
7. Add to WYSIWYG: Ultimate TinyMCE - Ultimate Google
Webfonts Addon
27. Webfont Resources 4
3
Where to Find Fonts
• Fontdeck • The League of Moveable Type
• Fonts.com Web Fonts • MyFonts Webfonts
• FontsLive • Process Type Foundry
• Font Squirrel • Typekit
• Fontspring • Typotheque
• Google Web Fonts • Web FontFonts
• Just Another Foundry • WebINK
• Kernest • WebType