Talk:Typography refresh

Update to Typography refresh
Hi everyone,

This an update regarding the "Typography refresh" Beta feature, which is live on all wikis that have Beta Features available. The following changes will be live soon, if you don't see them already.

The first version of the typography update certainly wasn't perfect, but the UX design team wanted to get it out there and see what people thought about some of the ideas included. Well, we've recevied a ton of feedback on the Talk page.

Changes made based on your feedback
Almost all of the feedback was constructive, and some showed a really keen understanding of the issues with typography on Wikipedia. Thank you to everyone who stopped by and left a message. Based on the feedback we got, we made the following changes:


 * 1) Reverted the size of the personal toolbar menu and lefthand sidebar back its previous size (.8em)
 * 2) Reverted the black/grey links in the sidebar and personal toolbar back to blue
 * 3) Reverted the width of the left-hand back to its previous width, to avoid line breaks in those links
 * 4) Increased the body content size to 1.1em. While we did not originally increase the body content size, we saw that many people brought up this idea, and we think it's a good strategy for improving readability. This also allows us to emphasize the main content more without decreasing the size of toolbar or sidebar links, etc.
 * 5) Increased the size of page titles and their line height
 * 6) Tweaked the whitespace between section/subsection headings and around blockquotes. We hope this version provides better balance.
 * 7) Reprioritized the font family CSS for headings, placing the free and open source variant "DejaVu Serif" first

Additional ideas we're trying out in this release

 * 1) Placing a maximum width on page contents of 715px. It is widely accepted that text columns with a line length which spans the entire width of a (desktop or laptop) screen are not ideal for reading/scanning.,, , The max width will not apply to Special pages (like Prefences) or to actions on an article, like viewing history.
 * 2) Removing the border around thumbs, increasing the whitespace around them, and changing the text styling on thumbcaptions. Vector and Monobook styles are both overly reliant on border styles to demarcate page elements. Numerous borders, especially with right angles, increases cognitive load when scanning a page.
 * 3) Changing disambiguation and row links to have the same type as thumb captions.

Other things we have retained in the beta. For example, serif headings were a source of complaints, but were retained since one of the goals is consistency with the mobile skin for Wikimedia projects.

On behalf of the design team, Steven Walling (WMF) &bull; talk   23:17, 7 January 2014 (UTC)


 * Regarding maximum width: for reading text, I don't mind having a narrower column, but Wiktionary has very little body text, and on svwiktionary we put quite some content (images, links, inflections) floating on the right. Are we expected to disable the maximum width for pages in the main namespace? Skalman (talk) 12:01, 8 January 2014 (UTC)


 * FWIW, I've already disabled maximum width for the main namespace at svwiktionary. Skalman (talk) 12:44, 8 January 2014 (UTC)
 * I'm a little confused. You are penalising ALL svwiktionary users with a slightly larger CSS page load for an opt in feature that is currently only enabled by 4 users (according to the preferences page) which by the way doesn't even work... why? This is senseless.... I understand there may be problems with the feature but it would be more useful to surface those issues and discuss them than hide them. Please consider using User:Skalman.css/Vector.css instead. Jdlrobson (talk) 06:47, 9 January 2014 (UTC)


 * One of the four was complaining about it, so I thought I might as well fix it by adding 46 bytes of extra uncompressed, minified CSS. Further, I am assuming that Typography refresh will actually be enabled by default in the "near" future, and thus making the transition smoother by starting now. If we're caring this much about 46 bytes there are plenty of other improvements that should go first. Skalman (talk) 10:13, 9 January 2014 (UTC)
 * Can you please make it clear in something like a site notice (displayed to those that have the feature enabled) that you are making this change (the page width restriction)? I was just very confused by the page width suddenly shrinking so much. I've disabled this feature in my settings - I hope it is removed as it is absolutely terrible on widescreen monitors! Thanks. Mike Peel (talk) 20:04, 9 January 2014 (UTC)
 * Mike Peel, There won't be a site notice as this is a beta feature, however it is on our roadmap to have echo notifications when there are major changes to Beta Features for users who have the featured enabled. We just haven't gotten to creating that notification type yet.
 * Jaredzimmerman (WMF) (talk) 23:23, 9 January 2014 (UTC)
 * Thanks for the reply. Echo notifications would work well - I'd encourage you to consider prioritising getting those working before you make more big changes like this one. Thanks. Mike Peel (talk) 06:20, 10 January 2014 (UTC)

What do you like about typography update?
I like the ToC change and the new image frame. Although I'd also suggest experimenting with a very light faded frame when hovering the thumbnail. TheDJ (talk) 20:55, 9 January 2014 (UTC)
 * Thanks TheDJ, what do you feel would be the benefit of having a frame on images on hover? We don't want to step on the multimedia team's toes too much, as they might be planning some interactive elements for images on pages as well.
 * Jaredzimmerman (WMF) (talk) 23:27, 9 January 2014 (UTC)

The Egyptian pyramids of the Giza Necropolis, as seen from the air The Egyptian pyramids of the Giza Necropolis, as seen from the air
 * A frame creates gives affirmative feedback that the caption and the image belong together. Actually, you are creating a frame even in this design. It's just made using a lot of whitespace towards it surroundings. The reason this needs to be 'a lot' of whitespace is because whitespace is a lot harder to notice, so in order to create a 'grouping' of image and caption within the surrounding text, you will need at least more that 2 times the amount of whitespace that is between the two elements that you want to group. The frame I am proposing wouldn't have to be much. I'm thinking something like this example, with shadow and a significant fading. An alternative is to simply use a background color perhaps TheDJ (talk) 00:40, 10 January 2014 (UTC)
 * You're right TheDJ, there are lots of ways to create cohesion between the image text and the image, or separate the image caption from the article body text. and this is certainly one of the ways, in this version of the Text Refresh we went with a rather large margin for the images, this was partly due to the fact that even modern browsers still can't create a nice text rag automatically. and the rough rags look bad when the margin is too small. I don't know if a large hover effect is the right way to go, since there was such an outcry from people on the rather subtle hover effects for the edit links on visual editor from last year. I think the Multimedia team will want to investigate things like mouseovers and hovers where appropriate, but your point is taken that we can push further to more clearly associate the caption text with images and further distinguish it from article body text.
 * Jaredzimmerman (WMF) (talk) 00:50, 10 January 2014 (UTC)
 * Yeah, my point was, please experiment with this, I think we can do more in this area. Personally I don't like the whitespace style, but perhaps with some experimentation, you can find something that is even better. TheDJ (talk) 07:59, 10 January 2014 (UTC)

  The Egyptian pyramids of the Giza Necropolis, as seen from the air
 * Just to add my idea. — Edokter  ( talk ) — 12:21, 10 January 2014 (UTC)

