Skip to content

Define standard font specifications and update new beatmap panel designs accordingly #32673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Define standard font specifications and update new beatmap panel designs accordingly #32673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
073d359
Define standard font sizes and update new beatmap panel desgins accor…
frenzibyte Apr 3, 2025
48575f4
Display beatmap card title in styled font
frenzibyte Apr 4, 2025
399d5c9
Decrease difficulty author font level in standalone panel
frenzibyte Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion osu.Game/Beatmaps/Drawables/DifficultySpectrumDisplay.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ private void load(RulesetStore rulesets)

Add(countText = new OsuSpriteText
{
Font = OsuFont.Default.With(size: 12),
Font = OsuFont.Caption,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Padding = new MarginPadding { Bottom = 1 }
Expand Down
35 changes: 35 additions & 0 deletions osu.Game/Graphics/OsuFont.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,41 @@ public static class OsuFont
/// </summary>
public static FontUsage Default => GetFont();

/// <summary>
/// Equivalent to Torus with 32px size and semi-bold weight.
/// </summary>
public static FontUsage Display => GetFont(size: 32, weight: FontWeight.SemiBold);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does "Display" mean here? I think we need to choose a better term.

Copy link
Member Author

@frenzibyte frenzibyte Apr 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems to be a terminology in fonts indicating large text, but it's more commonly used for font variation rather than sizes. Better terminologies could be Headline or Title.

Copy link
Member

@peppy peppy Apr 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Title and subtitle work fine enough. You don't need to invent new standards.

google docs:
Safari 2025-04-07 at 10 12 22

microsoft word:
Safari 2025-04-07 at 10 14 03


/// <summary>
/// Equivalent to Torus with 28px size and semi-bold weight.
/// </summary>
public static FontUsage Subdisplay => GetFont(size: 28, weight: FontWeight.SemiBold);

/// <summary>
/// Equivalent to Torus with 22px size and semi-bold weight.
/// </summary>
public static FontUsage Heading => GetFont(size: 22, weight: FontWeight.SemiBold);

/// <summary>
/// Equivalent to Torus with 18px size and semi-bold weight.
/// </summary>
public static FontUsage Subheading => GetFont(size: 18, weight: FontWeight.SemiBold);

/// <summary>
/// Equivalent to Torus with 16px size and regular weight.
/// </summary>
public static FontUsage Body => GetFont(size: 16, weight: FontWeight.Regular);

/// <summary>
/// Equivalent to Torus with 14px size and regular weight.
/// </summary>
public static FontUsage Caption => GetFont(size: 14, weight: FontWeight.Regular);

/// <summary>
/// Equivalent to Torus with 12px size and regular weight.
/// </summary>
public static FontUsage Tiny => GetFont(size: 12, weight: FontWeight.Regular);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having these next to definitions like "Numeric" doesn't work well for me. Maybe all these should be prefixed with Default or DefaultFor or something else.

Alternatively we remove or move the Numeric and Torus definitions below. Or move the new definitions somewhere else.

Open to suggestions.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm in favour of removing all the properties below it as I foresee all components in the game using only any of the specifications defined here.

However, removing will be a tough process to go through, so I would at least temporarily prefix those with Legacy/Old so it's clear that they shouldn't be used anymore.

For existing usages of these definitions, I foresee them using the new specifications with the typeface swapped with alternate, i.e. OsuFont.Title.With(typeface: FontWeight.TorusAlternate) or OsuFont.Body.With(typeface: FontWeight.Numeric).


public static FontUsage Numeric => GetFont(Typeface.Venera, weight: FontWeight.Bold);

public static FontUsage Torus => GetFont(Typeface.Torus, weight: FontWeight.Regular);
Expand Down
2 changes: 1 addition & 1 deletion osu.Game/Screens/SelectV2/CarouselItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ namespace osu.Game.Screens.SelectV2
/// </summary>
public sealed class CarouselItem : IComparable<CarouselItem>
{
public const float DEFAULT_HEIGHT = 50;
public const float DEFAULT_HEIGHT = 45;

/// <summary>
/// The model this item is representing.
Expand Down
13 changes: 7 additions & 6 deletions osu.Game/Screens/SelectV2/PanelBeatmap.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ private void load(OverlayColourProvider colourProvider)

Icon = difficultyIcon = new ConstrainedIconContainer
{
Size = new Vector2(20),
Size = new Vector2(16f),
Margin = new MarginPadding { Horizontal = 5f },
Colour = colourProvider.Background5,
};
Expand All @@ -99,12 +99,13 @@ private void load(OverlayColourProvider colourProvider)
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Scale = new Vector2(OsuFont.Caption.Size / OsuFont.Body.Size),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what on earth???

},
difficultyRank = new TopLocalRank
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Scale = new Vector2(0.75f)
Scale = new Vector2(0.5f)
},
starCounter = new StarCounter
{
Expand All @@ -122,22 +123,22 @@ private void load(OverlayColourProvider colourProvider)
{
keyCountText = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 18, weight: FontWeight.SemiBold),
Font = OsuFont.Body.With(weight: FontWeight.SemiBold),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the weights should be part of the spec, not an afterthought.

Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Alpha = 0,
},
difficultyText = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 18, weight: FontWeight.SemiBold),
Font = OsuFont.Body.With(weight: FontWeight.SemiBold),
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Margin = new MarginPadding { Right = 8f },
Margin = new MarginPadding { Right = 5f },
},
authorText = new OsuSpriteText
{
Colour = colourProvider.Content2,
Font = OsuFont.GetFont(weight: FontWeight.SemiBold),
Font = OsuFont.Caption.With(weight: FontWeight.SemiBold),
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft
}
Expand Down
13 changes: 6 additions & 7 deletions osu.Game/Screens/SelectV2/PanelBeatmapSet.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ namespace osu.Game.Screens.SelectV2
{
public partial class PanelBeatmapSet : PanelBase
{
public const float HEIGHT = CarouselItem.DEFAULT_HEIGHT * 1.6f;
public const float HEIGHT = CarouselItem.DEFAULT_HEIGHT * 1.7f;

private BeatmapSetPanelBackground background = null!;

Expand Down Expand Up @@ -54,7 +54,7 @@ private void load()
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Icon = FontAwesome.Solid.ChevronRight,
Size = new Vector2(12),
Size = new Vector2(8),
X = 1f,
Colour = colourProvider.Background5,
},
Expand All @@ -76,17 +76,17 @@ private void load()
{
titleText = new OsuSpriteText
{
Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 22, italics: true),
Font = OsuFont.Heading.With(typeface: Typeface.TorusAlternate),
},
artistText = new OsuSpriteText
{
Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 17, italics: true),
Font = OsuFont.Body.With(weight: FontWeight.SemiBold),
},
new FillFlowContainer
{
Direction = FillDirection.Horizontal,
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding { Top = 5f },
Margin = new MarginPadding { Top = 4f },
Children = new Drawable[]
{
updateButton = new UpdateBeatmapSetButton
Expand All @@ -100,8 +100,7 @@ private void load()
AutoSizeAxes = Axes.Both,
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
TextSize = 11,
TextPadding = new MarginPadding { Horizontal = 8, Vertical = 2 },
TextSize = OsuFont.Tiny.Size,
Margin = new MarginPadding { Right = 5f },
},
difficultiesDisplay = new DifficultySpectrumDisplay
Expand Down
20 changes: 8 additions & 12 deletions osu.Game/Screens/SelectV2/PanelBeatmapStandalone.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ namespace osu.Game.Screens.SelectV2
{
public partial class PanelBeatmapStandalone : PanelBase
{
public const float HEIGHT = CarouselItem.DEFAULT_HEIGHT * 1.6f;
public const float HEIGHT = CarouselItem.DEFAULT_HEIGHT * 1.7f;

[Resolved]
private IBindable<RulesetInfo> ruleset { get; set; } = null!;
Expand Down Expand Up @@ -75,7 +75,7 @@ private void load()

Icon = difficultyIcon = new ConstrainedIconContainer
{
Size = new Vector2(20),
Size = new Vector2(16),
Margin = new MarginPadding { Horizontal = 5f },
Colour = colourProvider.Background5,
};
Expand All @@ -94,19 +94,16 @@ private void load()
{
titleText = new OsuSpriteText
{
Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 22, italics: true),
Shadow = true,
Font = OsuFont.Heading.With(typeface: Typeface.TorusAlternate),
},
artistText = new OsuSpriteText
{
Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 17, italics: true),
Shadow = true,
Font = OsuFont.Body.With(weight: FontWeight.SemiBold),
},
new FillFlowContainer
{
Direction = FillDirection.Horizontal,
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding { Top = 5f },
Children = new Drawable[]
{
updateButton = new UpdateBeatmapSetButton
Expand All @@ -120,8 +117,7 @@ private void load()
AutoSizeAxes = Axes.Both,
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
TextSize = 11,
TextPadding = new MarginPadding { Horizontal = 8, Vertical = 2 },
TextSize = OsuFont.Tiny.Size,
Margin = new MarginPadding { Right = 5f },
},
difficultyLine = new FillFlowContainer
Expand All @@ -146,23 +142,23 @@ private void load()
},
difficultyKeyCountText = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 18, weight: FontWeight.SemiBold),
Font = OsuFont.Subheading,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Alpha = 0,
Margin = new MarginPadding { Bottom = 2f },
},
difficultyName = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 18, weight: FontWeight.SemiBold),
Font = OsuFont.Subheading,
Origin = Anchor.BottomLeft,
Anchor = Anchor.BottomLeft,
Margin = new MarginPadding { Right = 5f, Bottom = 2f },
},
difficultyAuthor = new OsuSpriteText
{
Colour = colourProvider.Content2,
Font = OsuFont.GetFont(weight: FontWeight.SemiBold),
Font = OsuFont.Caption.With(weight: FontWeight.SemiBold),
Origin = Anchor.BottomLeft,
Anchor = Anchor.BottomLeft,
Margin = new MarginPadding { Right = 5f, Bottom = 2f },
Expand Down
8 changes: 3 additions & 5 deletions osu.Game/Screens/SelectV2/UpdateBeatmapSetButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,21 +55,20 @@ public BeatmapSetInfo? BeatmapSet

public UpdateBeatmapSetButton()
{
Size = new Vector2(75f, 22f);
Size = new Vector2(72, 22f);
}

private Bindable<bool> preferNoVideo = null!;

[BackgroundDependencyLoader]
private void load(OsuConfigManager config)
{
const float icon_size = 14;
const float icon_size = 12;

preferNoVideo = config.GetBindable<bool>(OsuSetting.PreferNoVideo);

Content.Anchor = Anchor.Centre;
Content.Origin = Anchor.Centre;
Content.Shear = new Vector2(OsuGame.SHEAR, 0);

Content.AddRange(new Drawable[]
{
Expand All @@ -87,7 +86,6 @@ private void load(OsuConfigManager config)
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(4),
Shear = new Vector2(-OsuGame.SHEAR, 0),
Children = new Drawable[]
{
new Container
Expand All @@ -110,7 +108,7 @@ private void load(OsuConfigManager config)
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.Default.With(weight: FontWeight.Bold),
Font = OsuFont.Body.With(weight: FontWeight.SemiBold),
Text = "Update",
}
}
Expand Down
Loading