Xfce.org website redesign / font size

daffyduck · 2026-07-04 17:01:16

I took a quick look at xfce.org.

I noticed that the (text) font size computes to 12.8 px.

That one thing alone immediately makes the site look super-old.

Therefore, the first change that should be done to the website is to increase the size of EVERYTHING, in order to make the font size reach 17 px, which is the normal size for a modern design.

Any other changes are less important.

ToZ · 2026-07-31 22:33:52

Bug/enhancement requests for the website can be made here.

daffyduck · 2026-08-01 01:20:53

Thanks, I'll suggest something there .... although I hate registering.

The css stylesheets are obfuscated into "css.php?site=www", but I couldn't quickly find a source file that generates it, so I can't see what css changes would be necessary.

Interestingly, someone made a complaint about the xfce.org "updating it is a mess", although I don't find the organization of the code to be terrible.

The complaint was likely about "paragraphs" in "news-array.php" being an array, which was obviously not a good idea. The simple solution is to make member "paragraphs" optional, and instead of it add a member "body" of type UTF-8 string, which is a trivial change.
-----------------
Perhaps css is here, not really sure:
https://gitlab.xfce.org/www/cdn.xfce.or … type=heads
----------------------
Found it:
https://gitlab.xfce.org/www/cdn.xfce.or … type=heads
----------------------
This does the trick, although I didn't resize any images.
At the top of "site_www.css", add:

	body {font-size: 17px; }
	#xfce-header {font-size:96%;}
	#mainnav {font-size:96%;}
	#mainnav #languageform select {font-size:96%;}	
	#top .rss {font-size:90%;}
        #article { line-height: 1.6em; }

I'll suggest it later, when I get the time to register blah blah I hate registering.

---------------------------
But also, why that outdated and harsh black-on-white? It is a complete mismatch with dark images on the slideshow. Make it more modern by decreasing the contrast at least by a bit:

	body, a span, #content  { color: #222; }
	#content, #content  #slidenav { background-color:#fafafa; }

---------------------------
Or, an even milder variant:

	body  { background-color:#e4e4e4; }
	body, a span, #content  { color: #222; }
	#content, #content #slidenav, #content .post-day { background-color:#f5f5f5; }

-------------------------------
Or, something a bit less dull. This one is actually an imperceptible purple:

	body, a span, #content  { color: #222; }
	body  { background-color:#e6e3e6; }
	#content, #content #slidenav, #content .post-day { background-color:#f7f4f7; }

-------------------------------
I forgot the look on mobile and tablets.

	@media screen and (max-width: 1030px) 
	{
		body {font-size: 16px; }
		#main  { min-width: initial; }
		#main .frontpage_cols {  flex-direction: column; }
		#main .frontpage_cols .column { max-width: 95%; }
	}	
	@media screen and (max-width: 600px) 
	{
		body { font-size: 15.3px; }
		#article { line-height: 1.5em; }
		#xfce-header ul { padding-top: 1em; }
	}

----------------------------
Also, there is some unnecessary whitespace (&nbsp) in the header, interfering with element positioning. Here, this one:

	<h1 id="xfce-header-title">Xfce</h1>
	<h2 id="xfce-header-subtitle">Subdomains</h2>
	&nbsp;

But, when you remove it, then also adjust the padding for mobile screens:

#xfce-header ul { padding-top: 2.4em; }

Added later 9 h 52 min 25 s:
Here is another thing I noticed:
The webpage css is selecting fonts which it is not serving. That is a bad practice.
I.e, if you have this in the font selector:

font-family: "Bitstream Vera Sans","Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;

Then the webpage should serve at least the font "Bitstream Vera Sans" from its own servers.

Otherwise, page visitors don't all see the same font, especially when the first specified font is not a "web-safe font", and Bitstream Vera is not web-safe, i.e. it is likely that a large proportion of visitors don't have the font installed on their system. Since fonts typically have different internal sizes, this causes further inconsistencies in positioning of webpage elements.

Font data sizes generally range from 11 kB for the basic charset, 20 kB for a common charset, and 100 kB for a relatively complete charset.
Basic charsets are more than sufficient for title fonts and similar, while the other two can be used for body text and similar.
So, if a webpage uses about three different fonts, then that would add approximately 60 kB extra data to download, which is not that much.

The only catch is that reducing the font to a small charset (called "subsetting") is not allowed by licenses of some fonts, so one should always check the font license and how to comply with it in the case of subsetting, before selecting a font for a webpage.

Added later 10 h 45 min 52 s:
And the slideshow: it is easy to notice that a few images in the slideshow are not of the best quality.
That happens because, to get high quality, you have to raise the font DPI before the screenshot.
However, if DPI is raised, then one is forced to select a WM theme with matching DPI, and Xfce is notorious for a lack of those.

So, in a sense, the slideshow immediately displays some weak points of Xfce: most themes are not really HiDPI-ready. At least it is kind-of honest, although most visitors won't figure out the connection.

In the long term, The WM / compositor should (as in: I recommend) get the ability to internally resize the WM themes in memory, which is really not very hard to implement. I might write a few words about that, somewhere on this forum.

Last edited by daffyduck (2026-08-01 11:18:18)

daffyduck · 2026-08-04 09:26:44

That last part of the previous post is actually a feature request for a missing feature, to be implemented in both xfwm4 and in the upcoming xfwl4 compositor (where both would likely need a similar implementation).

So, where do I submit feature requests to those two projects?

Last edited by daffyduck (2026-08-04 09:27:25)

daffyduck · 2026-08-11 11:14:14

Submitted the issue regarding font size and mobile-friendliness:
Font size improvements for www.xfce.org
https://gitlab.xfce.org/www/www.xfce.or … k_items/48

Added later 01 min 07 s:

Submitted the issue "Color contrast improvements to the www.xfce.org webpage":
https://gitlab.xfce.org/www/www.xfce.or … k_items/49

Added later 05 min 02 s:

Submitted the issue "www.xfce.org is not serving the primary fonts it is using":
https://gitlab.xfce.org/www/www.xfce.or … k_items/50

Added later 32 min 19 s:

Submitted the issue "[FEATURE REQUEST] WM decorations (WM themes) should be automatically resizable."
https://gitlab.xfce.org/xfce/xfwm4/-/work_items/920

Xfce Forum

Sub domains

#1 2026-07-04 17:01:16

Xfce.org website redesign / font size

#2 2026-07-31 22:33:52

Re: Xfce.org website redesign / font size

#3 2026-08-01 01:20:53

Re: Xfce.org website redesign / font size

#4 2026-08-04 09:26:44

Re: Xfce.org website redesign / font size

#5 2026-08-11 11:14:14

Re: Xfce.org website redesign / font size

Board footer