Still nothing
I enabled it again, and disabled again after 30 seconds. Nimbus Sans looks awfully on my computer: the letters are blurry and crammed next to each other. Non-bold DejaVu Serif in headers looks awkwardly slim, I am tempted to say that the headers are even less readable than previously. There is a large blank space to the right of page content, and I am in no mood for fighting with style sheets to get rid of it. If I wanted webpages to take only half of my screen width, I would shrink the browser window to half of my screen width. I do not. Respect it.

This is just change for the sake of change. Keφr 16:54, 10 January 2014 (UTC)

Refreshing indeed
I find this update globally refreshing for a non typo/non tech expert. I like the experiment with the thumb images. It help reducing visual clutter (boxes, boxes, boxes,...) Keep on trying.

Working on high res screens makes the 715px width limit a little bit awkward. Is there any possibility to somehow link page width or font size to screen resolution? Is the number of characters per line important for improved readability or is the absolute width?

As others suggested, I would experiment with using the empty space for infoboxes, media or even ToC. I would also pay extra attention to formatting reference lists as they may become endless with a 715px page width (see Obama's page for ex) Afernand74 (talk) 11:03, 11 January 2014 (UTC)
 * Afernand74, thanks for your comments, to answer your question, yes, studies we've looked at identify 45 to 115 CPL (characters per line) to be ideal for reading long form content. The current measure of 715px gets you ~113 CPL depending on many factors, such as makeup of the line, language, etc. but gets quite close the the upper limits of what we researched was an ideal measure length. While we could link it to screen size we'd lose the benefits of staying within that 45-115 ideal CPL band.


 * As far as other reasons beyond readability that we went with the narrower measure, you basically read or mind, this is a Beta Feature and therefore not finished, final, or polished, we plan to experiment with moving the infobox out of the main body of text as well as plan on experimenting with other types of content that could exist to the right of the main article body, some examples we've thought of (as have you apparently) are TOC, related Commons content, Wikivoyage, Wiktionary, Wikinews, and other sister project content. Nearby (geographically) related articles, and other types of related articles or content.


 * This step was to lay the groundwork for people to start thinking about how we could simultaneously make the article content easy to read, as well as free up space for other types of content to help people explore, learn more, and discover content that already exists within the project but might not be as visible as we'd like it to be.


 * Its also easy to begin to imagine what other things could exist to the right of an article, things like Flow talk page, Content translation workflows, Draft guides for new editors, as well as others we haven't even thought of yet.
 * Jaredzimmerman (WMF) (talk) 00:27, 12 January 2014 (UTC)


 * I agree that for running text, the 715px limit is probably a good idea, and agree with putting infoboxes+images outside the main text. However, please be very careful if you consider putting other types of content there, as it may be distracting. The things you mention (talk, translation, draft) sound good, but perhaps should be collapsed by default. Otherwise I'm afraid we'll get information overload. Skalman (talk) 09:47, 12 January 2014 (UTC)

Limitation of page content width needs some more thought
While I like the idea of a limited content width (actually I never maximize my browser window horizontally for this very reason) I think a potential implementation on Wikipedia would need much more work than is done in this iteration of typography refresh. Some issues that directly come to my mind: --Patrick87 (talk) 00:59, 8 January 2014 (UTC)
 * While the page content's width is limited all other UI elements use all available horizontal space (e.g. navigational links at the top). This doesn't look right and makes the actual content look needlessly squeezed to the left.
 * Pages with navigational templates or floating images as well as informational templates often look squished.
 * File description pages also look wrong with the image not being influenced by the width restriction and often being much wider than the rest of the page content.
 * Jaredzimmerman (WMF) (talk) 07:58, 9 January 2014 (UTC)
 * Patrick87, can you update with some specific links so we can make sure we're all on the same…page, as to which pages we're talking about. I've also added a section below for cataloging special pages with issues due to the fixed measure.


 * I agree with Patrick and would add that category pages should not have the maximum width either, since they are displayed in columns.
 * Why is the max width specified in pixels, not ems? Ems would seem to make more sense to me for this kind of thing. This, that and the other (talk) 10:40, 8 January 2014 (UTC)


 * Jaredzimmerman (WMF) (talk) 07:51, 9 January 2014 (UTC)
 * I played around with using ems for the width, the problem with that is that different languages use different base em sizes to properly scale their type. So, if we base the width on ems (about 53em) the page width could change a lot per language, and since one of the main points of this beta feature is consistency both with mobile and across projects, that wouldn't work out so well.


 * Thanks guys this is really useful feedback. Jdlrobson (talk) 06:48, 9 January 2014 (UTC)
 * "the problem with that is that different languages use different base em sizes to properly scale their type." Could you say a bit more about what you mean by this? Do different language Wikipedias specify different font sizes in their style sheets? 86.149.168.38 00:40, 10 January 2014 (UTC)
 * Yes, thats exactly it, languages that use non latin scripts such as Japanese frequently change the font size to look appropriate for their character sets
 * Jaredzimmerman (WMF) (talk) 19:48, 10 January 2014 (UTC)


 * I would change two things about content width limiting. 1. I would make it slightly wider. 800px is perfect for me. 2. I would maybe center the content of the page. That would make it look better on wide screen displays. Other than that, I enjoy the update. Especially the fonts. Dr. Fatman (talk) 22:23, 11 January 2014 (UTC)

Line spacing
I think that line spacing is too large. We could keep it the same as before. With this, every superfluous empty lines appear extremely large (Maybe beneficial for hilighting wrong typography?). --Gumok (talk) 19:17, 9 January 2014 (UTC)

Default system fonts should be given preference over free fonts (especially on Windows)
I'm running Windows 7 and use Firefox. By chance (mainly to create SVGs for Commons) I have the fonts "Liberation Sans" and "DejaVu Serif" installed on my system. After the update to typography refresh those free fonts are used throughout the page instead of the default system fonts normally expected on Windows ("Arial" and "Georgia"). This results not only in an inconsistent look compared to other pages but more importantly to badly readable text due to bad font rendering which is caused because of insufficient hinting of those free fonts (basically the same problem that came up with the Autonym font). The code should be changed to always prefer default system fonts! --Patrick87 (talk) 00:35, 8 January 2014 (UTC)


 * I have to agree in principle, but I also understand this is next to impossible; each OS has its own system fonts and CSS cannot determin what OS is being used. I do not share Patrick's concern about Liberation Sans (or DejaVu Serif); they render quite well on my Windows PC (perhaps you should update the fonts?) One question though... If Liberation Sans is used for the body, why not use Liberation Serif for the headers? As they are basically part of the same font family, it would make more sense to combine them. On second thought, Liberation Serif is too narrow. — Edokter  ( talk ) — 14:03, 8 January 2014 (UTC)
 * I note that the font stack for the headers appears to be DejaVu Serif, then a non-free font, then the system default. While for the body it appears to be Nimbus Sans L, Liberation Sans, then some non-free fonts, then the system default. I applaud the use of free fonts over non-free fonts in this iteration. But agree with Edokter: DejaVu Sans, Nimbus Roman No9 L, and Liberation Serif exist, so why not include them too? I have no opinion on the ordering of the free fonts as long as they remain before the non-free fonts. Anomie (talk) 14:51, 8 January 2014 (UTC)
 * What the heck are you talking about? DejaVu Serif is a free font to use, reuse, and modify. Just see http://dejavu-fonts.org, including the licensing information there. Steven Walling (WMF) &bull; talk   19:15, 8 January 2014 (UTC)
 * I mis-read it too. He ment "DejaVu Serif, [then] a non-free font [Georgia], then the system default." — Edokter  ( talk ) — 21:29, 8 January 2014 (UTC)
 * Sorry, clarified. Anomie (talk) 14:32, 9 January 2014 (UTC)
 * @Edokter: Those fonts render OK, but they are considerably less readable than Arial. Therefore this change would actually be detrimental to the most important goal of typography refresh which it is actually supposed to improve: Readability.
 * @All: I assumed it would be hard to prefer system fonts while still using a customized font stack. But if no proper solution can be found we should accept that we have to stick with the specification of generic font families - normally the way to go if you don't want to force specific fonts to achieve a particular design (which will by definition never look well on all systems) but aim for maximum compatibility. In this case if default system fonts are used optimum rendering is guaranteed and a high level of readability can be assumed. At the same time people with different likings are free to change the fonts used in their browser's preferences, therefore being served with their favorites instead of a predefined list of favorites of the MediaWiki devs. --Patrick87 (talk) 21:39, 8 January 2014 (UTC)
 * The new body stack starts with Nimbus Sans L, which has issues in bold text. I would much prefer Liberation Sans as the initial font. Also, not too sure about the font-size increase to 0.875em; it is really big, no matter what font. — Edokter  ( talk ) — 14:43, 8 January 2014 (UTC)

Pages with issues due to narrower measure
Jaredzimmerman (WMF) (talk) 07:35, 9 January 2014 (UTC) There might be some page types that the narrower measure doesn't make sense as a hard limit, such as watchlist, or contributions, while we've tried to find and exclude as many of these from the typography changes as we could find, I'm sure we've missed some, if you come across pages where the measure is breaking things, list and link them here so we can take a look.

Pages where narrow measure possibly shouldn't be applied:
 * Main Page — https://en.wikipedia.org/wiki/Main_Page
 * Rationale: The design of this page is not set up for the narrow measure and become hard to read depending on where images fall


 * Administrators' noticeboard - https://en.wikipedia.org/wiki/Wikipedia:Administrators%27_noticeboard
 * The table of contents overlaps the Centralized discussion box

Pages where narrow measure isn't applied but possibly should:
 * Edit and edit preview state of pages which have narrow measure (like this talk page you're reading)
 * Rationale: even in non-visual editor workflows, its easier to understand my edits if the layout of the page resembles what it will look like in read mode.

Visual issues that may be caused by narrower measure
on https://en.wikipedia.org/wiki/United_States_Senate the template halfway down the page has weird overflow issues now https://www.dropbox.com/s/l97fccee3czxg9k/Screenshot%202014-01-09%2011.44.50.png (Mac/Chrome 32.0.1700.68 beta) Jaredzimmerman (WMF) (talk) 19:48, 9 January 2014 (UTC)
 * Caused by nowraplinks selflink class combination on the "United States Senate" header + increased font size.


 * For some reason this selector does not seem to take effect if I load with debug=true (which does give me a shitton of MF related error btw). TheDJ (talk) 20:46, 9 January 2014 (UTC)

Update to typography refresh, or refresh to typography update
What is the correct name of this project? —Michael Z. 2014-01-08 04:23 z 
 * Jaredzimmerman (WMF) (talk) 07:37, 9 January 2014 (UTC)
 * "Typography refresh" is the name of the Beta Feature

Not sure which header to put this under
Can someone please make an updated version of File:Typography refresh beta feature 2013-11-22 13-35.png? --MZMcBride (talk) 05:00, 8 January 2014 (UTC)



max-width: 715px
Today I filed 59815 because I thought the new "max-width: 715px" is a bug but I learned it is feature... It makes Wikimedia Commons nearly unusable for me, half of my (wider) screen is white now, see screenshots included in the bug.

I will wait until thursday, when this release will be deployed to the German Wikipedia for further critics. But I am sure that I do not like narrow Wikipedia pages... Raymond (talk) 16:39, 8 January 2014 (UTC)


 * ACK. Elleff Groom (talk) 21:27, 8 January 2014 (UTC)


 * I've had to uninstall. While I agree that for continuous prose (like a wikipedia article body text) a limit on width may be desirable, there are too many pages on Wikipedia and Commons where this is unhelpful. I can choose to not maximize my browser window for when I want the prose to be narrower. Too much wrapping for complex pages like watchlists and diffs. Pages with the gallery packed feature (like Flickr) were reduced to just one or two images per row. -- Colin (talk) 22:03, 8 January 2014 (UTC)

Thanks for the feedback. Out of interest could we categorise this width limit as a problem on certain types of pages e.g. file pages / pages with gallerys etc? Also would it be less of a problem if the whitespace opened up by such a change was occupied by things like infoboxes / gallery images? It would be really interesting if you could point us to examples of pages you do not think the limit works on. Maybe it's a bad idea, maybe it's a good idea that needs some polish. I'm keen for us to distinguish between the two. Jdlrobson (talk) 06:41, 9 January 2014 (UTC)
 * I think it would be a good idea to restrict the max-widths to pages in the content namespace(s) (NS0 on most wikis). But maybe not on the Main Pages? Please note: Some wikis have their Main Page in another namespace (like dewiki in the WP namespace). Your idea to occupy the whitespace by infoboxes sound interesting. Raymond (talk) 09:23, 9 January 2014 (UTC)

A couple of suggestions: Only regular paragraphs should be corralled into the maximum width. Many page features can benefit greatly from the full width of the viewport: div boxes, like the one at the top of WP:ANI; galleries; panoramic images; all tables; possibly columnar reference lists (a la enwiki and frwiki); etc. And yes, I really like the idea of pushing infoboxes and floated images into the whitespace (if it is wide enough). These things may not be possible with CSS alone, but they are still ideas. This, that and the other (talk) 12:36, 9 January 2014 (UTC)
 * This is a good idea, and we've heard it brought up before. Moving elements like images, infoboxes, etc. in to that right-hand space is not out of the question, though it's fairly complex to do well when so many of these are dependent on templates. Steven Walling (WMF) &bull;  talk   18:47, 9 January 2014 (UTC)
 * And the ToC of course. plus JS toggle might help. But to begin with, I'd go just slightly wider than this. With the font-size increase and info boxes taking up a third of the remaining space, this is just a bit too narrow for my taste atm (and I'm on a 13" laptop). TheDJ (talk) 20:27, 9 January 2014 (UTC)
 * You might already know about it, but Magnus Manske has a demo proposal of what this might look like, which I think looks good. I don't know how usable it is as currently written, though. Imo the current beta max-width look has two problems by comparison: 1) asymmetrical, with whitespace on the right but not left (and the header extends above the whitespace, making it look extra-gaping), and 2) everything pushed into a narrow column including all the flow-around boxes gives a cluttered feeling (at least to me). --Delirium (talk) 20:30, 9 January 2014 (UTC)
 * I really like many aspects of Magnus' demo. 2 problems that jump out: it doesn't work at all on small screens or in small windows (try reducing the window size - below 1024px width it starts to look bad), and it completely removes the option of using thumbnails larger than 220px (eg larger lead images, or wide panorama shots). Those aspects would need to be thought about in any design that utilized forcibly split-columns. –Quiddity (talk) 22:40, 9 January 2014 (UTC)
 * The demo is interesting, but I don't actually think it is a very pleasant layout, Having the images small and completely pulled out of the text looks very dated to me. It can be quite nice to have images break up the text, the article in the demo is not just a huge wall of grey text, I don't think that is good from a UX or visual design point of view. But it does start to get at the point of what we were experimenting with. When you have a narrower measure for your text with the larger text size it is (arguably) easier for people to read. What it also gives you is room to highlight relevant non-text content, Images, galleries, content from sister projects like wiktionary and wikisource. You could also imagine a situation where you had a two column layout with the article on one side a second functional column such as Flow for discussing the article or Translate UI for translating the article side-by-side. Try not to imagine the narrow measure as an end of itself, but as a means to an end.
 * Jaredzimmerman (WMF) (talk) 23:45, 9 January 2014 (UTC)

The 715px max width may be good for small monitors, but on most modern monitors that's just too narrow (expecially in the era of 1920x1080 and larger) interfaces. Hasteur (talk) 20:02, 9 January 2014 (UTC)

On my wide monitor, the narrow max width looks awful, and pretty much renders the typography refresh unusable for me. Please roll back that part of the update, or at least provide some css so that I can disable it myself. Thanks. —DoRD (talk) 20:45, 9 January 2014 (UTC)
 * Indeed. I find this to be ludicrously narrow, disrupting the display of tables and crushing text around infoboxes and images. I've been enjoying the typography refresh so far but this has driven me to deactivate the beta for myself. I see I am not alone in this. - Dravecky (talk) 20:59, 9 January 2014 (UTC)

Not actually sure what this is supposed to 'fix'. If people find their screens too wide to read, they will make their browser window narrower. This isn't exactly typography-related either; it is a layout change. In web design, some thing are best left to the browser. — Edokter  ( talk ) — 21:26, 9 January 2014 (UTC)
 * Agreed. I've had to disable this feature now as, frankly, having very narrow page displays is just annoying. Internet pages used to be this width, but then we all got wider, higher res screens and moved on. As Edokter says, I too don't understand what this is supposed to fix and as a result it just looks like a backwards step. Danno uk (talk) 22:52, 9 January 2014 (UTC)


 * As someone who isn't a fan, I can explain the logic behind all the studies that prove a narrower column-width (and larger font-sizes) lead to increased content understanding & retainment - It's a matter of eye-movement, whereby if the eyes have dozens of centimetres to travel to find the beginning of the next-line (or have to squint to read tiny type), that is a tiny increased cognitive load. It's partially why ye olde gigantic printed dictionaries and encyclopedias use multi-column layouts, and ditto for many current magazines and newspapers. The width of an average book page (paper/trade/hard) is: cost-effective to print/transport, and easy to hold/carry/store, but also easy to read with minimal effort (particularly by demographics without perfect vision or peak language fluency).
 * That said, I think there's a difference between reading a page in-depth, and scanning/skimming a page looking for content. I'd suggest (with no scientific evidence) that a very-wide page is preferred by many editors because we spend so much time scanning back-and-forth and up-and-down (articles/documentation) looking for sentences to re-write, and paragraphs to shuffle amongst sections, and images to align with content chunks, as well as glancing rapidly through gigantic talkpages looking for keywords or keylinks or usernames that warrant closer attention (eg, "oh look, someone mentioned category:X which interests me, I guess I'll read this thread...").
 * Overall, I think this is a highly-subjective point, i.e. there are legitimate rationales in each direction (both towards clarity/sparseness, and towards density/compactness). I usually prefer great-density (I want as much detail on-screen as possible. I purposefully use small fonts, on a largish monitor. If there's wasted space, I'll tile the windows so that they overlap. I often tile windows if I'm going back and forth between 2 programs/pages a lot. Etc.); but occasionally I'll use a bookmarklet to minimize everything and zoom the font in, so that I can lean back and read a site slowly and carefully. Relatedly: There's a very interesting script linked in this design mailing list post (scroll down to the screenshots, or go straight to the script/css to be pasted into your vector.js/.css), which I've installed on Enwiki, and I like having as an option, but not as my own default. I can certainly understand how some people would prefer to have it (or something like it) as their default though.
 * HTH. –Quiddity (talk) 22:49, 9 January 2014 (UTC)
 * No, this is clearly a bug. The intent, to ensure the width of the text is reasonably short and thereby improve readability, is fine. But limiting the length of the bodyContent div to a fixed pixel width is the wrong way to achieve that aim, for at least two reasons. First, this div contains things other than paragraphs of text (it includes diffs, for instance, which appear in two columns, and it includes floated content like images and sidebars, thereby reducing the actual text to less than the desired width); second, specifying the width in pixels takes no account of users different font sizes, screen or window sizes, etc.86.149.168.38 23:28, 9 January 2014 (UTC)

I mostly like it. As Quiddity pointed, it makes reading long articles much more pleasant. On my wide screens (1680x1050 and 1920x1080), lines were too long to be read comfortably and even long paragraphs did not span more than a few lines. But to make this update complete and really operational, non-text items should be removed from the article body and flushed to the right column ; except for tables and maybe wide pictures if they stay clear of text on both sides. Kept inline, these items just get in the way of reading. This layout would miss a way to link article text to pictures, maybe some kind of new illustration reference (like source references but pointing to illustrations on the side) could be introduced. One last point : on wide screens again, it is disturbing that the main column sticks to the left panel ; it would probably look more natural (or less disturbing) if it was centered, with white space on both sides. --EdouardHue (talk) 23:37, 9 January 2014 (UTC)


 * I was disappointed with this addition and had to disable the feature as a result. I wish it was an optional setting as I liked other aspects of what this feature provided. --Varnent (talk)(COI) 05:49, 10 January 2014 (UTC)


 * I'm afraid to say that I've disabled the feature as well. The large amount of white space created on large monitors does not go well with the user menu in the top right, which starts to look very lonely. As for the bunched-up content, enwiki's Main Page is one of the victims - Mark Schierbecker's screenshot illustrates this well. — Mr. Stradivarius  ♪ talk ♪ 06:10, 10 January 2014 (UTC)

I've disabled this feature. It looks *absolutely godawful* on modern widescreen monitors, wasting a high percentage of screen space. If the goal is to reduce paragraph width, the solution needs to be introducing multi-column layouts, not artificially forcing everyone's viewing back to the SVGA era Too bad. 174.236.69.160 08:14, 10 January 2014 (UTC)

I'm truly shocked somebody considered even trying the fixed page size. What is this? Back to the 90's of the Internet? I always admired Wikipedia for using responsive design much earlier than other mainstream websites, and I think it is absolutely not an option to introduce fixed-width pages in 2014. —Volgar (talk) 09:39, 10 January 2014 (UTC)


 * Agreed. I also had to disable this feature as well (after I had found out that this was actually not a bug – I thought something with my vector.css was broken). While in Wikipedia articles I could imagine that some people would find it helpful to have not too long rows (but these people can just adjust their browser window as mentioned above), in longer discussions, on pages with large tables, on image description pages etc. this is just VERY bothering. And yes, why would you dictate people with wide screens that they have to use a fixed width and have half of their screen left blank? Please undo. Yellowcard (talk) 10:38, 10 January 2014 (UTC)


 * I actually like it, as you can browse in a full screen window and still have reasonable short lines, but the I have to agree with 86.149.168.38 that the current solution isn't optimal. I tried


 * instead, which looks good (though I didn't test it on many pages). --Schnark (talk) 10:41, 10 January 2014 (UTC)
 * Why the heck would I want Wikipedia to not make use of my whole screen? I hate the idea and have gone ahead and inserted the code posted in a lower conversation into my vector.css page to remove the width limit. I really like the other features that were added at the same time (change in typography in article text, removal of borders around pictures) but it seems pointless not making full use of the whole screen - especially since Wikipedia automatically adjusts to the width of your browser/screen anyway. Jr8825 (talk) 11:17, 10 January 2014 (UTC)
 * And a few afterthoughts: If the purpose is to make it easier to read, why not develop a reading button (along the top pane along with 'view history' and 'edit' etc.) which turns the page into columns or moves pictures to the side? That way people can choose to use it, it is easily to enable and it doesn't force itself upon anyone. I don't like the idea of just reducing everything into one single column, if people are moving towards fixed-width columns couldn't a feature be developed that fits two or three columns into the page depending on the screen resolution/width? Therefore it's still smart and fills up the screen but it also make it easier to read. Jr8825 (talk) 11:25, 10 January 2014 (UTC)

You state accessibility as one of your goals and you stress that visual impairments must not get in the way of access. I'm afraid that a fixed maximal width that is measured in pixels works against this goal. Some visual impaired people (like me) work with big screens and huge fonts, i.e. they scale everything up. This works very nicely as long as I do not run into fixed pixel measurements. There is also another point. In the time of CRTs the pixel densities of the monitors didn't vary much but today we have to work with an extreme range of pixel densities of which many would not work well with a fixed pixel width optimized for some commonplace monitor configuration. In summary, if you want to set any width limit at all, do it in ems, not in pixels. If this is found necessary, reasonable values should be at least 60 or 70 ems. But I think that this should be better kept easily configurable because it depends on so many factors (reading distance, for example) which cannot be generalized. --AFBorchert (talk) 12:46, 10 January 2014 (UTC)

715px is too narrow. I think 900px would be OK.--Portal3046 (talk) 05:18, 11 January 2014 (UTC)

I disabled the feature because I like to use the full width of my screen. It's a pity since I liked the other improvements especially the increased difference between the section and sub-section headings. Would it be possible for each reader to decide in its preferences the width he likes ? With, of course, an option for "full screen width" ? Thank you.--AnTeaX (talk) 11:09, 11 January 2014 (UTC)

Numbers looks weird in article title
The "9" and "1" in the title at the top of the AT91SAM article looks weird. They are both shorter than then "AT" and "SAM". I'm using 64-bit Windows 7 IE11. 98.164.11.206 23:05, 8 January 2014 (UTC)
 * That's the nature of the Georgia font: it uses "old-style" digits. This is the way it is supposed to look. ABCabc 1234567890 versus Georgia: ABCabc 1234567890 This, that and the other (talk) 01:47, 9 January 2014 (UTC)
 * Yes, that's correct. We have tried to account for this by increasing the line height of titles (i.e. h1 elements) so that there is enough space to provide some balance. If anyone would like to suggest a common serif to emphasize other than Georgia, suggestions are welcome. Overall, we're aiming for a serif that conveys a serious, encyclopedic feel. Steven Walling (WMF) &bull; talk   18:45, 9 January 2014 (UTC)
 * Does Georgia (or a similar font) have the ability to specify a "lining numerals" variant? The traditional typographic practice with old-stye numerals wasn't to use them throughout, but to use both types depending on context. Old-style numerals would be used in body text, and then lining/title numerals would be used in headings and titles. --Delirium (talk) 22:09, 9 January 2014 (UTC)

Something like this will force lining numerals in modern browsers where appropriate (although the user may need to have a recent version of Georgia installed too): Is this something that could be incorporated into the refresh? the wub "?!"  00:09, 10 January 2014 (UTC)
 * Sounds pretty reasonable. I'll make sure we run it up to the designers in our next meeting about this. Steven Walling (WMF) &bull; talk   00:17, 10 January 2014 (UTC)
 * For those not familiar with the rationale behind "old-style figures" they are created to bend in better with written text. the wub, this would be one totally valid way to fix the bottoms of letters being clipped off, adjusting the line height would be another way, when we meet next time to iterate on the Typography refresh, I think this is a good idea and we'll definitely evaluate it against some other options
 * Jaredzimmerman (WMF) (talk) 00:58, 10 January 2014 (UTC)

This is my only problem with using Georgia (or any typeface that uses old-style numerals [OSN]) in headers (or in articles either). OSN's are a nice typographic feature for signs, posters, or simulating something that might have been written in the 1700s or 1800s. It's just distracting and difficult to read in most modern uses, especially in an encyclopedia. We want to make things easier to read, so why make the numerals more difficult to read? If you pick a typeface that avoids OSN (and any CSS "hacks" necessary to "fix" the line spacing as shown in the examples above), then you will have something that will work in ALL browsers, not just the "modern" ones. I also think that doing so is more in line with the goals of this refresh. And if the font on the mobile edition doesn't match, then just change the font there. That will improve the mobile version, too. &mdash; Will  scrlt ( Talk | w:en | com | b:en | meta )  17:50, 12 January 2014 (UTC)

Underlining Links
I’d suggest that links should be underlined with  instead of   The text-decoration cuts through the letters with descenders (g, j, y), while the border leaves enough space for them. —MRosetree (talk) 11:41, 9 January 2014 (UTC)
 * Disagree,  is the de facto method of underlining links, and is present in every major browser's default stylesheet as well as in wide use across major websites. As such, I believe users come to expect that when a link is underlined, the underline is close to the bottom of the text and will cut through those letters you mention. Pushing the underline further down would look "weird" because it is simply not seen across the major websites. -- Skiz  zerz  16:35, 9 January 2014 (UTC)
 * There's a user preference for link underlining... we should probably simply respect that? --MZMcBride (talk) 23:05, 9 January 2014 (UTC)
 * Just because something is not widely used doesn’t mean it is cleaner. For example the letters ‘g’ and ‘q’ look exactly the same in an underlined link (Bugzilla etiquette). So it increases readability to use the border-Version. But I agree with MZMcBride, the user preference should be respected. —MRosetree (talk) 07:45, 10 January 2014 (UTC)
 * Strongly disagree. I could not support any change that blatantly screws up proper typography standards in the way that was suggested. The bottom border is a block-level style. Underlining is an inline style. If you had something two lines long that was underlined using border, it would underline the bottom of the two lines, but the top would not be. Even if you "hack" the CSS so that it is set to in-line, the semantics would be all screwed up. You use underlining to underline, not a border. Borders sit outside of the text (which is why you like it, since the underlines drop below the descenders), but that's not the way that underlining works. Underlines are supposed to appear under the baseline of the text, which means that they likely will cross the descenders. That's what is supposed to happen. If a typeface doesn't allow enough room between the baseline and the descender such that it becomes unreadable, then just pick a different, better designed typeface. &mdash; Will  scrlt ( Talk | w:en | com | b:en | meta )  17:56, 12 January 2014 (UTC)

blockquote
On enwiki, blockquotes are showing in italics, and much larger than the font-size: 85% set in Common.css. Here it is not italic. "Lorem ipsum dolor" --Gadget850 (talk) 20:42, 9 January 2014 (UTC)
 * Italicised blockquotes were killed already, the change will be visible on en.wp too soonish (with wmf10 at the latest, see MediaWiki 1.23/Roadmap). Matma Rex (talk) 21:07, 9 January 2014 (UTC)
 * I support this change. Excessive italics should be avoided. But I have an other problem: In my Windows 7/Opera 12/GDI setup the contents of the blockquote look like they are bold. The blockquote isn't only bigger and uses an other font, it looks like it's double the weight as the rest of the text. The debugger shows that the calculated font weight is the same in both cases (400) but the font family and size is different (16.9px instead of the normal 14.08px). Dimming the currently used  slightly down to   fixes the problem (reduces the calculated size to 16.47px). I did not tested it with other browsers and configurations but I'm pretty sure that 0.03 will not make a difference in most other cases. --TMg 19:27, 10 January 2014 (UTC)

In enwiki (vector skin) using Safari on Mac (most recent versions, default everything), blockquotes just started appearing at 17pt in italics, compared to 14pt body text. It is way too big, folks. Zero0000 (talk) 06:56, 11 January 2014 (UTC)
 * The italics issue has been fixed but not yet deployed. The size has not yet been fixed. We can always override it on enwiki through Common.css. --Gadget850 (talk) 11:59, 11 January 2014 (UTC)

Max width / Narrow pages opt out option
As with all experiments, there is always something that might be seen as a little controversial / whacky to some users. It seems this time round the max-width is upsetting users.

If any one wants to disable the max width part of this experiment on this opt in feature, feel free to add in your Vector.css e.g. User:Jdlrobson/vector.css the following css to disable it. Please do not apply this rule somewhere stupid like MediaWiki:Common.css where you will effect all users and not allow constructive discussions around this part of the experiment to take place. Jdlrobson (talk) 21:05, 9 January 2014 (UTC)


 * You mean "affect" and using the word "stupid" in this context is probably a poor idea. --MZMcBride (talk) 23:03, 9 January 2014 (UTC)
 * I can't agree more with MZMcBride.--William915 (talk) 09:36, 10 January 2014 (UTC)

Pages gone narrow when logged in.
Is checking this option supposed to be making all Wikipedia articels narrow (except when previewed from edit source)? I've unchecked it for now, and the pages are fine again, but how will I know when the bug is fixed? This is true for both IE9 and Firefox. It was also okay when not logged in, but...

Graham.Fountain.
 * Disabled it for now too. It looks similar to the Flow discussion style, which does not work for article space at all. - Hahnchen (talk) 21:22, 9 January 2014 (UTC)
 * The general refresh seemed promising, but I disabled it now as it seems this was "by design". Too bad, it sounded like a good initiative. Disabled, let me know when you're back to normal width and I'll happily try again. Effeietsanders (talk) 21:01, 10 January 2014 (UTC)

Narrow pages: centering content
I've seen the new display of pages as narrow, which is a great thing I waited for a long time: on wide screens, it was difficult to follow lines in an article. But I would have a suggestion: display the page content at center of the screen. Indeed, on my screen, the page content only covers one half on the screen, on the left, which makes it very uncomfortable and very bad looking, with the whole right half of the screen made white.

Another way would be to display the content using two columns.

Epok (talk) 21:27, 9 January 2014 (UTC)
 * I agree in principle with a fixed column width. However, I use a 2560x1600 monitor and while I know that is rather uncommon, it looks horribly off-centred and unbalanced. Even on my laptop which is 1366px wide, the column width looks much too narrow to me. Centring the column would certainly minimise the issue. I'd like to see it a bit wider still though, to better fit the vast majority of displays (according to this, 90% of displays are at least 1280px wide, and 99% of displays are at least 1024px wide, and those stats are a year out of date). I'm not suggesting we set the column width to 1280px or 1024px necessarily, but something not far off would be a better compromise between compatibility and viewability. Diliff (talk) 23:24, 9 January 2014 (UTC)
 * You could try adding

to your personal css. That should center the main body content.--Salix alba (talk) 00:18, 10 January 2014 (UTC)
 * Das geht garnicht. und tschüss.--Mauerquadrant (talk) 05:46, 10 January 2014 (UTC)
 * Tested here, don't work. Maybe I'm putting it in the wrong place? Note: I'm using style vector. Epok (talk) 08:41, 10 January 2014 (UTC)
 * Try


 * In your vector.css. This has a simpler selector. Its working for me in en.wikipedia using chrome. You may need to refresh you browser to get it to work.--Salix alba (talk) 09:09, 10 January 2014 (UTC)
 * Yep, this version worked! Thx, much better. Epok (talk) 09:21, 10 January 2014 (UTC)
 * I'm not that keen on editing my own CSS - I've already disabled the typography refresh on my account as I didn't like what it did to the pages. If we're all editing our own CSS to get it looking the way we like it, how is that helping move the typography refresh forward? I assume that overrides the settings that the beta? Surely it's better for us to test what is implemented for everyone participating in the beta and provide feedback on that? Diliff (talk) 09:47, 10 January 2014 (UTC)

Infoboxes and tables not considered
Sorry, but the current limitation is way to narrow. And why pixels? Why 715px? It simply feels wrong if half of the screen space is wasted. Currently it's like the Vector design is broken somehow. The rest of the design does not reflect the change. Most important problem: Currently this results in lines of only 50 to 60 characters if there is an infobox template, an image, climatic diagram or something like that on the right. People are using this space a lot when designing articles. There should be enough room for at least 80 to 100 characters even with an infobox template on the right. A typical infobox is 250px to 300px. PS: I forgot all non-article pages like the main pages and portals. They are all using columns. Mostly two columns, sometimes three columns. With the proposed change all these pages are excessive scrolling stripes of sometimes only 20 characters per line. Even the most narrow newspaper style does have longer lines. An other example are gallery pages. Now it's impossible to use images larger than the proposed 715px without breaking the design.
 * 1) Please expand the max-width to something like 1000px.
 * 2) Please provide a solution to turn the limitation off for big tables.

PPS: Regarding the infobox templates. When looking at an article like de:Flugplatz Buochs with a single infobox template in the top right as the only non-text element, it feels like the infobox must be outside of the text. I created a mockup to show what I mean. Being able to put infoboxes and images there would solve many current problems. I'm sure many user would love and use this. It doesn't solve the problem with big tables, though. I think the best way to solve this is to turn the limitation of for specific elements like big tables. Something like  for big tables,   for images and   for infobox templates as shown in the image. --TMg 16:39, 10 January 2014 (UTC)

We are considering this. One of the main motivations for making the space on the right was to explore putting infoboxes and other media here. It feels like this may warrant a separate beta experiment though in my opinion :) Jdlrobson (talk) 23:56, 10 January 2014 (UTC)

Margins when mixing paragraphs and lists
I know I'm nitpicking. That's the point of my posts. ;-) Please don't get me wrong. I like almost all the changes (bigger font size, more line height, more margins). However, here is one of my nitpicking issues: First paragraph introduces list: Second paragraph introduces list: With the typography refresh enabled it's like the margins are switched. The margin at the bottom of a list (between a list and a paragraph) is smaller than the margin at the top of a list (between a paragraph and a list). It should be the other way around.
 * First list
 * Second list

