I'm looking for a way to standardize my h1, h2, h3, etc tags after I apply a css reset, I know this mostly depends on the design but I remember seeing in a site that there was some sort of "golden ratio" between the text size, line-height and margin-bottom that would improve readability and better the way headers looked on the page.
Do any of you know anything like this?
I think this depends a great deal on the font used. That said, Smashing Magazine gives this "rule of thumb":
Heading to Body Font-Size Ratio
To better understand the relationship
between heading and body font size, we
divided each website’s heading font
size by its body font size. We took
the average of these ratios and
derived a rule of thumb for you to
work with:
Heading font size ÷ Body copy font
size = 1.96
The overall value, then, is 1.96. This
means that when you have chosen a font
size for your body copy, you may want
to multiply it by 2 to get your
heading font size. This, of course,
depends on your style; the rule of
thumb won’t necessarily give you the
optimal size for your particular
design. Another option is to use a
traditional scale (6, 7, 8, 9, 10, 11,
12, 14, 16, 18, 21, 24, 36, 48, 60,
72) or the Fibonacci sequence (e.g. 16
– 24 – 40 – 64 – 104) to get natural
typographic results.
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
Related
Label in CN1 is limited to being a Single line.
Now that we have to use SpanLabel for anything that can take more than 1 line,
we face one issue.
When we have a strict design that uses consistent height for a list item, we have to give max/min lines allowed for the SpanLabel (At least that's how it works in Android And Flutter).
When I searched for anything that says line in SpanLabel file, I only found that word in one place, that too in a comment.
It did not feel right using fixed height/width property to a SpanLabel as they will vary with fonts and font sizes. The hight should be calculated with respect to the number of lines of the text & font config like font size, line spacing, padding, etc.
What is the right way to achieve consistent height across various SpanLabel despite the varied length of the text they display?
The "right way" would be the layout manager as it would allocate the right amount of space to the span label and everything else. E.g. if you use TableLayout you can allocate the height as percentage.
SpanLabel is technically a TextArea that's encapsulated. It has that distinction between rows/lines which isn't exposed within SpanLabel. But you can manipulate the underlying text area by using getTextComponent().
The resulting icon is oversized, even with font-size set to 16px, it looks like 32px or even more.
I used the [Octicons][2] approach to build the icons, so Glyphs setup looks as follows:
Units per Em is 2048
Metrics is exactly like Octicons
Glyph width is set to 2048
Grid spacing is set to 32
My mistake was to create glyphs with setting of "units per em" equal to 1000. After changing the value, already existing glyphs do not update automatically, you should press the button next to the setting.
I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?).
How would I get the same effect in CSS? I know the property is letter-spacing: X but it doesn't take percentages and -25px or pts would be a huge figure!
In Photoshop letter-spacing is called letter-tracking and is specifically the space between each letter of text. The problem is that Photoshop Letter Tracking doesn’t convert 1:1 to Letter Spacing in CSS.
It's very easy to calculate the conversion from Photoshop to CSS though.
Formulas to convert Photoshop Letter Tracking to CSS Letter-spacing
em Formula
X / 1000 = Y
X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS
Example
Consider the following example: Photoshop has a letter tracking value of 200..
200 / 1000 = 0.2
The result is 0.2em in CSS.
px Formula
If you prefer to use "px" values the formula is
X * S / 1000 = P
X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS
Example
Consider the following example: Photoshop has a letter tracking value of 200 and a font-size value of 10.
200 * 10 / 1000 = 2
The result is 2px in CSS.
You can use the em dimension instead of px, thus sizing the spacing relative to the font size (so photoshop's 25% is somewhere around .25em).
In contexts like this, unitless numbers usually imply a typographic unit that is a small fraction of the em unit. It’s usually called just “unit”. The value of this unit depends on the font, and it is expressed as a UPM (units per em) value. The common UPM value is 1,000, but Microsoft fonts have 2,048, and other values occur too. (This issue is described in some detail in the article UPM value of 1000 set in stone?)
Assuming an UPM value of 1,000, -25 would map to -0.025em. Setting letter-spacing: -0.025em tends to have a rather small effect: a longish text line becomes about one “i” shorter. The effect you get using CSS should not be expected to be same as in PhotoShop; the rendering mechanisms of PhotoShop differ from those of browsers.
If your problem is simply with the unit conversion, you can use em instead of px
Although em allows decimal numbers, it doesn't change the rendering accuracy. 0.5px or equivalent accuracy is not shown on browsers - it'll become either 0 or 1px. Simply because a screen can't show half a pixel, at best it can aproximate that with anti-aliasing.
For smaller fonts the anti-aliasing would probably look worse than the spacing. Another option is finding a web-font that has the spacing you want by default. This way you would get similar results to what you want, but would probably mean changing the font.
The CSS spacing is simply not as accurate as photoshop. One reason is that photoshop renders for printing also - with screen/pixel resolutions you have to live with pixel accuracy. Although theoretically it would be possible with letter spacing that becomes more accurate on zooming etc i don't know of any implementation that would actually work that way.
If correct letter spacing is really important for you, you could try to use SIFR to render the fonts spacing more accurately than what the browser is capable of - they might be able to use changing anti-aliasing. Obviously this would only make sense if the letter-spacing is a big issue.
How can I autoscale the text font size in a web page in order to make text in a div or p fit within given bounds?
There are nice solutions for Android, like this one, but I haven't found any for GWT.
Do you guys have any?
Thanks!
There are sevaral solutions to this problem:
(1) render the text, measure its width (myLabel.getOffsetWidth(), compare to the desired width, change font size if it does not fit and start over (remember to do this inside the Scheduler's deferred command, or your offset width will be zero);
(2) use FitText.js (http://fittextjs.com/);
(3) use canvas which can auto-fit text into provided space;
(4) use ellipsis when text overflows;
(5) use viewport units for text font (limited browser support at this time): http://css-tricks.com/viewport-sized-typography/
(6) create a different, more fluid UI design that handles content size better.
I have used 960gs to get a first version of some pages going (I am not the designer, but would like to have an approximate layout before handing it to one). It has helped me greatly, but now I am wondering if there is a CSS grid framework where the columns will expand/shrink to make use of all available space in the browser window. Using a 960 pixel top-level container in 960gs, even in my humble 1280-pixel-wide screen there are large empty bands on both sides.
Are there alternative grid systems where I can define a certain column to "grow" if the browser window is larger than expected?
Many thanks!
lara
There is a Fluid 960 Grid System too.
See this ala article on fluid grids and example. Also see this example.
I'd use Unsemantic it's from Nathan Smith who developed 960.gs.
Either that, or you can customize Twitter Bootstrap so that you only take the responsive grid and leave out all the other features that might be unnecessary for your project.
Try the Dead Simple Grid. You can set the columns to have fixed or percentage widths. Setting to percent will dynamically fill the available space. It is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
Cascade Framework's grid system can do exactly what you want... and lots, lots more.
If you use the tag <div class='site-center'></div>, you get a centered div with a fixed width for desktop (width is different depending on browser width) and the full available width for mobile. You can, however, just drop that tag and use the full available width on desktop as well. See this website as an example of an implementation thereof.
The grid elements themselves are percentage based. That means that they fill up a certain percentage of the available width. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
To be able to use Cascade Framework's grid system, I recommend you use either the file 'build-full.min.css' (about 8kb minified + gzipped) or the file 'build-full-no-icons.min.css' (about 10.8kb minified + gzipped) in the folder 'assets/css/cascade/production, depending on whether you want to include support for its icon set. You can also create your own build and pick only the modules you want. For the sake of brevity, I'm skipping details on how to do that. If anything isn't clear about creating your own build and you'd like to know more about this, please send me a PM to avoid derailing this thread by going too far off-topic.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
See also http://www.cascade-framework.com/grid.html and http://jslegers.github.io/responsiveness/ .