Skip to main content

Home/ Web Development & Mobile App/ Contents contributed and discussions participated by Vernon Fowler

Contents contributed and discussions participated by Vernon Fowler

Simple Middle Filter: All | Bookmarks | Topics
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

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

css3 rem font css fonts sizing webdesign web design

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

Font Awesome, the iconic font designed for Bootstrap - 0 views

fontawesome.io

icons bootstrap font responsive accessible accessibility webdesign

shared by Vernon Fowler on 15 Jan 14 - No Cached
  • Font Awesome won't trip up screen readers, unlike other icon fonts.
  • Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
Vernon Fowler

Stylify Me - 0 views

www.digitalforreallife.com/...stylify-me

css styleguide

shared by Vernon Fowler on 09 Dec 13 - No Cached
  • Vernon Fowler on 09 Dec 13
     
    "Stylify Me was created to help designers quickly create a style guide of an existing site, including colours, fonts, sizes and spacing. It's a tool that allows the designer to research the CSS styles efficiently without the need to inspect each element, in order to be aware of current design trends and inform their design decisions."
Vernon Fowler

Wirefy | The Responsive Wireframe Framework - 0 views

getwirefy.com

wireframe responsive tools prototype prototyping tool webdesign css html

shared by Vernon Fowler on 05 Dec 13 - No Cached
  • Vernon Fowler on 05 Dec 13
     
    "Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions."
Vernon Fowler

The Genericons Icon Font Story | ThemeShaper - 0 views

themeshaper.com/...genericons-icon-font

icon font design webdesign css

shared by Vernon Fowler on 18 Nov 13 - No Cached
  • The OpenType font file (.otf) is even included so you can can drop it in your system fonts folder and use the font in Photoshop if you like.
  • The flexibility you get from being able to use CSS to change the way they look, like re-coloring all the icons with one simple rule, makes them superior to SVG for this use case. They also work in all modern browsers
« First ‹ Previous 61 - 79 of 79
Showing 20▼ items per page