For comparison: With the typography refresh disabled these margins are equal. I never liked that for the same reason as above. In my opinion the bottom margin of a list should be slightly bigger than the top. I'm not sure if this is a good idea in all possible cases where lists are used. I know it will be good in most cases since almost every list does have an introduction and only very few do have footnotes. If you are not sure please make the margins equal again. --TMg 18:41, 10 January 2014 (UTC)

Enlarge image icon
Why was the "enlarge image" icon removed? I'm afraid this will cause existing pages to contain copyright infringements. Yea, I know this sounds strange. Let me explain. Sometimes images are used like they are simple imagemaps, using the relatively new  parameter as shown in the example on the top left. With the magnify clip this wasn't a problem. The file description page could still be reached. When removing the icon all pages with such images will have an ugly licensing problem: you can't reach the file description page any more.

Oh, and while you are at it, please make the design of the ever misplaced "i" icon of the imagemap extension fit (example at the bottom right). --TMg 19:04, 10 January 2014 (UTC)
 * The ImageMap extension allows you to control the placement of the blue icon. — Edokter  ( talk ) — 20:24, 10 January 2014 (UTC)

Why can't you center the page?
Instead of pulling the whole page left.

Left Aligning
Left aligning the whole page doesnt really look well, especially for users who have really adjusted themselves to center aligned page. When all of a sudden, I viewed the new Typography refresh beta update, it gave me really a complex look, and I didnt wait any longer to revert the update. I hope Wikipedia will reconsider this update. Anandtr2006 (talk) 14:24, 11 January 2014 (UTC)

