Skip to main content

Home/ Web Development & Mobile App/ Group items tagged font

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
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

Web Typography: Using The Golden Ratio and REM's - Greg Rickaby - 0 views

gregrickaby.com/sing-the-golden-ratio-and-rems

typography webdesign tools calculator usability css font REM responsive

shared by Vernon Fowler on 01 Feb 14 - No Cached
  • First you need to set a default “root” font-size variable: html { font-size: 62.5% } Why 62.5% instead of 100%? Simplicity. Our default font is now 10px, which makes math easier. Now, 1.0rem = 10px. This becomes our $rembase.
  • Now your fonts will scale perfectly during a browser re-size (if using responsive design), or if a user were to zoom in or out.
  • What’s so awesome about the unitless line height? You only have to specify it once in the <body> tag. Now, ALL other line height(s) are relative to the parent font-size. That’s too easy! (Of course, you can still specify your own to maintain complete control.)
    • Vernon Fowler
      Vernon Fowler on 01 Feb 14
       
      Shouldn't line-height also be refined whenever the container width changes?
  • ...5 more annotations...
  • Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm.
    • Vernon Fowler
      Vernon Fowler on 01 Feb 14
       
      Where does the mystical value of 24px or 48px for vertical spacing margins come from?
  • By declaring REM’s after PX’s in the CSS this example  will degrade gracefully to the PX:
  • Line-height: 24px; for the win, you you stay right in the baseline ( until you start using a border bottom it throws it off by a pixel :p )
  • setting the root font size to 62.5% is a brilliant little trick
  • One note on the comment regarding vertical rhythm. I believe the 24px and 48px is dependent on your line-height. In your examples, you are using a line-height of 26px so I think the values should be 26px and 52px to maintain that rhythm.
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

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
Biztech Consultancy

Role of Typography in Building Business Web Solutions - 0 views

biztechconsultancy.com/...uilding-business-web-solutions

website design Theme Design services Template Designing solution professional web designer Typography Business Web Solutions Responsive Website Design E-Commerce Website Design UI_UX Design for Web and Mobile Landing Page Design

shared by Biztech Consultancy on 16 Oct 15 - No Cached
  • Biztech Consultancy on 16 Oct 15
     
    The selection of the fonts, size, line-spacing, letter-spacing etc. are the parts of typography. Typography being the first impression, business solutions requires typography that conveys the exact message rather distracting the readers with unpleasant font face. Every aspect of the website design, be it its readability, length of the article, user experience etc. together makes a business solution convincing.
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."
Biztech Consultancy

Biztech Added Graphic Design Service to its Bouquet of Services for its Clients - 0 views

bit.ly/1uzyLv3

Graphic Design Graphic design service graphic design solutions web design

shared by Biztech Consultancy on 20 Nov 14 - No Cached
  • Biztech Consultancy on 20 Nov 14
     
    Implementing graphics to any website will lead to an attractive and artistic website representing of the business online. Graphics includes appealing images, attractive icons, alluring animations, artistic fonts and much more. http://bit.ly/1yV52xn
Vernon Fowler

Can I use rem units - 0 views

caniuse.com/rem

units webdesign css typography rem fonts

shared by Vernon Fowler on 31 Jan 14 - No Cached
  • Vernon Fowler on 31 Jan 14
     
    "Type of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units."
Vernon Fowler

Semantic code: What? Why? How? | Boagworld - Web & Digital Advice - 0 views

boagworld.com/...semantic-code-what-why-how

semantic code markup html webdesign development

shared by Vernon Fowler on 23 Feb 14 - No Cached
  • semantic code aids accessibility
  • Semantic code tends to improve your placement on search engines
  • Semantic code makes site updates easier
  • ...3 more annotations...
  • semantic code is shorter and so downloads faster
  • Semantic code is easier for people to understand too
  • There is no tool that can check for semantic code. It is a matter of looking at the code and seeing if it refers to colours, fonts or layout instead of describing what the content is.
1 - 10 of 10
Showing 20▼ items per page