Thumbs border removing?
«''Removing the border around thumbs, increasing the whitespace around them, and changing the text styling on thumbcaptions. Vector and Monobook styles are both overly reliant on border styles to demarcate page elements. Numerous borders, especially with right angles, increases cognitive load when scanning a page.''» — That is a really bad idea. All the pages that have extensive picture usage have now transformed into hardly readable mixture of main text and captions. Check, as an example ru:Письма_махатм_А._П._Синнетту. You can see also that the font in the captions is the same in size now as in the main text, that brings even more confusion. --Melirius (talk) 13:41, 12 January 2014 (UTC)
 * Aha, the last point (about caption font) is connected to the magnification of the font in FF by Ctrl+, and it is not existing in the default size, where the difference is clearly visible. But this is still an issue to be solved: after the first magnification the difference is substantially decreased and after the second perceived difference disappears. --Melirius (talk) 13:48, 12 January 2014 (UTC)

I suggest also to make an option that allows one to show borders or switch them off for a thumb. --Melirius (talk) 13:50, 12 January 2014 (UTC)

A bit wider?
It's really good to see this project responding to feedback from users; it's really improved over the last few months. I still get the feeling that the current chosen page width is a bit too narrow, particularly on pages such as the enwiki Main Page: have you experimented with making it perhaps 50 or 100px wider? I also wonder whether you have experimented with A/B or multivariate testing on this? -- Giadiniera (talk)

Solve the width problem by making it user-configurable
Perhaps we could allow configuration of the narrowing or widening of the default screen width become a user-configurable option. Something like we have now under Preferences > Appearance > Files > Thumbnail Size. The options could read: Tiny (320px), Narrow (620px), Default (715px), Wide (960px), Full-screen. The numbers are just examples; feel free to substitute other values that make sense.
 * The "Tiny" option matches the width of many mobile devices. In fact, this could basically just trigger the standard mobile interface so that we don't have to reinvent the wheel.
 * The "Narrow" option would be the minimum width we can see being the narrowest usable screen size. 620px fits in a standard 640x480 monitor resolution (allowing 20px for browser borders and scroll bars). Nobody uses 640x480 anymore you say? Not true! Many people with limited vision use very low resolutions to "scale up" the size of everything on their screen automatically (higher resolutions make text and other things appear bigger, thus easier for people with vision problems to read more easily). Yes, there may be some issues with divs, TOCs, tables, etc., but we are trying to do our best here, and it establishes a goal to design for.
 * The "Default" value is the 715px that is currently being bandied around in this proposal. Whatever "default" size is picked would go here, and it would be selected by default for all new users and for users with no accounts.
 * The "Wide" would be a comfy size for people with wider screens. It probably also should center the main body text on the screen and do any other changes that people are suggesting (like moving thumbnails outside the body text flow). It would be for those people with plenty of screen real estate. Don't like it? Just change back to default.
 * The "Full-screen" option would basically leave everything the way it is now. The text sprawls all the way across the screen. For folks with unusual screen dimensions, this might be a better option than any fixed size. Also, for people who like to have the text flow all the way across the screen, this would satisfy them.

To test this, the functionality could be implemented as a Gadget initially. Eventually, if successful, it would be rolled out into the interface. It should become part of Preferences > Appearance, under the Skin section. If a skin supports these default widths, then the preferences options would appear. If not, they would be dimmed out (disabled). This could be determined easily by adding a setting inside the skin's file. If the option is supported (i.e., the skin is updated to support these features), a directive (like "narrow-width:620px" or "full-screen:yes") could be added to the template, and preferences would only have to check that file to see if a width is supported and how many pixels it is (715px might be the default for Vector, 720px for Modern, and 721px for some other skin).

This level of configuration would be a big benefit for both end-users and for skin designers. It also would provide flexibility down the road as screen dimensions change, and also help designers trying to design new skins for people with disabilities or for new technologies that have a totally different output geometry. It also would satisfy people who like the text wide and sprawling, and those would think that narrow and compact is more readable. Personally, I think it depends on the device you are using to output (huge difference between how any site looks on my netbook screen vs. my HDTV). No designer can properly design a site to look good under all conditions, especially since it's a subjective decision anyway. Leaving the user in control is the best way to "fix" this problem. But, giving them a reasonable default is very important, too.

What do you think? &mdash; Will  scrlt ( Talk | w:en | com | b:en | meta )  18:23, 12 January 2014 (UTC)

DejaVu Serif Bold looks awkward in headings
Look at Main Page, the headings like "From today's featured article" look awkwardly ugly. The letters look like being smashed down and stretched horizontally. While I understand that this is a typeface peculiarity, I really don't think this should be used on Wikipedia and sister projects, especially as it is so noticeable on the Main Page. Timothy Gu (talk) 19:32, 12 January 2014 (UTC)